ConstraintLayout 的使用

一. 简介

ConstraintLayout 是Android Studio 2.2 发布时出现的新布局，ConstraintLayout非常适合使用可视化的方式来编写界面，即通过拖拽方式来完成布局。ConstraintLayout还有一个优点，它可以有效地解决布局嵌套过多的问题。我们平时编写界面，复杂的布局总会伴随着多层的嵌套，而嵌套越多，程序的性能也就越差。ConstraintLayout则是使用约束的方式来指定各个控件的位置和关系的，它有点类似于RelativeLayout，但远比RelativeLayout 要更强大。

二. 属性介绍

# 与其他控件或布局之间的约束关系，值可以取 parent 或 其他控件的id
app:layout_constraintLeft_toLeftOf 
app:layout_constraintLeft_toRightOf
app:layout_constraintRight_toLeftOf
app:layout_constraintRight_toRightOf
app:layout_constraintTop_toTopOf
app:layout_constraintTop_toBottomOf
app:layout_constraintBottom_toTopOf
app:layout_constraintBottom_toBottomOf

# baseline对齐
app:layout_constraintBaseline_toBaselineOf

# 与left,right类似
app:layout_constraintStart_toEndOf 
app:layout_constraintStart_toStartOf
app:layout_constraintEnd_toStartOf
app:layout_constraintEnd_toEndOf

# margin 边距
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

# 当位置约束target控件View.GONE时，可用以下margin属性指示不同的边距值：
app:layout_goneMarginStart
app:layout_goneMarginEnd
app:layout_goneMarginLeft
app:layout_goneMarginTop
app:layout_goneMarginRight
app:layout_goneMarginBottom

# View 的宽高比
app:layout_constraintDimensionRatio

# 可以设置水平或竖直方向的约束的一个比例
app:layout_constraintHorizontal_bias  
app:layout_constraintVertical_bias  

# 链式依赖的样式
app:layout_constraintHorizontal_chainStyle
app:layout_constraintVertical_chainStyle

# 类似LinearLayout 中的设置权重
app:layout_constraintVertical_weight
app:layout_constraintHorizontal_weight

# 当控件的高或宽设置为match_constraint（0dp）时，对控件宽高行为的控制
layout_constraintWidth_default
layout_constraintHeight_default

# 只有当宽高设置为0dp 时，才可用，用来设置控件宽高的最大、最小值
layout_constraintWidth_min = [dimension]
layout_constraintWidth_max
layout_constraintHeight_min
layout_constraintHeight_max

# 参考线
Guideline 

举例说明：
app:layout_constraintLeft_toLeftOf="parent" 指的是让该控件的左侧与父布局对齐；

app:layout_constraintLeft_toLeftOf="@id/viewB" 控件A与控件B左侧对齐时；

app:layout_constraintDimensionRatio="H,16:6" 设置控件宽高比为16：6 ；

以下是左右约束比例的示例：

<android.support.constraint.ConstraintLayout ...>

    <Button 
        android:id="@+id/button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
</>

image.png

默认情况下，这种对立的约束会促使控件处于居中位置。此时，可以使用Bias属性来调整位置，以达到两侧边距不同的效果。

<!-- 设置左侧边距为30％代替默认的50％ -->
app:layout_constraintHorizontal_bias="0.3"

image.png

与RelativeLayout 不同之处：

在当控件有自己设置的宽度，例如warp_content、固定值时，我们为控件添加的都是约束“Constraint”，这个约束有点像橡皮筋一样会拉这个控件，但是并不会改变控件的尺寸，但是RelativeLayout 很明显不是这样，可能会改变View的大小。

ConstraintLayout 中不支持match_parent，若想实现类似功能，可以将宽高设置为0，代表MATCH_CONSTRAINT 这个常量。

与weight 类似的实例：

<TextView
    android:id="@+id/tab1"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#f67"
    android:gravity="center"
    android:text="Tab1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/tab2" />

<TextView
    android:id="@+id/tab2"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#A67"
    android:gravity="center"
    android:text="Tab2"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/tab1"
    app:layout_constraintRight_toLeftOf="@+id/tab3" />

<TextView
    android:id="@+id/tab3"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#767"
    android:gravity="center"
    android:text="Tab3"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/tab2"
    app:layout_constraintRight_toRightOf="parent" />

横向的依赖，3个TextView 两两设置了约束，最外层的设置了parent约束；再把宽度都设置为了match_constraint，这样就完成了3个TextView 等分。

