ConstraintLayout 使用总结

首先来看下官方文档的介绍：

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

可以把 ConstraintLayout 理解为 RelativeLayout 的升级版
优势

ConstraintLayout 可以大大的减少布局嵌套，在测量/布局阶段的性能比 RelativeLayout 大约高 40%

参考文章：
解析 ConstraintLayout 的性能优势
准备工作
- AndroidStudio 的版本请升级到 2.2 及以上
- 在 app 下的 build.gradle 添加以下依赖
  
  compile 'com.android.support.constraint:constraint-layout:1.0.2'

01.png

可以看到，给 Button 的 上下左右 都添加了约束，并且是相对 parent 的约束。如果一个控件没有添加任何约束，运行之后自动位于屏幕的左上角

02.png

app:layout_constraintLeft_toLeftOf 约束 ButtonB 的左侧和 ButtonA
的左侧对齐，和 RelativeLayout 的 android:layout_alignLeft 效果一样

app:layout_constraintBottom_toTopOf 约束 ButtonB 的底部在 ButtonA 的顶部，和 RelativeLayout 的 android:layout_above 效果一样

相信你对 ConstraintLayout 的属性有一定的理解了，下面简单的将 ConstraintLayout 和 RelativeLayout 的常用属性做一个对比

RelativeLayout	ConstraintLayout
android:layout_toLeftOf	app:layout_constraintRight_toLeftOf
android:layout_toRightOf	app:layout_constraintLeft_toRightOf
android:layout_above	app:layout_constraintBottom_toTopOf
android:layout_below	app:layout_constraintTop_toBottomOf
android:layout_alignLeft	app:layout_constraintLeft_toLeftOf
android:layout_alignRight	app:layout_constraintRight_toRightOf
android:layout_alignTop	app:layout_constraintTop_toTopOf
android:layout_alignBottom	app:layout_constraintBottom_toBottomOf
android:layout_alignBaseline	app:layout_constraintBaseline_toBaselineOf

其实这些属性所显示的效果是一样的，那么我们为什么还要费力气学习这个布局了，下面介绍下这个布局自己独有的属性：

Bias

Bias 即偏压的意思，可以设置约束偏相某一侧的压力。属性如下:

app:layout_constraintVertical_bias
app:layout_constraintHorizontal_bias

取值范围为 0 ~ 1，尝试使用这个两个属性，在屏幕的右下方添加一个 FloatingActionButton
```
    
```

03.png

Guideline

Guideline 为辅助线，不会在界面上显示，用于辅助布局。其属性

android:orientation 取值为 vertical 或 horizontal
```
    

    
```

0.4.png

app:layout_constraintGuide_percent 的意思为占父容器宽度或高度的比例。除此之外，Guideline 还有以下两个属性：

app:layout_constraintGuide_begin 距离父容器左侧或顶部的距离
app:layout_constraintGuide_end 距离父容器右侧或底部的距离

Chain

Chain链可以通过两两交叉，平分屏幕剩余空间。实现 LinearLayout 的 android:layout_weight 等分效果
```
 
  

      

      

      

  
```

05.png

app:layout_constraintHorizontal_chainStyle 一共有三种模式

spread

spread_inside

packed

套用官方的一张图一看便知

chains-styles.png

给每个 View 添加 app:layout_constraintHorizontal_weight 属性，就可以实现 LinearLayout 的按比例展示，等价于上图的第三条展示效果。

ConstraintLayout 融合了 RelativeLayout 和 LinearLayout 的特性，有效的减少了布局的嵌套。以上就是笔者在日常工作中，对 ConstraintLayout的一些用法。第一次写博，不足之处，欢迎大家指证。