ConstraintLayout属性
相对定位
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
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
角度定位
layout_constraintCircle="" 中心
layout_constraintCircleAngle="" 角度
layout_constraintCircleRadius="" 距离
边距
ConstraintLayout的边距常用属性如下:
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
特殊的边距,goneMargin
goneMargin主要用于约束的控件可见性被设置为gone的时候使用的margin值,属性如下:
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
此属性只在控件的可见性为gone的时候才被应用
百分比偏移
layout_constraintHorizontal_bias 水平偏移
layout_constraintVertical_bias 垂直偏移
取值范围在0-1之间,越接近0则越偏左(偏上),越接近1则越偏右(偏下)
尺寸约束
使用wrap_content,让控件自己计算大小
当控件的高度或宽度为wrap_content时,可以使用下列属性来控制最大、最小的高度或宽度:
android:minWidth 最小的宽度
android:minHeight 最小的高度
android:maxWidth 最大的宽度
android:maxHeight 最大的高度
注意!当ConstraintLayout为1.1版本以下时,使用这些属性需要加上强制约束,如下所示:
app:constrainedWidth=”true”
app:constrainedHeight=”true”
宽高比
当宽和高至少有一个被设置为0时,可以通过layout_constraintDimensionRatio设置宽高比,举个例子
app:layout_constraintDimensionRatio="1:1"
则是将控件的宽高比设置为1:1,出来的是正方形。除此之外我们还可以在1:1前面加W或H来分别指定宽度和高度限制。例:
app:layout_constraintDimensionRatio="H,1:2"指的是 高:宽=1:2
app:layout_constraintDimensionRatio="W,1:2"指的是 宽:高=1:2
链
layout_constraintHorizontal_chainStyle 样式链
layout_constraintHorizontal_weight(constraintVertical为纵向) 权重链
chains提供了三种样式,分别是:
- CHAIN_SPREAD—展开元素(默认)
- CHAIN_SPREAD_INSIDE—展开元素,但链的两端贴近parent
- CHAIN_PACKED—链的元素将被打包在一起
如图所示:
辅助工具
-
Barrier
假设有三个控件ABC,C在AB的右边,但是AB的宽是不固定的,这个时候C无论约束在A的右边或者B的右边都不对。当出现这种情况可以使用Barrier来解决。Barrier可以在多个控件的一侧建立一个屏障,如下所示:
这个时候C只要约束在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、top
app:constraint_referenced_ids为屏障引用的控件,可设置多个(用“,”隔开)
-
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" />
现在有三个并排的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" />
效果如下:
-
Placeholder
Placeholder指的是占位符。在Placeholder中可使用setContent()设置另一个控件的id,使这个控件移动到占位符的我i之。举个例子:
<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回跑到屏幕的左上角。效果如下:
-
Guideline
GuideLine像辅助线一样,在预览的时候帮助你完成布局(不会显示在界面上)。Guideline的主要属性:
- android:orientation 垂直vertical,水平horizontal
- layout_constraintGuide_begin 开始位置
- layout_constraintGuide_end 结束位置
- layout_constraintGuide_parcent 距离顶部的百分比(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" />
guideline1为水平辅助线,开始位置是距离顶部50dp,guideline2为垂直辅助线,开始位置为屏幕宽的0.5(中点位置),效果如下: