轻松玩转ConstraintLayout（一）基础篇

阳光穿透心脏的1/2处 2023-02-17 11:04 36阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]  
`ConstraintLayout`自从2016年Google/IO推出以来，已逐渐成为Android开发的首选布局。它与`RelativeLayout`相似但是性能方面更优，而且AndroidStudio提供LayoutEditor可以达到像iOS上AutoLayout一样的开发体验。

> Our performance comparison shows that ConstraintLayout performs about 40% better in the measure/layout phase than RelativeLayout:  
> ![20200613134739641.png][]

虽然优点诸多，但是其复杂多样的属性导致使用上有一定门槛。所有我希望通过两篇文章将ConstraintLayout的基本使用方式讲明白，让大家在日常开发中不会再谈虎色变。

[轻松玩转ConstraintLayout（一）基础篇][ConstraintLayout]  
[轻松玩转ConstraintLayout（二）示例篇][ConstraintLayout 1]

本篇作为基础篇，先简单介绍一下ConstraintLayout中的基本属性

*  位置属性
 *  间隔属性
 *  比例属性
 *  排列属性

# 位置属性 #

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 1]  
位置属性主要用来描述ConstraintLayout中各个View之间的相对位置

## layout\_to ##

用来指定在某目标View的左侧或右侧，也可以目标View也可以是父容器。例如  
`layout_constraintStart_toEndOf="parent"` 、 `layout_constraintStart_toEndOf="@id/hoge"`

相当于RelativeLayout的`layout_to`

<table> 
 <thead> 
  <tr> 
   <th align="left">ConstraintLayout</th> 
   <th align="left">功能</th> 
   <th align="left">RelativeLayout</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">layout_constraintEnd_toStartOf</td> 
   <td align="left">位于目标的左侧</td> 
   <td align="left">layout_toStartOf</td> 
  </tr> 
  <tr> 
   <td align="left">layout_constraintStart_toEndOf</td> 
   <td align="left">位于目标的右侧</td> 
   <td align="left">layout_toEndOf</td> 
  </tr> 
  <tr> 
   <td align="left">layout_constraintRight_toLeftOf</td> 
   <td align="left">位于目标的左侧</td> 
   <td align="left">layout_toLeftOf</td> 
  </tr> 
  <tr> 
   <td align="left">layout_constraintLeft_toRightOf</td> 
   <td align="left">位于目标的右侧</td> 
   <td align="left">layout_toRightOf</td> 
  </tr> 
  <tr> 
   <td align="left">layout_constraintBottom_toTopOf</td> 
   <td align="left">位于目标的上侧</td> 
   <td align="left">layout_above</td> 
  </tr> 
  <tr> 
   <td align="left">layout_constraintTop_toBottomOf</td> 
   <td align="left">位于目标的下侧</td> 
   <td align="left">layout_below</td> 
  </tr> 
 </tbody> 
</table>

## layout\_align ##

将上述的属相稍作变化就可以表示与目标View的左侧或右侧对齐，相当于RelativeLayout的`layout_align`

<table> 
 <thead> 
  <tr> 
   <th align="left">ConstraintLayout</th> 
   <th align="left">功能</th> 
   <th align="left">RelativeLayout</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">layout_constraintStart_toStartOf</td> 
   <td align="left">与目标左对齐</td> 
   <td align="left">layout_alignStart</td> 
  </tr> 
  <tr> 
   <td align="left">layout_constraintEnd_toEndOf</td> 
   <td align="left">与目标右对齐</td> 
   <td align="left">layout_alignEnd</td> 
  </tr> 
  <tr> 
   <td align="left">layout_constraintLeft_toLeftOf</td> 
   <td align="left">与目标左对齐</td> 
   <td align="left">layout_alignLeft</td> 
  </tr> 
  <tr> 
   <td align="left">layout_constraintRight_toRightOf</td> 
   <td align="left">与目标右对齐</td> 
   <td align="left">layout_alignRight</td> 
  </tr> 
  <tr> 
   <td align="left">layout_constraintTop_toTopOf</td> 
   <td align="left">与目标上对齐</td> 
   <td align="left">layout_alignTop</td> 
  </tr> 
  <tr> 
   <td align="left">layout_constraintBottom_toBottomOf</td> 
   <td align="left">与目标下对齐</td> 
   <td align="left">layout_alignBottom</td> 
  </tr> 
 </tbody> 
</table>

## 居中 ##

![在这里插入图片描述][20200613141238862.png]  
如果相对于父容器同时左对齐和右对齐，则可以实现左右居中效果，上下居中也同理

## Baseline ##

基线对齐，类似RelativeLayout的`Baseline`

<table> 
 <thead> 
  <tr> 
   <th>ConstraintLayout</th> 
   <th>功能</th> 
   <th>RelativeLayout</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>layout_constraintBaseline_toBaselineOf</td> 
   <td>与目标的对齐基线</td> 
   <td>layout_alignBaseline</td> 
  </tr> 
 </tbody> 
</table>

# 间隔属性 #

--------------------

子View之间的间隔主要分为两类：`Margin`和`GoneMargin`

## Margin ##

![在这里插入图片描述][2020061316582335.png]  
就像常规布局的`margin`属性一样

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">值类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">android:layout_marginLeft</td> 
   <td align="left">dp</td> 
  </tr> 
  <tr> 
   <td align="left">android:layout_marginRight</td> 
   <td align="left">dp</td> 
  </tr> 
  <tr> 
   <td align="left">android:layout_marginStart</td> 
   <td align="left">dp</td> 
  </tr> 
  <tr> 
   <td align="left">android:layout_marginEnd</td> 
   <td align="left">dp</td> 
  </tr> 
  <tr> 
   <td align="left">android:layout_marginTop</td> 
   <td align="left">dp</td> 
  </tr> 
  <tr> 
   <td align="left">android:layout_marginBottom</td> 
   <td align="left">dp</td> 
  </tr> 
 </tbody> 
