一、介绍
约束布局ConstraintLayout 是一个ViewGroup,可以在Api9以上的Android系统使用它,它的出现主要是为了解决布局嵌套过多的问题,以灵活的方式定位和调整小部件。从 Android Studio 2.3 起,官方的模板默认使用 ConstraintLayout
二、常用属性
2.1 相对布局
-
演示:按钮 B 放置在按钮 A 的右侧
引用id的另一个小部件,或者parent(将引用父容器)
<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toRightOf="@+id/buttonA" />
-
水平轴:左、右、起点和终点
-
纵轴:顶边、底边和文本基线
属性 | 说明 |
---|---|
layout_constraintLeft_toLeftOf | 自身的左边位于相对Id的左边 |
layout_constraintLeft_toRightOf | 自己的右边位于相对id的右边 |
layout_constraintRight_toLeftOf | |
layout_constraintRight_toRightOf | |
layout_constraintTop_toTopOf | |
layout_constraintTop_toBottomOf | |
layout_constraintBottom_toTopOf | |
layout_constraintBottom_toBottomOf | |
layout_constraintBaseline_toBaselineOf | 基线对齐 |
layout_constraintStart_toEndOf | |
layout_constraintStart_toStartOf | |
layout_constraintEnd_toStartOf | |
layout_constraintEnd_toEndOf |
2.2 边距
如果设置了侧边距,它们将应用于相应的约束(如果存在),将边距强制为目标侧和源侧之间的空间。通常的布局边距属性可用于此效果
属性 | 说明 |
---|---|
android:layout_marginStart | 距离开始 |
android:layout_marginEnd | 距离结束 |
android:layout_marginLeft | 距离左边 |
android:layout_marginTop | 距离上边 |
android:layout_marginRight | 距离右边 |
android:layout_marginBottom | 距离下边 |
android:layout_marginBaseline | 距离基线 |
- goneMargin主要用于约束的控件可见性被设置为gone的时候使用的margin值
属性 说明 layout_goneMarginStart layout_goneMarginEnd layout_goneMarginLeft layout_goneMarginTop layout_goneMarginRight layout_goneMarginBottom
2.3 居中定位和偏差
居中
约束就像相反的力一样将小部件平均拉开;这样小部件最终将在父容器中居中。这同样适用于垂直约束
<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/button" ...
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>
</>
Bias
- layout_constraintHorizontal_bias : 水平方向偏移
- layout_constraintVertical_bias : 垂直方向偏移
下面将使左侧有 30% 的偏差而不是默认的 50%,这样左侧会更短,小部件更向左侧倾斜
<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/button" ...
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>
</>
圆形定位
属性 | 说明 |
---|---|
layout_constraintCircle | 引用另一个小部件 ID |
layout_constraintCircleRadius | 到另一个小部件中心的距离 |
layout_constraintCircleAngle | 小部件应该处于哪个角度(以度为单位,从 0 到 360) |
<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
app:layout_constraintCircle="@+id/buttonA"
app:layout_constraintCircleRadius="100dp"
app:layout_constraintCircleAngle="45" />
2.4 尺寸约束
2.4.1 使用wrap_content,让控件自己计算大小
当控件的高度或宽度为wrap_content时,可以使用下列属性来控制最大、最小的高度或宽
属性 | 说明 |
---|---|
android:minWidth | 设置布局的最小宽度 |
android:minHeight | 设置布局的最小高度 |
android:maxWidth | 设置布局的最大宽度 |
android:maxHeight | 设置布局的最大高度 |
2.4.2 使用 0dp (MATCH_CONSTRAINT)
官方不推荐在ConstraintLayout中使用match_parent,可以设置 0dp (MATCH_CONSTRAINT) 配合约束代替match_parent,
<TextView
android:id="@+id/TextView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:visibility="visible" />
宽度设为0dp,左右两边约束parent的左右两边,并设置左边边距为50dp
2.4.3 宽高比
当宽或高至少有一个尺寸被设置为0dp时,可以通过属性layout_constraintDimensionRatio设置宽高比
app:layout_constraintDimensionRatio="H,2:3"指的是 高:宽=2:3
app:layout_constraintDimensionRatio="W,2:3"指的是 宽:高=2:3
<Button android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
2.4.4
layout_constraintHeight_percent
:高度百分比,占父类高度的百分比layout_constraintWidth_percent
:宽度百分比,占父类宽度的百分比
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorAccent"
android:text="constraintHeight"
app:layout_constraintHeight_percent="0.2"
app:layout_constraintWidth_percent="0.2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
2.5 链
如果两个或以上控件通过下图的方式约束在一起,就可以认为是他们是一条链
<TextView
android:id="@+id/TextView1"
style="@style/ConSampleText"
android:text="1111"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/TextView2"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/TextView2"
style="@style/ConSampleText"
android:text="2222"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView1"
app:layout_constraintRight_toLeftOf="@+id/TextView3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/TextView3"
style="@style/ConSampleText"
android:text="3333"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintTop_toTopOf="parent" />
3个TextView相互约束,两端两个TextView分别与parent约束,成为一条链,
属性 | 说明 |
---|---|
CHAIN_SPREAD | 展开元素 (默认); |
CHAIN_SPREAD_INSIDE | 展开元素,但链的两端贴近parent; |
CHAIN_PACKED | 链的元素将被打包在一起。 |
2.6 权重链
可以留意到上面所用到的3个TextView宽度都为wrap_content,如果我们把宽度都设为0dp,这个时候可以在每个TextView中设置横向权layout_constraintHorizontal_weight(constraintVertical为纵向)来创建一个权重链
<TextView
android:id="@+id/TextView4"
android:background="@color/design_default_color_primary"
android:text="444"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/TextView2"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintTop_toBottomOf ="@id/TextView1"/>
<TextView
android:id="@+id/TextView5"
android:background="@color/colorAccent"
android:text="5555"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView1"
app:layout_constraintRight_toLeftOf="@+id/TextView3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="3"
app:layout_constraintTop_toBottomOf="@id/TextView1"/>
<TextView
android:id="@+id/TextView6"
android:background="@color/blue"
android:text="6666"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="4"
app:layout_constraintTop_toBottomOf="@id/TextView1"/>
三、.辅助工具
3.1Guideline(指导线)
像辅助线一样,在预览的时候帮助你完成布局
属性 | 说明 |
---|---|
android:orientation | 垂直vertical,水平horizontal |
layout_constraintGuide_begin | 开始位置 |
layout_constraintGuide_end | 结束位置 |
layout_constraintGuide_percent | 距离顶部的百分比(orientation = horizontal时则为距离左边) |
<android.support.constraint.Guideline
android:id="@+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="50dp" />
<android.support.constraint.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
3.2 Barrier
假设有3个控件ABC,C在AB的右边,但是AB的宽是不固定的,这个时候C无论约束在A的右边或者B的右边都不对。当出现这种情况可以用Barrier来解决。Barrier可以在多个控件的一侧建立一个屏障,
<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/TextView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@+id/TextView1" />
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="right"
app:constraint_referenced_ids="TextView1,TextView2" />
<TextView
android:id="@+id/TextView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/barrier" />
app:barrierDirection
为屏障所在的位置,可设置的值有:bottom、end、left、right、start、topapp:constraint_referenced_ids
为屏障引用的控件,可设置多个(用“,”隔开)
3.3 Group
Group可以把多个控件归为一组,方便隐藏或显示一组控件,
<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/TextView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView1" />
<TextView
android:id="@+id/TextView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@id/TextView2" />
现在有3个并排的TextView,用Group把TextView1和TextView3归为一组,再设置这组控件的可见性,
<android.support.constraint.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
app:constraint_referenced_ids="TextView1,TextView3" />
3.4 Placeholder
Placeholder指的是占位符。在Placeholder中可使用setContent()设置另一个控件的id,使这个控件移动到占位符的位置
<android.support.constraint.Placeholder
android:id="@+id/placeholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:content="@+id/textview"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#cccccc"
android:padding="16dp"
android:text="TextView"
android:textColor="#000000"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
新建一个Placeholder约束在屏幕的左上角,新建一个TextView约束在屏幕的右上角,在Placeholder中设置 app:content="@+id/textview",这时TextView会跑到屏幕的左上角