Android布局终结者——ConstraintLayout

ConstraintLayout目的：减少Android xml布局文件的层级！！！

推荐阅读文章

1、ConstraintLayout (这到底是什么)
2、ConstraintLayout ( 这到底是什么 ) (小贴士及小技巧) 第二部分
3、Constraint Layout 动画 |动态 Constraint |用 Java 实现的 UI（这到底是什么）[第三部分]
4、ConstraintLayout 可视化[Design]编辑器 （这到底是什么）[第四部分]

添加引用：build.gradle中声明（目前版本为1.0.1）

dependencies {    compile 'com.android.support.constraint:constraint-layout:1.0.1'}

五大功能说明：

1. 相对位置
2. 比例位置
3. 引导线
4. 比例宽高
5. 链表样式

使用说明：

1、相对位置

<?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="com.example.administrator.constraintdemo.MainActivity">    <Button        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>

效果：

代码说明：重点就是这四句话，原理都是一样的，所以我们分析一句话

app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"

app:layout_constraintBottom_toBottomOf=”parent”

这句话拆成三部分来说就是

• constrainBottom:相当于是该控件（代码中的Button）的底部
• toBottomOf:在xxx的底部
• “parent”：意思是该控件的父控件，这里也可以使用@id/xxx引用

综上：这四句话的意思是Button的left在父控件的left，top在父控件的top，right在父控件的right，bottom在父控件的bottom，因为Button的width、height是“wrap_content”,所以我们看到Button位于父控件的中心位置

如果我们去掉app:layout_constraintBottom_toBottomOf=”parent”效果将会如下：

这是一个Button的效果，接下来我们看两个Button

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout    android:id="@+id/constraintLayout"    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">    <Button        android:id="@+id/cancel_button"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginBottom="16dp"        android:layout_marginStart="16dp"        android:text="取消"        app:layout_constraintBottom_toBottomOf="@id/constraintLayout"        app:layout_constraintStart_toStartOf="@id/constraintLayout"/>    <Button        android:id="@+id/next_button"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginBottom="16dp"        android:layout_marginStart="16dp"        android:text="下一步"        app:layout_constraintBottom_toBottomOf="@id/constraintLayout"        app:layout_constraintStart_toEndOf="@id/cancel_button"/></android.support.constraint.ConstraintLayout>

第一个Button的位置代码：

app:layout_constraintBottom_toBottomOf="@id/constraintLayout"        app:layout_constraintStart_toStartOf="@id/constraintLayout"

@id/constraintLayout是引用的父布局的id，所以第一个“取消”Button是位于左下角

再看第二个Button位置代码：

app:layout_constraintBottom_toBottomOf="@id/constraintLayout"app:layout_constraintStart_toEndOf="@id/cancel_button"

注意第二行，第二个Button的start是在id为cancel_button的end，也就是“取消”按钮的右边，所以我们可以看到如下的效果：

2、比例位置

app:layout_constraintHorizontal_bias="0.3"app:layout_constraintVertical_bias="0.2"

比例位置只有两种，即水平、竖直两个方向，在刚才的只有一个Button的样式中

app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"

我们没有声明比例，但是按钮却居中，因为默认的比例是0.5，即Button左边到父控件左边的距离和Button右边到父控件右边的距离之间的比例为1:1，如果我们加上比例，比如下边的布局

<?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="com.example.administrator.constraintdemo.MainActivity">    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Hello World!"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintHorizontal_bias="0.3"        app:layout_constraintVertical_bias="0.2"/></android.support.constraint.ConstraintLayout>

效果将会是如下图：

3、引导线 GuideLine

1. android:orientation=”vertical”数值有vertiacl（竖线）、horizontal（横线）
2. app:layout_constraintGuide_begin=”72dp”距离开始的距离
3. app:layout_constraintGuide_end=”72dp距离结束位置的距离
4. app:layout_constraintGuide_percent=”0.2”按照比例计算所在位置

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/constraintLayout"    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.constraint.Guideline        android:id="@+id/guideLine"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:orientation="vertical"        app:layout_constraintGuide_begin="72dp"/>    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Guide Up"        app:layout_constraintStart_toStartOf="@id/guideLine"        app:layout_constraintTop_toTopOf="@+id/constraintLayout"        app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"        app:layout_constraintVertical_bias="0.25"/>    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Guide Down"        app:layout_constraintStart_toStartOf="@id/guideLine"        app:layout_constraintTop_toTopOf="@+id/constraintLayout"        app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"        app:layout_constraintVertical_bias="0.75"/></android.support.constraint.ConstraintLayout>

效果图：

4、比例宽高

**宽高比**16:9，可在单独设置了宽度的情况下，根据比例计算出布局的高度

app:layout_constraintDimensionRatio="16:9"

代码示例：

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout    android:id="@+id/constraintLayout"    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:layout_width="0dp"        android:layout_height="200dp"        android:background="@color/colorAccent"        android:src="@drawable/total_large"        app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"        app:layout_constraintLeft_toLeftOf="@+id/constraintLayout"        app:layout_constraintRight_toRightOf="@+id/constraintLayout"        app:layout_constraintTop_toTopOf="@+id/constraintLayout"        app:layout_constraintDimensionRatio="16:9"/>    <ImageView        android:layout_width="0dp"        android:layout_height="200dp"        android:background="@color/colorAccent"        android:contentDescription="@null"        android:src="@drawable/total_large"        app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"        app:layout_constraintDimensionRatio="4:3"        app:layout_constraintLeft_toLeftOf="@+id/constraintLayout"        app:layout_constraintRight_toRightOf="@+id/constraintLayout"/></android.support.constraint.ConstraintLayout>

效果图：

5、链表样式

可设置水平链表、垂直链表、链表样式style

app:layout_constraintHorizontal_chainStyle="spread_inside"app:layout_constraintVertical_chainStyle="packed"

属性值有：

• spread
• packed

• spread_inside

  

---

相关优秀文章：

初步使用：

http://www.jianshu.com/p/32a0a6e0a98a
https://juejin.im/entry/58aaedd5ac502e006974e868

进阶用法：

https://github.com/xitu/gold-miner/blob/master/TODO/constraint-layout-animations-dynamic-constraints-ui-java-hell.md

---

十分感谢这些辛勤传播新知识的博主。