ConstraintLayout 详解

浅浅的花香味﹌ 2022-05-20 04:07 185阅读 0赞

> 本文已在我的公众号hongyangAndroid原创首发。  
> 转载请标明出处：  
> [http://blog.csdn.net/lmj623565791/article/details/78011599][http_blog.csdn.net_lmj623565791_article_details_78011599]  
> 本文出自[张鸿洋的博客][Link 1]
> 
> 本文已在我的公众号hongyangAndroid原创首发,[文章合集][Link 2]。

## 一、概述 ##

ConstraintLayout出现有一段时间了，不过一直没有特别去关注，也多多少少看了一些文字介绍，多数都是对使用可视化布局拖拽，个人对拖拽一直不看好，直到前段时间看到该文：

*  [解析ConstraintLayout的性能优势][ConstraintLayout]

非常详尽的介绍了ConstraintLayout的性能优势，于是乎开始学习了一下ConstraintLayout。

本文的重点不在与可视化界面的学习，而在于如何手写各类约束布局属性。对于可视化界面学习推荐：

*  [Android新特性介绍，ConstraintLayout完全解析][Android_ConstraintLayout]

下面开始进入正题，大家都知道，当布局嵌套深入比较深的时候，往往会伴随着一些性能问题。所以很多时候我们建议使用RelativeLayout或者GridLayout来简化掉布局的深度。

而对于简化布局深度，ConstraintLayout几乎可以做到极致，接下来我们通过实例来尽可能将所有常见的属性一步步的介绍清楚。

首先需要引入我们的ConstraintLayout，在build.gradle中加入：

compile 'com.android.support.constraint:constraint-layout:1.0.2'
    
      
       
        1
        2

## 二、来编写一个Feed Item ##

我们先看一个简单的新闻列表中常见的feed item。

![SouthEast][]

看到这样的布局，大家条件反射应该就是使用RelativeLayout来做，当然了，本案例我们使用ConstraintLayout来写：

<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:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#11ff0000" tools:context="com.zhy.constrantlayout_learn.MainActivity">
    
    
        <TextView android:id="@+id/tv1" android:layout_width="140dp" android:layout_height="86dp" android:layout_marginLeft="12dp" android:layout_marginTop="12dp" android:background="#fd3" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" />
    
        <TextView android:id="@+id/tv2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="8dp" android:layout_marginRight="12dp" android:text="马云:一年交税170多亿马云:一年交税170多亿马云:一年交税170多亿" android:textColor="#000000" android:textSize="16dp" app:layout_constraintLeft_toRightOf="@id/tv1" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="@id/tv1" />
    
        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="8dp" android:layout_marginTop="12dp" android:text="8分钟前" android:textColor="#333" android:textSize="12dp" app:layout_constraintLeft_toRightOf="@id/tv1" app:layout_constraintBottom_toBottomOf="@id/tv1" />
    
    </android.support.constraint.ConstraintLayout>
    
      
       
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        37
        38
        39
        40
        41
        42
        43
        44
        45
        46
        47
        48

看上面的布局，我们好像看到了几个模式的属性：

首先是tv1，有两个没见过的属性：

*  `app:layout_constraintLeft_toLeftOf="parent"`

从字面上看，指的是让该控件的左侧与父布局对齐，当我们希望控件A与控件B左侧对齐时，就可以使用该属性。

app:layout_constraintLeft_toLeftOf="@id/viewB"
    
      
       
        1
        2

类似的还有个相似的属性为：

*  app:layout\_constraintLeft\_toRightOf

很好理解，即当前属性的左侧在谁的右侧，当我们希望控件A在控件B的右侧时，可以设置：

app:layout_constraintLeft_toRightOf="@id/viewB"
      
       
        1

与之类似的还有几个属性：

*  `layout_constraintRight_toLeftOf`
 *  `layout_constraintRight_toRightOf`
 *  `layout_constraintTop_toTopOf`
 *  `layout_constraintTop_toBottomOf`
 *  `layout_constraintBottom_toTopOf`
 *  `layout_constraintBottom_toBottomOf`
 *  `layout_constraintBaseline_toBaselineOf`

类推就可以了。

现在在头看刚才的布局：

tv1设置了：
    
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    
    tv2设置了：
    
    app:layout_constraintLeft_toRightOf="@id/tv1"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="@id/tv1"
    
    tv3设置了：
    
    app:layout_constraintLeft_toRightOf="@id/tv1"
    app:layout_constraintBottom_toBottomOf="@id/tv1"
    
      
       
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16

按照我们刚才的理解，再次的解读下：

tv1应该是在父布局的左上角；

tv2在tv1的右侧，tv2的右侧和父布局对其，tv2和tv1顶部对齐；

tv3在tv1的右侧，tv3和tv1底部对其。

到这里，大家可以看到，目前我们已经可以控制任何一个控件与其他控件间的相对位置了，以及与parent间的相对位置。

### 和RL的差异 ###

大家是不是觉得目前来看和RelativeLayout特别像？

其实还是有很明显的区别的，我们通过一个例子来看一下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">
    
        <Button android:id="@+id/id_btn01" android:layout_width="100dp" android:text="Btn01" android:layout_height="wrap_content" />
    
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/id_btn01" android:text="Btn02" android:layout_alignParentRight="true" />
    
    </RelativeLayout>
      
       
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18

![SouthEast 1][]

那么经过我们刚才的学习，把：

`layout_toRightOf="@id/id_btn01"`，`layout_alignParentRight="true"`

分别替换为：

`app:layout_constraintLeft_toRightOf="@id/id_btn01"`，`app:layout_constraintRight_toRightOf="parent"`

是不是觉得so easy ，但是我们看一下效果图：

![SouthEast 2][]

是不是和预期有一定的区别，假设你将Btn02的宽度设置的非常大，你会发现更加诡异的事情：

![SouthEast 3][]

你会发现Btn02，好像疯了一样，我们设置的在btn01右侧，和与parent右侧对齐完全失效了！！！

别怕，接下来就让你认识到为什么这个控件叫做“Constraint”Layout。

在当控件有自己设置的宽度，例如`warp_content`、固定值时，我们为控件添加的都是约束“Constraint”，这个约束有点像橡皮筋一样会拉这个控件，但是并不会改变控件的尺寸（RL很明显不是这样的）。

例如上例，当btn02的宽度较小时，我们为其左侧设置了一个约束（btn01右侧），右侧设置了一个约束（parent右侧对其），当两个约束同时生效的时候（你可以认为两边都是相同的一个拉力），btn02会居中。

当btn02特别大的时候，依然是这两个力，那么会发生什么？会造成左侧和右侧超出的距离一样大。

那么现在大家肯定有些疑问：

*  怎么样才能和上面的RL一样，宽度刚好占据剩下的距离呢（btn01右侧到屏幕右侧的距离）？

这个问题，问得很好，我们刚才所有的尝试都是在控件自身拥有特定的宽度情况下执行的；那么如果希望控件的宽度根据由约束来控件，不妨去掉这个特定的宽度，即设置为0试试？

对！当我们将btn02的宽度设置为0时，一切又变得很完美。

![SouthEast 4][]

那么这里，你可能会问0值是什么含义，其实在ConstraintLayout中0代表：`MATCH_CONSTRAINT`，看到这个常量，是不是瞬间觉得好理解了一点。

*  最后一个问题，`MATCH_PARENT`哪去了?

看官网的解释：

> Important: `MATCH_PARENT` is not supported for widgets contained in a ConstraintLayout, though similar behavior can be defined by using `MATCH_CONSTRAINT` with the corresponding left/right or top/bottom constraints being set to “parent”.\`

所以你可以认为：在ConstraintLayout中已经不支持`MATCH_PARENT`这个值了，你可以通过`MATCH_CONSTRAINT`配合约束实现类似的效果。

好了，到这里，目前我们已经看到其已经和RelativeLayout势均力敌了，接下来我们看一下RL做不到的特性。

## 三、增加一个banner ##

我们现在以往在这个feed item顶部添加一个banner，宽度为占据整个屏幕，宽高比为16：6。

这里尴尬了，在之前的做法，很难在布局中设置宽高比，一般我们都需要在代码中显示的去操作，那么如果你用了ConstraintLayout，它就支持。

看一眼如何支持：

<android.support.constraint.ConstraintLayout ... tools:context="com.zhy.constrantlayout_learn.MainActivity">
    
        <TextView android:id="@+id/banner" android:layout_width="0dp" android:layout_height="0dp" android:background="#765" android:gravity="center" android:text="Banner" app:layout_constraintDimensionRatio="H,16:6" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" />
    
    
        <TextView android:id="@+id/tv1" app:layout_constraintTop_toBottomOf="@id/banner" ></TextView>
         ...
    </...>
      
       
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22

我们添加了一个banner，还记得我们刚才所说的么，不要使用`match_parent`了，而是设置`match_contraint`，即0，让约束来控制布局宽高。

所以我们设置了宽、高都是`match_contraint`，然后这两个属性：

app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
      
       
        1
        2

让我们的宽度充满整个父布局，在添加一个：

app:layout_constraintDimensionRatio="16:6"
      
       
        1

该属性指的是宽高比，所以16：6就可以完成我们的需求。

好了看下效果图：

![SouthEast 5][]

这个宽高比属性，还支持这样的写法：

app:layout_constraintDimensionRatio="W,16:6"
    app:layout_constraintDimensionRatio="H,16:6"
      
       
        1
        2

可以自己试验下。

好了，到这里，我们又新增了一个属性，还是个非常实用的属性。

那么，我们继续，再看一个似曾相识的功能。

## 四、增加几个Tab ##

现在我们希望在底部增加3个tab，均分。是不是想到了LinearLayout和weight。

没错！ConstraintLayout也支持类似的属性。

虽然我知道，但是写到这我还是有点小惊喜~~

看下如何实现：

<TextView android:id="@+id/tab1" android:layout_width="0dp" android:layout_height="30dp" android:background="#f67" android:gravity="center" android:text="Tab1" 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" android:background="#A67" android:gravity="center" android:text="Tab2" 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" android:background="#767" android:gravity="center" android:text="Tab3" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toRightOf="@id/tab2" app:layout_constraintRight_toRightOf="parent" />
      
       
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34

我们增加3个textview来冒充tab。我们看横向的依赖，3个tab两两设置了约束（即你在我们的左边，我在你的右边），最外层的设置了parent约束；再加上我们把宽度都设置为了`match_constraint`，so，这样我们就完成了3个tab等分。

看一眼效果图：

![SouthEast 6][]

你可能会说，LL配合weight更加灵活，可以单个设置占据的比例。

对，没错，我们也支持，我不是还没说完么。

现在我们可以给每个tab设置一个属性：

app:layout_constraintHorizontal_weight
      
       
        1

看到这个名字，应该就明白了吧，假设我们分别设置值为2，1，1。

效果图为：

![SouthEast 7][]

是不是很惊喜，别急，刚才你说我不如LL，现在我要让你再看一些LL配合weight做不到的。

这里需要借助几张官网上的图了：

刚才我们说了，3个tab两两设置了依赖，即类似下图：

![SouthEast 8][]

横向的相当于组成了一个链(Chains)。在这个链的最左侧的元素成为链头，我们可以在其身上设置一些属性，来决定这个链的展示效果：

该属性为：

layout_constraintHorizontal_chainStyle
      
       
        1

我们已经见过一种效果了，即按照weight等分，可以成为`weighted chain`。设置条件为：

chainStyle=”spread”，所有控件宽度设置为`match_constraint`，因为默认就是spread，所以我们没有显示设置。

其取值还可以为：

*  packed
 *  spread\_inside

我还是分别显示一下吧：

1.  spread + 宽度非0

![SouthEast 9][]

1.  spread + 宽度为0，且可以通过weight控制分配比例（上例）
2.  spread\_inside + 宽度非0

![SouthEast 10][]

1.  packed + 宽度非0

![SouthEast 11][]

好了，差不多了，我们可以在横向或者纵向组成一个Chain，然后在Chain head设置chainStyle来搞一些事情。

官网有个图：

![SouthEast 12][]

前四个我们都演示了，最后一个设计到一个新的bias属性，别急，咱们慢慢说~~

好了，到这里，我们再次见证了ConstraintLayout的强大。

我们最后再看一个例子。

### 五、增加浮动按钮 ###

一个很常见的功能，我们现在希望在右下角增加一个浮动按钮。

看下如何实现：

<android.support.constraint.ConstraintLayout ... tools:context="com.zhy.constrantlayout_learn.MainActivity">
    
        <TextView android:layout_width="60dp" android:layout_height="60dp" android:background="#612" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintHorizontal_bias="0.9" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.9" />
    
    </....>
      
       
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16

我们在最后追加一个TextView冒充我们的浮动按钮。可以看到我们设置了固定值，被设置约束为右下角。

正常情况我们可以通过margin来设置与右侧与底部的距离。

但是这里我们尝试使用量个新的属性：

layout_constraintHorizontal_bias
    layout_constraintVertical_bias
      
       
        1
        2

即设置上下两侧间隙比例分别为90%与10%。这个很好理解，我们之前说了，再没有bias这个属性的时候，这两侧的拉力大小是一样的，但是你可以通过bias来控制哪一侧的力要大一些~~明白了么~

所以，该属性可以用于约束之前，控制两侧的“拉力”。

我们看一下效果图：

![SouthEast 13][]

那么到这里，ConstraintLayout的属性我们基本上介绍完了：

我们看一下：

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对齐 #

layout\_constraintBaseline\_toBaselineOf

# 与left,right类似 #

layout\_constraintStart\_toEndOf  
layout\_constraintStart\_toStartOf  
layout\_constraintEnd\_toStartOf  
layout\_constraintEnd\_toEndOf

# margin不需要解释 #

android:layout\_marginStart  
android:layout\_marginEnd  
android:layout\_marginLeft  
android:layout\_marginTop  
android:layout\_marginRight  
android:layout\_marginBottom

layout\_constraintHorizontal\_bias  
layout\_constraintVertical\_bias

layout\_constraintHorizontal\_chainStyle  
layout\_constraintVertical\_chainStyle

layout\_constraintVertical\_weight

Guideline

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26
 *  27
 *  28
 *  29
 *  30
 *  31
 *  32
 *  33
 *  34
 *  35

好像，还有个比较特殊的，叫Guideline。

好吧，继续~

### 六、尝试使用Guideline ###

`android.support.constraint.Guideline`该类比较简单，主要用于辅助布局，即类似为辅助线，横向的、纵向的。该布局是不会显示到界面上的。

所以其有个属性为：

android:orientation取值为”vertical”和”horizontal”.

除此以外，还差个属性，决定该辅助线的位置：

*  `layout_constraintGuide_begin`
 *  `layout_constraintGuide_end`
 *  `layout_constraintGuide_percent`

可以通过上面3个属性其中之一来确定属性值位置。

begin=30dp，即可认为距离顶部30dp的地方有个辅助线，根据orientation来决定是横向还是纵向。

end=30dp，即为距离底部。  
percent=0.8即为距离顶部80%。

好了，下面看一个例子，刚才我们的浮点按钮，我决定通过两根辅助线来定位，一根横向距离底部80%，一个纵向距离顶部80%，浮点按钮就定位在他们交叉的地方。

<android.support.constraint.ConstraintLayout ... tools:context="com.zhy.constrantlayout_learn.MainActivity">
    
        <android.support.constraint.Guideline android:id="@+id/guideline_h" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_percent="0.8" />
    
    
        <android.support.constraint.Guideline android:id="@+id/guideline_w" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.8" />
    
        <TextView android:layout_width="60dp" android:layout_height="60dp" android:background="#612" app:layout_constraintLeft_toRightOf="@id/guideline_w" app:layout_constraintTop_toBottomOf="@id/guideline_h" />
    
    </....>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27

我感觉都不用解释了~~看眼效果图吧：

![SouthEast 14][]

到此，属性基本上讲完啦~

可以看到，上述相当复杂的一个布局，在ConstraintLayout中完全没有嵌套！

### 六、总结 ###

本文通过实际的按钮，基本上介绍了ConstraintLayout所支持的所有的属性，全文没有提及拖拽，因为当界面复杂之后，想要完美的拖拽实在是太难了，而且谁也不期望，看不懂拖拽完成后的布局属性吧~

所以，我建议还是尽可能手写，通过本文这样一个流程，虽然支持的属性有20多个，但是分类后并不难记，难记也可以拿出本文翻一翻~

好了，思考了半天，如何通过一个案例介绍完所有的属性，总体来说还是完成了，给自己点个赞。

### 参考 ###

*    
    
 *  [解析ConstraintLayout的性能优势][ConstraintLayout 1]
 *  [http://blog.csdn.net/guolin\_blog/article/details/53122387][Android_ConstraintLayout]
 *  [https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout.html\#VirtualHelpers][https_developer.android.google.cn_reference_android_support_constraint_ConstraintLayout.html_VirtualHelpers]
 *  [https://developer.android.google.cn/reference/android/support/constraint/Guideline.html\#][https_developer.android.google.cn_reference_android_support_constraint_Guideline.html]

[http_blog.csdn.net_lmj623565791_article_details_78011599]: http://blog.csdn.net/lmj623565791/article/details/78011599
[Link 1]: http://blog.csdn.net/lmj623565791/
[Link 2]: https://github.com/hongyangAndroid/hongyangWeixinArticles
[ConstraintLayout]: https://mp.weixin.qq.com/s/gGR2itbY7hh9fo61SxaMQQ
[Android_ConstraintLayout]: http://blog.csdn.net/guolin_blog/article/details/53122387
[SouthEast]: /images/20220520/c8ff59082ffb4621a3801accd4679481.png
[SouthEast 1]: /images/20220520/71b47e59657841aab701582b6a7951ca.png
[SouthEast 2]: /images/20220520/c92d805066904340aae139828daf92ea.png
[SouthEast 3]: /images/20220520/f230b174080f46629b7c48dd5a1da28c.png
[SouthEast 4]: /images/20220520/803b3aa73002416c8506304ced14e3c4.png
[SouthEast 5]: /images/20220520/320cd12d2f4c4d0fb822ea4a1a29f4e9.png
[SouthEast 6]: /images/20220520/90d121f8f4394c8697607c293383155d.png
[SouthEast 7]: /images/20220520/e62cf20a097d49ac862fa006be65b326.png
[SouthEast 8]: /images/20220520/a9faf1501141485bb53a65946aa3f1eb.png
[SouthEast 9]: /images/20220520/4c167ef240b645039654be662bb23c67.png
[SouthEast 10]: /images/20220520/950304a7bfa2414698e5b849c94ed584.png
[SouthEast 11]: /images/20220520/c11015fffae544fc809a7bbd2c432e13.png
[SouthEast 12]: /images/20220520/439f353a99cd4897b2b95b97414ac315.png
[SouthEast 13]: /images/20220520/4f92368d6c194bf5aaee734a6ab51a1f.png
[SouthEast 14]: /images/20220520/afd428d78a104c3b99f88cd636dc70a1.png
[ConstraintLayout 1]: https://mp.weixin.qq.com/s?timestamp=1505627609&src=3&ver=1&signature=h9TyTRcxR-UQ%2a5%2a%2af5iE5s3NmAH5rXtE9mceqOLdJfM1FzFjGDbMb4AkMvpE5GuvwM06I9Lx4EPblPlC8%2a5SHZyjPLHYUezT6THWELR4Ws1C-XZfqutW7YNXAnCnRQJIU4jKnpVVtTwQotig-DQhcZ6U6-hQtJEcqpLzdZreqDk=
[https_developer.android.google.cn_reference_android_support_constraint_ConstraintLayout.html_VirtualHelpers]: https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout.html#VirtualHelpers
[https_developer.android.google.cn_reference_android_support_constraint_Guideline.html]: https://developer.android.google.cn/reference/android/support/constraint/Guideline.html#