Android控件之ConstraintLayout详解

目录：

一、为何要用ConstraintLayout？
二、ConstraintLayout有哪些缺点？
三、怎么使用ConstraintLayout。

一、为何要用ConstraintLayout？

• 任何复杂的布局只需一层（除非有嵌套的事件响应需求）：

绘制过程当中的每一个阶段都须要对视图树执行一次自顶向下的遍历操做。所以，视图层次结构中嵌入（或嵌套）的视图越多，设备绘制视图所需的时间和计算功耗也就越多。经过在 Android 应用布局中保持扁平的层次结构，您能够为应用建立响应快速而灵敏的界面。

• 性能更出色

ConstraintLayout 在测量/布局阶段的性能比 RelativeLayout大约高 40%。 详情参阅：解析ConstraintLayout的性能优点

• LinearLayout和RecyclerView的布局能作到的ConstraintLayout都能作到，它们作不到的也能作到（这一点后面详解）。

二、它有哪些缺点？

• xml很啰嗦

主要体如今两方面： 一、它须要经过详尽的属性来肯定自身位置，由于之前用LL或RL的写法，有些属性在父容器写一次就够，子容器就无需再写一次，但这个是每一个容器都是独立的，须要根据周围的控件肯定自身的位置。因此这就引出了第二个啰嗦。 二、每一个View都要有与之对应的id。

• 没有gravity属性，这里后面会讲到一个“拉力”的概念，这里先简单说一下，怎么实现gravity=center这样的效果呢？须要把每一个边都与父容器的边对应上（需设置4个属性），由于四个边都要拉扯以将控件拉到中间。

三、怎么使用？

一、引入资源

compile 'com.android.support.constraint:constraint-layout:1.0.2'
复制代码

二、熟悉它的属性，主要有几部分：

part1:相似于RelativeLayout的部分：

根据其余控件给自身定位：

layout_toRightOf="A"——>layout_constraintLeft_toRightOf="A"

根据父容器给自身定位：

layout_alignParentRight=true——>layout_constraintRight_toRightOf=parent

相似的还有：

layout_constraintRight_toLeftOf layout_constraintRight_toRightOf layout_constraintTop_toTopOf layout_constraintTop_toBottomOf layout_constraintBottom_toTopOf layout_constraintBottom_toBottomOf //根据某控件的基线对齐 layout_constraintBaseline_toBaselineOf

part2：相似LinearLayout的weight效果

官方有张图，如[图1]所示，一般来讲，LinearLayout的weight只能实现第四行的效果，但ConstraintLayout能够实现下图所有。

想实现相似LL（LinearLayout）的weight的效果，重点看每一个TextView的最下三行以及每一个TextView的 layout_width都是0，如下布局能够实现三个TextView。

<TextView android:id="@+id/tab1" android:layout_width="0dp" android:layout_height="30dp" 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" 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" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toRightOf="@id/tab2" app:layout_constraintRight_toRightOf="parent" />
复制代码

若是想实现2：1：1等分的效果，就如[图1]的第四行，须要给每一个TextView分别添加以下属性，并挨个设置值为2，1，1便可：

app:layout_constraintHorizontal_weight
复制代码

part3：如下是LinearLayout和RelativeLayout都作不到的，或者说是[要花很大的代价才能实现]这种表达是否是更准确点？

一、先说一下【链（Chains）】的概念：

ConstraintLayout中的控件想要定位准确，A控件是要依赖于父容器左侧和B，而后B控件依赖于A和B，C依赖于B以及父容器的右侧，就如图2所示：

这个链表明了某种约束和拉力，上图A，B，C之间存有间隙，（ps：若是要无间隙等分的话，需设置layout_width=0dp），图2每一个控件拉力都是同样的，若是想实现[图1]的其余效果，实际上都是根据拉力大小变化来实现的，B拉力大一点，那A和C都更靠近B一点点，相似这样的道理。

这里要引出一个属性：

layout_constraintHorizontal_chainStyle
复制代码

该属性有三个值：spread（铺开），spread_inside（里面铺开）， packed（拥挤），效果依次对应图1的：第1行，第2行，第4行。 默认是spread。（ps：以上效果layout_width是固定值或wrap_content，若是是0的话就会相似第3行那样）

二、用bias（偏斜）实现[图1]第5行的效果

简而言之就是调整C控件两边的拉力便可，对应的属性是：

layout_constraintHorizontal_bias //水平线的拉力
layout_constraintVertical_bias  //垂直线的拉力
复制代码

该属性的值是0~1，默认是0.5，经过调整水平线的拉力便可达到第5行的效果了。

三、控件的宽高比

之前若是想要实现一个Banner宽高比是2:1这样的，很麻烦，由于每一个机型分辨率有大有小，除非代码运行才能知道屏幕宽度是多少，才能动态获得屏幕宽度，在xml中根本没法实现。 但ConstraintLayout提供了一个属性就能实现：

app:layout_constraintDimensionRatio="W,2:1"
或
app:layout_constraintDimensionRatio="H,1:2"
复制代码

注意：宽高须要设置0dp才能有效果！

part4：关于Guideline（辅助线）

这个是为了方便ConstraintLayout布局，若是用过CAD的朋友就应该知道辅助线，用来辅助画图很方便，并且保存文件的时候该线是不会显示到图片上的，同理，这个也只是在写xml的时候辅助用的，应用真正运行的时候是看不到的。

由于是一条线嘛，天然要区分水平仍是垂直的，因此就有一个属性：

android:orientation
复制代码

取值为”vertical”和”horizontal”，跟RecyclerView同样。

它还有一些属性用来给辅助线找准位置，而后给辅助线命名个id，其余控件只要基于该先找到本身的位置就好啦~

layout_constraintGuide_begin  
layout_constraintGuide_end
layout_constraintGuide_percent
复制代码

它有两种方式来找到本身的位置，一个是绝对值，也就是begin&end（取值为dp），一个是百分比percent（取值为0~1）。
当orientation为vertical的时候，begin对应距离顶部，end对应距离底部。
当orientation为horizontal的时候，begin对应距离左边，end对应距离右边。

真正使用的时候，就把Guideline看成一个View来用好了，Android Studio也会有预览给你看的，记得要给它命名啊，否则其余控件怎么基于它定位呢，对吧？

---

更多请参阅：

一、鸿洋：ConstraintLayout 彻底解析 快来优化你的布局吧
二、郭霖：Android新特性介绍，ConstraintLayout彻底解析
三、Google官方文档——ConstraintLayout
四、Google官方文档——Guideline
五、解析ConstraintLayout的性能优点