</table>

## GoneMargin ##

GoneMargin表示会跟随目标对象`Visibility:Gone`而消失，不会给剩余可见部分的布局带来影响  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 2]

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">取值类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">android:layout_goneMarginLeft</td> 
   <td align="left">dp</td> 
  </tr> 
  <tr> 
   <td align="left">android:layout_goneMarginRight</td> 
   <td align="left">dp</td> 
  </tr> 
  <tr> 
   <td align="left">android:layout_goneMarginStart</td> 
   <td align="left">dp</td> 
  </tr> 
  <tr> 
   <td align="left">android:layout_goneMarginEnd</td> 
   <td align="left">dp</td> 
  </tr> 
  <tr> 
   <td align="left">android:layout_goneMarginTop</td> 
   <td align="left">dp</td> 
  </tr> 
  <tr> 
   <td align="left">android:layout_goneMarginBottom</td> 
   <td align="left">dp</td> 
  </tr> 
 </tbody> 
</table>

# 比例属性 #

--------------------

比例主要包括两类

*  bias ：位置占比（也可以视为位置属性）
 *  ration：size占比

## bias ##

前面我们知道通过位置属性，可以设置子View居中。此时通过`bias`，可以设置居中偏移量，通过偏移量可以实现一个相对于父容器位置占比的效果

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">layout_constraintHorizontal_bias</td> 
   <td align="left">水平方向bias</td> 
  </tr> 
  <tr> 
   <td align="left">layout_constraintVertical_bias</td> 
   <td align="left">竖直方向bias</td> 
  </tr> 
 </tbody> 
</table>

bias接受0~1之间的值，例如左侧偏移30%  
![在这里插入图片描述][20200613171141768.png]

## ration ##

ConstraintLayout中有3中方式来设置子子View的宽高尺寸：

*  Xdp，X为具体数值
 *  WARP\_CONTENT
 *  0dp，0dp代表MATCH\_CONSTRAINT，ConstraintLayout不推荐使用MATCH\_PARENT

用0dp代表`MATCH_CONSTRAINT`，意味着这个实际size需要通过其他方式决定，此时可以用ration来指定。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">取值类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">layout_constraintDimensionRatio</td> 
   <td align="left">X:Y</td> 
  </tr> 
 </tbody> 
</table>

`ration`的值默认代表宽高比，即`w:h`。但是当width和height都为`MATCH_CONSTRAINT`时，需要指定是`w:h`还是`h:w`

例如如下布局：

<?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">
    
        <ImageView android:id="@+id/textView" android:layout_width="0dp" android:layout_height="0dp" android:background="@color/colorAccent" android:text="TextView" app:layout_constraintDimensionRatio="h,3:1" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="1.0" app:layout_constraintStart_toStartOf="parent" tools:layout_editor_absoluteY="0dp" />
    
    </android.support.constraint.ConstraintLayout>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 3]

`app:layout_constraintDimensionRatio="h,3:1"` ，`h,`代表以w为基础去设置h，即h = w \* ratio。 `w,`则意义相反

# 排列属性 #

--------------------

所谓排列属性是指如何对多个子View之间进行约束达到某种布局的排列效果，这主要是依靠`chainStyle`来完成的

## chainStyle ##

多个子View之间的约束称为`chain`，`chainStyle`子View之间的约束呈现了何种排列类型。

![在这里插入图片描述][20200613180103551.png]

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">layout_constraintHorizontal_chainStyle</td> 
   <td align="left">水平方向类型</td> 
  </tr> 
  <tr> 
   <td align="left">layout_constraintVertical_chainStyle</td> 
   <td align="left">竖直方向类型</td> 
  </tr> 
 </tbody> 
</table>

chainStyle有多种类型，通过下图可以一目了然  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 4]

<table> 
 <thead> 
  <tr> 
   <th align="left">类型</th> 
   <th align="left">功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">spread</td> 
   <td align="left">平分剩余空间</td> 
  </tr> 
  <tr> 
   <td align="left">spread_inside</td> 
   <td align="left">两端对齐，内部均分</td> 
  </tr> 
  <tr> 
   <td align="left">packed</td> 
   <td align="left">内部紧贴，外部均分</td> 
  </tr> 
 </tbody> 
</table>

## weighted chain ##

当chainStyle指定为`spread`或者`spread_inside`时，可以用`layout_constraintHorizontal_weight`或者`layout_constraintHorizontal_height`来指定子View相对于剩余空间的占比（对剩余空间的瓜分）

## Packed Chain with Bias ##

当chainStyle指定为`packed`时，可以用`layout_constraintHorizontal_bias`或者`layout_constraintVertical_bias`来指定居中偏移量

# 最后 #

--------------------

ConstraintLayout的基础篇就介绍完了，接下来的[示例篇][ConstraintLayout 1]会介绍如何用ConstraintLayout实现一些常用的布局

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200613220758251.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70
[20200613134739641.png]: https://img-blog.csdnimg.cn/20200613134739641.png
[ConstraintLayout]: https://blog.csdn.net/vitaviva/article/details/106731315
[ConstraintLayout 1]: https://blog.csdn.net/vitaviva/article/details/106736575
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200613135314130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70
[20200613141238862.png]: https://img-blog.csdnimg.cn/20200613141238862.png
[2020061316582335.png]: https://img-blog.csdnimg.cn/2020061316582335.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200613170926953.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70
[20200613171141768.png]: https://img-blog.csdnimg.cn/20200613171141768.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200613175852912.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70
[20200613180103551.png]: https://img-blog.csdnimg.cn/20200613180103551.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200613180657253.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70