ConstraintLayout

官方文档介绍

A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way.

简要介绍

ConstraintLayout是一个AS2.2加入的新的约束布局，更可以说是进阶版的RelativeLayout，它包含了RelativeLayout一部分的属性，但有其他的更加强大的功能。而此时新增的可视化的编程界面使我们能够更加方便地使用ConstraintLayout。Google官方推荐对于其所有的操作都在可视化编程的Design模式下完成。

约束总共分为三种：子控件互相之间的约束、子控件和父控件的约束、子控件和Guideline之间的约束。

基本演示

首先，先创建一个新的项目。按照图示的方法打开至Design模式，并将一个ConstraintLayout拖动到可视化界面中。

观察界面中的蓝色框以及最右的"Properties"那一栏，以后对于ConstraintLayout的操作基本上都在这两个地方完成即可。

注：以下的演示都是先演示图形化编程界面再演示xml代码变动（包括新增的内容和变动的内容）

1）Relative Positioning

这个属性是用来实现有约束的组件之间的相对定位的。

有以下的属性

• 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

将鼠标放置于某一边的中点，它会变成绿色，可将其拖拽至目标组件的边上使当前组件受他的约束。再次点击改点可以取消该约束

给四个边都分别增加了约束之后的xml代码：

<android.support.constraint.ConstraintLayout
        android:layout_width="138dp"
        android:layout_height="495dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintVertical_bias="0.0"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent">

    </android.support.constraint.ConstraintLayout>

所以说，约束可以分为垂直方向上的和水平方向上的。

如果在某一个方向上，比如在水平方向上，左右两边都设置了约束，则组件为了同时满足两个约束会居中显示。

2）Margins

这个属性是用来设置有约束的组件之间的最小的间隙的。

有以下的属性：

• android:layout_marginStart
• android:layout_marginEnd
• android:layout_marginLeft
• android:layout_marginTop
• android:layout_marginRight
• android:layout_marginBottom

在之前演示代码中已经可以看到有margin。

试着按照如图修改:

图中的properties红框处就是专门用于设置margin值的。

<android.support.constraint.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="107dp"
        android:layout_height="300dp"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="116dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5">

    </android.support.constraint.ConstraintLayout>

3）Bias

这个属性，顾名思义便是偏移，也就是当前组件偏移了约束它的组件的距离，可用于将约束偏向一边。其支持浮点数，默认值是0.5即无偏移。

有以下的属性

• layout_constraintHorizontal_bias
• layout_constraintVertical_bias

在之前的例子中偏移值都为默认的0.5，也就是没有偏移，现在来修改修改，如图：

框住的两个地方分别用于修改横向和纵向的两个方向的偏移。

<android.support.constraint.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="107dp"
        android:layout_height="300dp"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="116dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.8"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.00999999">

    </android.support.constraint.ConstraintLayout>

4）尺寸约束

指定组件的大小可以有以下的三种方式：用具体数值指定、WRAP_CONTENT（自动根据内容计算出合适的大小）、0dp（即MATCH_CONSTRAINT，由约束该组件的组件来决定）

1）第一种方式

<android.support.constraint.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="116dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:2"
        app:layout_constraintHorizontal_bias="0.597"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.05">

2）第二种方式

为了方便演示，新建了一个button。

如图，计算机会根据内容“button"的大小自动计算出最优的高度

<Button
            android:id="@+id/button"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:text="Button"
            tools:layout_editor_absoluteX="89dp"
            tools:layout_editor_absoluteY="184dp" />

3）第三种方式

如图，将height改为0dp也就是match_parent之后，他会自动变换为父组件的高度的大小。

此时可以用之前提到的margin来进行调整

<Button
            android:id="@+id/button"
            android:layout_width="150dp"
            android:layout_height="match_parent"
            android:layout_marginBottom="50dp"
            android:layout_marginTop="50dp"
            android:text="Button"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.333"
            tools:layout_editor_absoluteX="75dp" />

4）

此外，控制组件的大小还可以使用引导线guideline，它可以用于屏幕的划分，将屏幕划分为几块，和它约束的组件只能出现在该guideline划分的区域内，最常用于等分屏幕。

添加步骤如下

如图，guideline将屏幕划分为两部分，两个按钮各自约束在自己的区域内，可根据该区域来约束其中的组件的大小。

<Button
            android:id="@+id/button"
            android:layout_width="150dp"
            android:layout_height="0dp"
            android:layout_marginBottom="50dp"
            android:layout_marginTop="50dp"
            android:text="Button"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0"
            android:layout_marginLeft="8dp"
            app:layout_constraintLeft_toLeftOf="@+id/guideline"
            android:layout_marginRight="8dp"
            app:layout_constraintRight_toRightOf="parent" />

        <android.support.constraint.Guideline
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/guideline"
            app:layout_constraintGuide_begin="117dp"
            android:orientation="vertical" />

后记

ConstraintLayout还有很多我还未能熟练的掌握的功能，待我以后多加练习之后在进行分享

参考官方文档：https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#DimensionConstraints