ConstraintLayout：1.1.3的使用

ConstraintLayout最新的版本是1.1.3，这是一个很优秀的布局，几乎可以实现用一级布局，就能实现复杂的页面。
接下来我们深入浅出的来学习一下这个牛逼轰轰的控件吧。

常用布局

这边的布局有点类似RelativeLayout，但ConstraintLayout本身就比RelativeLayout强大。

//两个控件的左边对齐
layout_constraintLeft_toLeftOf
//当前控件的左边与目标控件的右边对齐，即当前控件在目标控件的右边
layout_constraintLeft_toRightOf
//当前控件的右边与目标控件的左边对齐，即当前控件在目标控件的左边
layout_constraintRight_toLeftOf
//两个控件的右边对齐
layout_constraintRight_toRightOf
//两个控件的上面对齐
layout_constraintTop_toTopOf
//当前控件的顶部与目标控件的底部对齐，即当前控件在目标控件的下面
layout_constraintTop_toBottomOf
//当前控件的底部与目标控件的顶部对齐，即当前控件在目标控件的上面
layout_constraintBottom_toTopOf
//两个控件的下面对齐
layout_constraintBottom_toBottomOf
//baseline对齐，常用于和EditText 对齐
layout_constraintBaseline_toBaselineOf

一个简单的例子

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/constraintLayout"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:padding="10dp">
    <TextView
        android:id="@+id/tv_common_layout_label"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="常用布局"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    <Button
        android:id="@+id/btn_e"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:layout_width="wrap_content"
        android:text="E"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_common_layout_label"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="A"
        app:layout_constraintBottom_toTopOf="@id/btn_e"
        app:layout_constraintRight_toLeftOf="@id/btn_e"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="B"
        app:layout_constraintBottom_toTopOf="@id/btn_e"
        app:layout_constraintLeft_toRightOf="@id/btn_e"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="C"
        app:layout_constraintRight_toLeftOf="@id/btn_e"
        app:layout_constraintTop_toBottomOf="@id/btn_e"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="D"
        app:layout_constraintLeft_toRightOf="@id/btn_e"
        app:layout_constraintTop_toBottomOf="@id/btn_e"/>
</android.support.constraint.ConstraintLayout>

常用布局

Chain（链）

顾名思义，就是把几个控件链在一起，以达到可以控制布局的效果，这个效果也是很常用的。
常用属性：

layout_constraintHorizontal_chainStyle
layout_constraintVertical_chainStyle

上述两个属性只能在链的第一个控件上使用，在之后的控件使用无效。
这两个属性的值有三个：spread_inside，spread，packed
看一下官方提供的说明图：

chain.png

Packed Chain with Bias是packed属性加layout_constraintHorizontal_bias属性
Weighted Chain的用法与之前LinearLayout中的weight比较类似，就不细说了。
举个栗子：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/constraintLayout"
    android:layout_height="match_parent"
    android:layout_width="match_parent">
    <TextView
        android:id="@+id/tv_chain_style_label"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Chain"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    <RadioGroup
        android:id="@+id/rg_chain_group"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_chain_style_label">
        <RadioButton
            android:checked="true"
            android:id="@+id/rb_spread_inside"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="spread_inside"/>
        <RadioButton
            android:id="@+id/rb_spread"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="spread"/>
        <RadioButton
            android:id="@+id/rb_pack"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="pack"/>
    </RadioGroup>
    <Button
        android:id="@+id/btn_fgh_toggle"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="FGH批量隐藏"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/rg_chain_group"/>
    <android.support.constraint.Group
        android:id="@+id/group_btns"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:constraint_referenced_ids="btn_f,btn_g,btn_h"/>
    <Button
        android:id="@+id/btn_f"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="F"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_g"
        app:layout_constraintTop_toBottomOf="@id/btn_fgh_toggle"/>
    <Button
        android:id="@+id/btn_g"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="G"
        app:layout_constraintLeft_toRightOf="@id/btn_f"
        app:layout_constraintRight_toLeftOf="@+id/btn_h"
        app:layout_constraintTop_toTopOf="@id/btn_f"/>
    <Button
        android:id="@+id/btn_h"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="H"
        app:layout_constraintLeft_toRightOf="@id/btn_g"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/btn_g"/>