如果第一个View 设置 app:layout_constraintHorizontal_weight = "2" 则最终三个View 的宽度比例为 2：1：1

如图：

image.png
layout_constraintWidth(Height)_default 使用：

当控件的款或高设置为0dp 时，我们可以通过设置这个属性的值来对控件的宽高增长时的表现进行控制，这个属性可以取两个值：

• spread：默认值，和以前的行为一样
• wrap：好像使用了wrap_content 一样，控件会随着内容而改变大小，但是会被约束的其他控件限制，即当控件增长到接触它周围的约束控件时会停止增长。

两者的区别如图：

image.png

可见性操作：
ConstraintLayout有特定的方式处理被设置为View.GONE的控件。通常，设置GONE的控件不会被显示，也不是布局本身的一部分（虽然标记为GONE，但实际尺寸不会改变）。但是，就布局计算而言，GONE的控件仍是布局的一部分，区别在于：

• 对于layout pass，尺寸将被看做是0（基本上被处理成了一个点）；

• 如果对其他控件有约束，则仍然会被注重，但是所有边距值都将看似为0。

  
  image.png

这种特定的行为允许在可以设置控件暂时为GONE的地方构建布局，并且不影响布局，这对制作简单的布局动画也很有用。

但是有一种情况，如，A到父容器一边的边距100dp，B到A边距16dp，此时设置A为GONE，那么B到父容器边距只有16dp，为了让A GONE 之后，B 距父容器边距不变，就需要用到之前提到的属性layout_goneMarginXXX ，来设置边距。

链 Chains：

如果一组控件双向设置了两两依赖，就形成了一个链，在这个链的最左侧（纵向为最上）的元素成为链头，可以在其身上设置一些属性，来决定这个链的展示效果，这个属性就是：

app:layout_constraintHorizontal_chainStyle

这个属性可以取三个值，即 spread、spread_inside、packed。现在分别看一下，

• spread + 宽度为0，且可以通过weight控制分配比例，就是上面的例子；
• spread + 宽度非0 ： image.png
• spread_inside + 宽度非0： image.png
• packed + 宽度非0： image.png

参考线 GuideLine：

android.support.constraint.Guideline 该类比较简单，主要用于辅助布局，即类似为PS 画布中的参考线，横向的、纵向的。该布局是不会显示到界面上的。

所以其有个属性为：

android:orientation 取值为"vertical" 和 "horizontal".

除此以外，还差个属性，决定该辅助线的位置：

• layout_constraintGuide_begin
• layout_constraintGuide_end
• layout_constraintGuide_percent

可以通过上面3个属性其中之一来确定属性值位置。

begin=30dp，即可认为距离顶部30dp的地方有个辅助线，根据orientation来决定是横向还是纵向。
end=30dp，即为距离底部。
percent=0.8即为距离顶部80%。

例：

<android.support.constraint.ConstraintLayout 
    ...
    <!-- 距顶部80%的水平参考线-->
    <android.support.constraint.Guideline
        android:id="@+id/guideline_h"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.8" />

    <!-- 距左边80%的竖直参考线-->
    <android.support.constraint.Guideline
        android:id="@+id/guideline_w"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.8" />

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#612"
        app:layout_constraintLeft_toRightOf="@id/guideline_w"
        app:layout_constraintTop_toBottomOf="@id/guideline_h" />

</....>

上例中的TextView 位于两条参考线的交点处。

三. 性能方面

Android 绘制页面主要有三大流程，即measure、layout 和 draw，所以影响一个布局性能的也只有这三个方面，我们都知道布局嵌套的越深，则性能越差，因为要对整个View 树进行递归地测量、放置等，而ConstraintLayout 依靠其强大的View 之间的约束能力，可以最大程度的做到减少View 的层级深度，谷歌官方也对它的性能进行过测试（链接），结果表明ConstraintLayout 在测量/布局阶段的性能比 RelativeLayout大约高 40% 。所以在性能方面也是没有问题的，可以在实际中使用。

四. 开发

在实际开发时，可以根据实际情况灵活运用，如果布局非常简单能用LinearLayout 解决就没必要用ConstraintLayout 了，否则可以使用，开发时可以用拖拽的方式来实现，但也要熟悉XML 代码，一些拖拽不好实现的情况可以代码实现，至于各种属性，上面已经介绍了。