关于相对布局ConstraintLayout的使用知识_constraintlayout平分宽度

---

前言

ConstraintLayout 是一个使用“相对定位”灵活地确定微件的位置和大小的一个布局，它的出现是为了解决开发中过于复杂的页面层级嵌套过多的问题——层级过深会增加绘制界面需要的时间，影响用户体验。

---

一、位置约束

1.1 基本方向约束：

app:layout_constraintTop_toTopOf=""         我的顶部和谁的顶部对齐
app:layout_constraintBottom_toBottomOf=""   我的底部和谁的底部对齐
app:layout_constraintLeft_toLeftOf=""       我的左边和谁的左边对齐
app:layout_constraintRight_toRightOf=""     我的右边和谁的右边对齐
app:layout_constraintStart_toStartOf=""     我的开始和谁的开始对齐
app:layout_constraintEnd_toEndOf=""         我的结束和谁的结束对齐
app:layout_constraintTop_toBottomOf=""      我的顶部和谁的底部对齐
app:layout_constraintStart_toEndOf=""       我的开始和谁的结束对齐
app:layout_constraintBottom_toTopOf=""      我的底部和谁的底部对齐
app:layout_constraintEnd_toStartOf=""       我的结束和谁的开始对齐
1
2
3
4
5
6
7
8
9
10

1.2 基线对齐：

app:layout_constraintBaseline_toBaselineOf="@id/tv1"
1

1.3 角度约束:

app:layout_constraintCircle=""         		目标控件id
app:layout_constraintCircleAngle=""    		对于目标的角度(0-360)
app:layout_constraintCircleRadius=""   		到目标中心的距离
1
2
3

1.4 百分比偏移：

app:layout_constraintHorizontal_bias=""     水平偏移 取值范围是0-1的小数
app:layout_constraintVertical_bias=""       垂直偏移 取值范围是0-1的小数
1
2

---

二、控件内外边距

2.1 内边距

android:padding="0dp"
android:paddingStart="0dp"
android:paddingEnd="0dp"
android:paddingTop="0dp"
android:paddingBottom="0dp" 
android:paddingLeft="0dp"
android:paddingRight="0dp"
1
2
3
4
5
6
7

2.2 外边距

android:layout_margin="0dp"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
1
2
3
4
5
6
7

---

三、控制尺寸

3.1尺寸限制：

android:minWidth=""   设置view的最小宽度
android:minHeight=""  设置view的最小高度
android:maxWidth=""   设置view的最大宽度
android:maxHeight=""  设置view的最大高度
1
2
3
4

3.2（MATCH_CONSTRAINT）0dp:

app:layout_constraintWidth_default="spread|percent|wrap"
app:layout_constraintHeight_default="spread|percent|wrap"

spread：（默认）占用所有符合约束的空间
percent：按照父布局的百分比设置
wrap：匹配内容大小但不超过约束限制
1
2
3
4
5
6

---

四、Chains（链）

1、 spread（默认）：均分剩余空间
2、 spread——inside：两侧的控件贴近两边，剩余的控件均分剩余空间
3、 packed：所有控件贴近剧中
1
2
3

---

五、Guideline（参考线）

android:orientation="horizontal|vertical"  辅助线的对齐方式
app:layout_constraintGuide_percent="0-1"   距离父级宽度或高度的百分比(小数形式)
app:layout_constraintGuide_begin=""        距离父级起始位置的距离(左侧或顶部)
app:layout_constraintGuide_end=""          距离父级结束位置的距离(右侧或底部)
1
2
3
4

代码示例：

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/Guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.5"/>
1
2
3
4
5
6

---

六、Barrier（屏障）

1、用于控制Barrier相对于给定的View的位置
app:barrierDirection="top|bottom|left|right|start|end"   
2、取值是要依赖控件的id，Barrier将会使用ids中最大的一个的宽/高作为自己的位置
app:constraint_referenced_ids="id,id"
1
2
3
4