</android.support.constraint.ConstraintLayout>

class ChainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.act_chain_style)
        rg_chain_group.setOnCheckedChangeListener { _, checkedId ->
            constraintLayout.getViewWidget(btn_f).horizontalChainStyle = when (checkedId) {
                R.id.rb_spread_inside -> ConstraintLayout.LayoutParams.CHAIN_SPREAD_INSIDE
                R.id.rb_spread -> ConstraintLayout.LayoutParams.CHAIN_SPREAD
                R.id.rb_pack -> ConstraintLayout.LayoutParams.CHAIN_PACKED
                else -> ConstraintLayout.LayoutParams.CHAIN_PACKED
            }
            constraintLayout.requestLayout()
        }
        btn_fgh_toggle.setOnClickListener {
            if (group_btns.visibility == View.VISIBLE) {
                group_btns.visibility = View.GONE
                btn_fgh_toggle.text = "fgh批量显示"
            } else {
                group_btns.visibility = View.VISIBLE
                btn_fgh_toggle.text = "fgh批量隐藏"
            }
        }
    }
}

这里还穿插了一个Group的用法

Group

顾名思义就是把几个View分成一组，可以统一对其显隐藏进行控制，好处就是终于不用再写一堆的布局显隐藏，也不会容易出错啦。
因为比较简单，所以也不细说了。

Barrier，屏障，障碍

这是一个控件，可以使用constraint_referenced_ids来引用多个控件，从而可以得到这组控件的最左边/最顶部/最右边/最底部了。
终于我们做某些要填写信息的布局时，可以不用TableLayout，也可以不用去计算哪个标签长度最长，估算出一个不太靠谱的长度。
常用的属性：

//指定方向，不可以设置多个方向，如果需要多个方向，则需要设置多个Barrier
barrierDirection
//关联id
constraint_referenced_ids

举个栗子：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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_height="match_parent"
    android:layout_width="match_parent"
    android:padding="10dp"
    tools:context=".MainActivity">
    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="tv_age_label,tv_name_label"/>
    <TextView
        android:id="@+id/tv_name_label"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:padding="10dp"
        android:text="姓名："
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    <EditText
        android:hint="请输入姓名"
        android:id="@+id/edt_name"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        app:layout_constrainedWidth="true"
        app:layout_constraintBaseline_toBaselineOf="@id/tv_name_label"
        app:layout_constraintLeft_toRightOf="@+id/barrier"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/tv_name_label"/>
    <TextView
        android:id="@+id/tv_age_label"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:padding="10dp"
        android:text="出生时间："
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/edt_name"/>
    <EditText
        android:hint="请输入出生日期"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        app:layout_constraintBaseline_toBaselineOf="@id/tv_age_label"
        app:layout_constraintLeft_toRightOf="@+id/barrier"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/tv_age_label"/>
</android.support.constraint.ConstraintLayout>

Barrier.png

圆形定位

这个就有点吊了，控件A可以在控件B周围的任何位置。
常用的场景一般就是设置小红点了，未读数之类的。
使用属性有三个

//圆形定位的目标控件，在这个属性设置目标的id
layout_constraintCircle
//圆形定位的角度
layout_constraintCircleAngle
//圆形定位的半径
layout_constraintCircleRadius

来看一张官网的图：

image.png

需要注意的是，0°的位置是在目标控件的顶部。

