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

一个简单的例子

常用布局

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比较类似，就不细说了。
举个栗子：

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

举个栗子：

Barrier.png

圆形定位

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

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

来看一张官网的图：

image.png

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

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

    
    
    
    
    
        ...

圆形定位

强制约束

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

layout_constrainedWidth为false

layout_constrainedWidth为true

代码：

Percent和Ratio

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

image.png

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

layout_constraintDimensionRatio

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

image.png