- 宽高比
当ConstraintLayout布局中某个控件的宽或高中的一个被严格约束（所谓严格约束即指大小可被推断）则另一个可通过layout_constraintDimensionRatio属性来设置大小为与另一边有指定的比率。属性的值即为宽与高的比例值，可以是一个浮点数，也可以是x:y的形式。可以通过在比例值前面添加'w'或者‘h’并用逗号隔开，来分别指定是宽还是高是按照另一边的比例求出的。代码如下：
<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"/>
以上代码实现了按钮的高度与宽度的比为16:9,宽度与父控件同宽
- 按百分比定义控件的宽或高
按照百分比定义控件的宽高步骤如下：- 将布局中某个控件的宽或者高设置为0或者MATCH_CONSTRAINT (0dp)
- 设置app:layout_constraintWidth_default="percent"
- 设置layout_constraintWidth_percent 或layout_constraintHeight_percent属性的值为（0，1]之间的某个小数
-
链
ConstraintLayout本身就是基于依赖的布局，当几个控件之间在水平方向或垂直方向相互依赖时，就形成了链。如下图所示：
包含3个元素的链
实现上图所示布局的代码如下：
<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/TextView2" />
<TextView
android:id="@+id/TextView2"
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" />
<TextView
android:id="@+id/TextView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/TextView2"
链头及样式
链有链头，水平链的最左端元素或者垂直链的最上端元素成为链头。在链头中可以通过layout_constraintHorizontal_chainStyle属性定义链的样式（Style）。chains提供了3种样式，分别是：
- CHAIN_SPREAD —— 展开元素 (默认)；
- CHAIN_SPREAD_INSIDE —— 展开元素，但链的两端贴近parent；
- CHAIN_PACKED —— 链的元素将被打包在一起。
权重链
可以通过将链中某个元素的宽（水平链）或高（垂直链）设置为0或者MATCH_CONSTRAINT，然后通过layout_constraintHorizontal_weight属性给控件设置权重，权重越大所占的空间越大。代码如下：
<TextView
android:id="@+id/TextView1"
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" />
<TextView
android:id="@+id/TextView2"
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" />
<TextView
android:id="@+id/TextView3"
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" />
不同样式的链及权重链的示意图如下：
不同样式的链
- 屏障(Barrier)
假如有这样一个需求，有A，B，C 3个控件，A,B的宽度不固定，现在要求无论A,B的宽度如何变化控件C始终在A和B的右侧。那么就可以通过Barrier轻松实现。只要通过Barrier将A,B与C控件分割开，让A，B在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" />
实现的 效果如下图所示
- 分组(Group)
可以将几个控件归为一组，这样做的一个好处是可以很方便的控制这些控件的可见性。同一控件可以属于多个分组，它的可见性由最后一个分组决定。代码如下：
<androidx.constraintlayout.widget.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="button4,button9" />
- 辅助线(Guideline）
Guileline在布局中并不可见，但是它可以为布置其他控件提供约束，作为其他控件的位置参考。Guideline有水平和垂直之分，通过android:orientation属性设置。水平Guideline高度为0，宽度为它的父控件宽度，垂直Guideline宽度为0，高度为它的父控件高度。可以通过3个属性来确定Guideline在布局中的位置- layout_constraintGuide_begin 指定Guideline距父控件左或上的距离
- layout_constraintGuide_end 指定Guideline距父控件右或下的距离
- layout_constraintGuide_percent 指定Guideline距父控件左或上的百分比
以下代码将一个Button控件约束到一个垂直Guideline
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline"
app:layout_constraintGuide_begin="100dp"
android:orientation="vertical"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button"
app:layout_constraintLeft_toLeftOf="@+id/guideline"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
以上便是ConstraintLayout比较常见且较为有用的特性。合理使用这些特性将会起到事半功倍的效果。
