ConstraintLayout约束布局属性

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提供了三种样式，分别是：

1. CHAIN_SPREAD—展开元素（默认）
2. CHAIN_SPREAD_INSIDE—展开元素，但链的两端贴近parent
3. CHAIN_PACKED—链的元素将被打包在一起

如图所示：

辅助工具

1. 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为屏障引用的控件，可设置多个（用“，”隔开）

2. 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" />
   

   效果如下：

   

3. 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回跑到屏幕的左上角。效果如下：

   

4. Guideline

   GuideLine像辅助线一样，在预览的时候帮助你完成布局（不会显示在界面上）。Guideline的主要属性：

   1. android:orientation 垂直vertical，水平horizontal
   2. layout_constraintGuide_begin 开始位置
   3. layout_constraintGuide_end 结束位置
   4. 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（中点位置），效果如下：