布局大杀器—ConstraintLayout

前言

Hi，你们好，看到标题后你们是否是一脸懵逼，这是啥？这小编搞事情？说好的六大布局咋又来个布局杀手？这就是我们公众号和其余公众号的不一样，咱们并非照本宣科的讲解Android知识，而是将项目当中实际运用到的而且是好用的东西分享给你们，还等什么呢？赶忙开始咱们的学习吧！！

引入

简介：约束布局（ConstraintLayout） 是一个ViewGroup，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整View。

说明：本博文是以ConstraintLayout1.1.3为基础编写，不一样的依赖版本有不一样的属性和方法，若是依照博文编写demo发现编译出错，请自行研究更新版本的约束布局或者与博主版本保持一致。

使用：检查依赖项，是否添加此依赖库。

//Android Studio2.3起，官方的模板默认使用ConstraintLayout。更新gradle插件版本以后，建立项目已经自动依赖，若是是老项目想要使用约束布局依赖如此
dependencies {   
	implementation 'com.android.support.constraint:constraint-layout:1.1.3'   
}
复制代码

使用

在Android Studio2.3以后，建立一个layout文件，默认使用布局以下：

<?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_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">
    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
复制代码

从上面发现有四个属性：

layout_constraintBottom_toBottomOf="parent" //View下边对齐parent底部
layout_constraintLeft_toLeftOf="parent"     //View左边对齐parent左边
layout_constraintRight_toRightOf="parent"   //View右边对齐parent右边
layout_constraintTop_toTopOf="parent"       //View上边对齐parent上边
复制代码

除此以外还有几个其余的经常使用属性，表示View之间的关系

layout_constraintBottom_toTopOf="parent"    //View下边对齐parent上边
layout_constraintLeft_toRightOf="parent"    //View左边对齐parent右边
layout_constraintRight_toLeftOf="parent"    //View右边对齐parent左边
layout_constraintTop_toBottomOf="parent"    //View上边对齐parent下边
复制代码

注意：此处parent能够换成其余想要与之关联的View的控件ID

模板中声明了一个TextView，且处于屏幕中间。如何作到的呢？上面四个属性顾名思义都指定了TextView与Parent(父布局)的关系，约束布局若是不指定水平和竖直方向的百分比，默认是50%，因此会居中。若是想要指定百分比使用以下属性：(使用横向比例须要指定左右关系，使用竖直比例须要指定上下关系)

layout_constraintHorizontal_bias="0.4"
layout_constraintVertical_bias="0.5"
这里有人会问，按照设计图的比例如何肯定这个比例呢：这里有一个公式和描述是通过验证的
1.bias值=子View左相关的长度/(子View左相关的长度+其右相关的长度)
2.bias值与左相关的长度是成正比的，增大bias值，子View的左相关老是随之增加。至于控件具体往左往右移动，则视子View与关联控件的哪边相关。
复制代码

无图无真相，计算说明这么复杂，想要搞晕我？直接上图！

因此咱们知道：想要使用约束布局固定一个View的位置，须要经过其与目标View相对的距离、位置，且从上(top)左(left)下(bottom)右(right)至少三个方位来讲明关系

设置百分比布局

当 ConstraintLayout 子布局的宽或高设置为0dp时，能够对宽或高设置百分比

<Button android:layout_width="0dp" android:layout_height="0dp" android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintHeight_percent="0.5" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintWidth_percent="0.5" />
复制代码

使用layout_constraintHeight_percent和layout_constraintWidth_percent属性设置横竖方向占比来肯定宽度和高度，而不用具体尺寸，可使用此属性作通常View的屏幕适配。效果如图所示：

设置宽高比例

当 layout_width或者 layout_height设置为0dp时，还能够经过 layout_constraintDimensionRatio设置宽高比例。该比例默认表示 width:height的值。

<Button android:layout_width="0dp" android:layout_height="0dp" android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintDimensionRatio="1:1" app:layout_constraintWidth_percent="0.5" />
复制代码

使用layout_constraintDimensionRatio设置宽度和高度的比值来灵活设置View的尺寸。若是想要表示高度：宽度则能够配置属性相似h,16:9的含义是 h:w=16:9 也可设置 w,9:16是同样的。效果如图所示：

强制约束

当一个view的宽或高,设置成wrap_content时

<Button android:id="@+id/btn1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="占位" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" />

    <Button android:id="@+id/btn2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="测试测试测试测试测试测试测试测试测试测试测试测试" app:layout_constraintLeft_toRightOf="@id/btn1" app:layout_constraintRight_toRightOf="parent" android:layout_marginTop="40dp" app:layout_constraintTop_toTopOf="@id/btn1" />
复制代码

实现效果如图所示：

纳尼，怎么回事，不是应该右边不会超出父布局的么，我已经设置了layout_constraintRight_toRightOf="parent"，这个就是设置了适应内容属性后出现的问题，此时须要强制使用约束宽度的属性 ，你会发现效果正常了。

app:layout_constrainedWidth="true"//在btn2上添加此属性

复制代码

控件链条(Chain)

能够经过 layout_constraintHorizontal_chainStyle或 layout_constraintVertical_chainStyle设置链式控件的样式。这个属性有点像 LinearLayout中的 weight 属性平分布局。使用此属性，一般是权重分配不知足需求，可是又须要居中或者分配View的空间

• 先放一个官方解释的示例图

看完这个图是否是还以为一头雾水，看起来很复杂的样子？其实否则，在开发中灵活使用此属性则能事半功倍且适配效果很好。使用此属性以前，须要把你即将连成链条的View彼此之间创建关联关系，水平方向则是控件彼此左右关联，竖直方向则是上下关联，每相邻两个View之间必须牢牢关联ID。便是：将一个方向上的控件造成锁链(相互依赖)，默认属性是spread

Spread Chain

Spread Inside Chain

//在btn1上配置
app:layout_constraintHorizontal_chainStyle="spread_inside" 
//左右靠边，中间剩余

复制代码

Packed Chain

//在btn1上配置
app:layout_constraintHorizontal_chainStyle="packed" 
//三个控件彼此紧靠且总体居中

复制代码

Packed Chain with Basis

//在btn1上配置
app:layout_constraintHorizontal_chainStyle="packed" 
app:layout_constraintHorizontal_bias="0.9"
//三个控件彼此紧靠且总体在横方向设置比例处

复制代码

结语

因为文章篇幅有限，且实际项目中尚未研究到更多更好用的新属性，暂时就告一段落，后期还会有关约束布局的更多好的玩法推送给你们，若是有小伙伴发现更高效或者更实用的属性，欢迎大家的留言，让咱们共同成长吧~

PS:若是还有未看懂的小伙伴，欢迎加入咱们的QQ技术交流群：892271582，里面有各类大神回答小伙伴们遇到的问题哦~