来看一个时钟表盘的布局吧

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent" android:layout_width="match_parent">
    <TextView
        android:id="@+id/tv_circle_label"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:text="Circle定位"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
    <TextView
        android:id="@+id/btn_0"
        android:layout_height="wrap_content"
        android:layout_marginTop="120dp"
        android:layout_width="wrap_content"
        android:text="0"
        android:textColor="@android:color/black"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_circle_label"/>
    <TextView
        android:id="@+id/btn_1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="1"
        android:textColor="@android:color/black"
        app:layout_constraintCircle="@id/btn_0"
        app:layout_constraintCircleAngle="30"
        app:layout_constraintCircleRadius="80dp"/>
    <TextView
        android:id="@+id/btn_2"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="2"
        android:textColor="@android:color/black"
        app:layout_constraintCircle="@id/btn_0"
        app:layout_constraintCircleAngle="60"
        app:layout_constraintCircleRadius="80dp"/>
    <TextView
        android:id="@+id/btn_3"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="3"
        android:textColor="@android:color/black"
        app:layout_constraintCircle="@id/btn_0"
        app:layout_constraintCircleAngle="90"
        app:layout_constraintCircleRadius="80dp"/>
        ...
</android.support.constraint.ConstraintLayout>

圆形定位

强制约束

这个属性是用于当约束布局中的一个控件，由于其内容很长，导致该控件的宽度或者高度超出了范围，导致布局上的错乱，针对这个问题，ConstraintLayout很友善的提供了layout_constrainedWidth这个属性，当设置为true时，会强制控件的宽高会在一个范围内，false则不强制。
我们来看个栗子：

layout_constrainedWidth为false
layout_constrainedWidth为true

代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent" android:layout_width="match_parent">
    <CheckBox
        android:checked="true"
        android:id="@+id/cb_force_constraint"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:text="enforcing constraints"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
    <Button
        android:id="@+id/btn_add_text"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="add"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_reduce_text"
        app:layout_constraintTop_toBottomOf="@id/cb_force_constraint"/>
    <Button
        android:id="@+id/btn_reduce_text"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="reduce"
        app:layout_constraintBaseline_toBaselineOf="@id/btn_add_text"
        app:layout_constraintLeft_toRightOf="@id/btn_add_text"
        app:layout_constraintRight_toRightOf="parent"/>
    <Button
        android:id="@+id/btn_m"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="M"
        app:layout_constraintTop_toBottomOf="@id/btn_add_text"/>
    <Button
        android:id="@+id/btn_content"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_constrainedWidth="true"
        android:text="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
        app:layout_constraintLeft_toRightOf="@id/btn_m"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn_m"/>
</android.support.constraint.ConstraintLayout>

Percent和Ratio

百分比布局也是UI设计师非常喜欢使用的，android支持包中原先有提供了一系列的百分比控件

image.png

宽高比布局android中就没有了，一般都是我们先固定宽或者高，再计算出另一个边
但是有了ContraintLayout，就可以通通不要了，原因很简单，俺们的ContraintLayout超棒的~
我们可以直接通过以下这个属性来直接进行百分比控制：

layout_constraintDimensionRatio

这个属性要怎么玩呢，其实也不复杂：
假如是固定宽度，要控制高度，可以用"H,16:9"。
假如是固定高度，要控制宽度，可以用"W,16:9"
冒号左边的是代表宽度，冒号右边的是代表高度。
依旧来举个栗子：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/constraintLayout"
    android:layout_height="match_parent" android:layout_width="match_parent">
    <TextView
        android:id="@+id/tv_title"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="百分比布局"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    <Button
        android:id="@+id/btn_ratio_1"
        android:layout_height="0dp"
        android:layout_width="0dp"
        android:text="Ratio_1"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_title"
        app:layout_constraintWidth_percent="0.6"/>
    <Button
        android:id="@+id/btn_ratio_2"
        android:layout_height="100dp"
        android:layout_width="0dp"
        android:text="Ratio_2"
        app:layout_constraintDimensionRatio="W,16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn_ratio_1"/>
</android.support.constraint.ConstraintLayout>

image.png