代码示例：

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end"
    app:constraint_referenced_ids="textView2,textView1"/>
1
2
3
4
5
6

---

七、Group（组）

代码示例：

<androidx.constraintlayout.widget.Group
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:visibility="visible"
	app:constraint_referenced_ids="A,B,C"/>
1
2
3
4
5

---

八、Placeholder(占位符)

代码示例：

<androidx.constraintlayout.widget.Placeholder
	android:layout_width="100dp"
	android:layout_height="60dp"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintTop_toTopOf="parent"/>
1
2
3
4
5

---

九、Flow(流式虚拟布局)

代码示例：

<androidx.constraintlayout.helper.widget.Flow
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	app:constraint_referenced_ids="A,B,C,D,E"
	app:layout_constraintTop_toTopOf="parent"/>
1
2
3
4
5

9.1 链约束

1、none（默认值）：所有引用的view形成一条链，水平居中，超出屏幕两侧的view不可见。
2、chain：所有引用的view形成一条链，超出部分会自动换行，同行的view会平分宽度。
3、aligned:所引用的view形成一条链，但view会在同行同列。
1
2
3

9.2 对齐约束

#使用flow_verticalAlign时，要求orientation的方向是horizontal，
而使用flow_horizontalAlign时，要求orientation的方向是vertical

<!--  top:顶对齐、bottom:底对齐、center:中心对齐、baseline:基线对齐  -->
app:flow_verticalAlign="top｜bottom｜center｜baseline"
 
<!--  start:开始对齐、end:结尾对齐、center:中心对齐  -->
app:flow_horizontalAlign="start|end|center"
1
2
3
4
5
6
7
8

代码示例：

<androidx.constraintlayout.helper.widget.Flow
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    app:constraint_referenced_ids="A,B,C,D,E,F,G,H,I,J"
    app:flow_verticalAlign="top"
    app:flow_wrapMode="chain"
    app:layout_constraintTop_toTopOf="parent"/>
1
2
3
4
5
6
7
8

9.3 数量约束

app:flow_maxElementsWrap=4
1

---

十、Layer(层布局)

#代码的先后顺序也会决定着它的位置，如果代码在所有引用view的最后面，那么它就会在所有view的最上面，
反之则是最下面，最上面的时候添加背景，会把引用的view覆盖
1
2

代码示例：

<androidx.constraintlayout.helper.widget.Layer
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/common_rect_white_100_10"
    android:padding="10dp"
    app:constraint_referenced_ids="AndroidImg,NameTv" />
1
2
3
4
5
6

十一、ImageFliterButton & ImageFilterView

11.1 圆角图片

#roundPercent和round： roundPercent接受的值类型是0-1的小数，根据数值的大小会使图片在方形和圆形之间
按比例过度，round=可以设置具体圆角的大小。
 
1
2
3

代码示例：

<androidx.constraintlayout.utils.widget.ImageFilterView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/mi"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:roundPercent="0.7"/> 
1
2
3
4
5
6
7
8
9

11.2 图片过滤

1、使用altSrc来设置第二个图片资源，altSrc提供的资源将会和src提供的资源通过crossfade属性形成交叉
   淡化效果,默认情况下，crossfade=0，altSrc所引用的资源不可见，取值在0-1。

2、除此之外，warmth属性可以用来调节色温，
   brightness属性用来调节亮度，
   saturation属性用来调节饱和度，
   contrast属性用来调节对比度.
1
2
3
4
5
6
7

十二、MockView

代码示例：

#使用MockView来充当原型图
<androidx.constraintlayout.utils.widget.MockView
    android:id="@+id/Age"
    android:layout_width="100dp"
    android:layout_height="30dp"
    app:layout_constraintBottom_toBottomOf="@id/Avatar"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/Avatar"/>
1
2
3
4
5
6
7
8

---

总结

欢迎指正！后续会不断完善补充！