Android开发约束布局ConstraintLayout学习总结

小伙伴都知道Android开发有常用的五大布局:LinearLayout、RelateLayout、FrameLayout、AbsolutLayout和TableLayout,今天再总结一个比较牛掰的一个布局——ConstraintLayout,完全可以代替LinearLayout和RelateLayout,具体为什么要使用他和怎么用是接下来需要说的。

ConstraintLayout介绍

约束布局ConstraintLayout是一个Support库,可以在Api9以上的Android系统使用它,它的出现主要是为了解决布局嵌套过多的问题,以灵活的方式定位和调整小部件。从Android Studio 2.3起,官方的模板默认使用ConstraintLayout。

ConstraintLayout使用缘由

在开发过程中经常能遇到一些复杂的UI,可能会出现布局嵌套过多的问题,嵌套得越多,设备绘制视图所需的时间和计算功耗也就越多,遇到此情况我们更多的是采用RelativeLayout。

既然用RelativeLayout可以解决问题,为什么还要使用ConstraintLayout呢?因为ConstraintLayout使用起来比RelativeLayout更灵活,性能更出色!还有一点就是ConstraintLayout可以按照比例约束控件位置和尺寸,能够更好地适配屏幕大小不同的机型。

ConstraintLayout用法

添加依赖

首先我们需要在app/build.gradle文件中添加ConstraintLayout的依赖:

1
implementation 'com.android.support.constraint:constraint-layout:1.1.3'

相对定位

相对定位是部件对于另一个位置的约束,如图:
相对定位示例

相应的代码:

1
2
3
4
5
6
7
8
9
<TextView
    android:id="@+id/TextView1"
    ...
    android:text="TextView1" />

<TextView
    android:id="@+id/TextView2"
    ...
    app:layout_constraintLeft_toRightOf="@+id/TextView1" />

面代码中在TextView2里用到了app:layout_constraintLeft_toRightOf="@+id/TextView1"这个属性,他的意思是把TextView2的左边约束到TextView1的右边

相对定位的常用属性

  • layout_constraintLeft_toLeftOf
    view1左边对齐view2的左边
  • layout_constraintLeft_toRightOf
    view1左边对齐view2的右边
  • layout_constraintRight_toLeftOf
    view1右边对齐view2的左边
  • layout_constraintRight_toRightOf
    view1右边对齐view2的右边
  • layout_constraintTop_toTopOf
    view1顶部对齐view2的顶部
  • layout_constraintTop_toBottomOf
    view1顶部对齐view2的底部
  • layout_constraintBottom_toTopOf
    view1底部对齐view2的顶部
  • layout_constraintBottom_toBottomOf
    view1底部对齐view2的底部
  • layout_constraintBaseline_toBaselineOf
    view1基准线对齐view2的基准线
  • layout_constraintStart_toEndOf
    view1起始位置对齐view2的结束位置
  • layout_constraintStart_toStartOf
    view1起始位置view2的起始位置
  • layout_constraintEnd_toStartOf
    view1结束位置对齐view2的起始位置
  • layout_constraintEnd_toEndOf
    view1结束位置对齐view2的结束位置

两个TextView的高度不一致,但是又希望他们文本对齐,这个时候就可以使用layout_constraintBaseline_toBaselineOf,代码如下:

1
2
3
4
5
6
7
8
9
<TextView
    android:id="@+id/TextView1"
    .../>

<TextView
    android:id="@+id/TextView2"
    ...
    app:layout_constraintLeft_toRightOf="@+id/TextView1"
    app:layout_constraintBaseline_toBaselineOf="@+id/TextView1"/>

效果如下:
layout_constraintBaseline_toBaselineOf效果图

角度定位

角度定位指的是可以用一个角度和一个距离来约束两个空间的中心。举例:

1
2
3
4
5
6
7
8
9
10
11
12
<TextView
    android:id="@+id/TextView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<TextView
    android:id="@+id/TextView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintCircle="@+id/TextView1"
    app:layout_constraintCircleAngle="120"
    app:layout_constraintCircleRadius="150dp" />

上面例子中的TextView2用到了3个属性:
app:layout_constraintCircle="@+id/TextView1"
app:layout_constraintCircleAngle=“120”(角度)
app:layout_constraintCircleRadius=“150dp”(距离)

指的是TextView2的中心在TextView1的中心的120度,距离为150dp,效果如下:
角度定位效果图

边距

常用margin

  • android:layout_marginStart
  • android:layout_marginEnd
  • android:layout_marginLeft
  • android:layout_marginTop
  • android:layout_marginRight
  • android:layout_marginBottom

在使用margin的时候要注意两点:

  1. 在ConstraintLayout里面要实现margin,必须先约束该控件在ConstraintLayout里的位置
  2. margin只能大于等于0

goneMargin

goneMargin主要用于约束的控件可见性被设置为gone的时候使用的margin值,属性如下:

  • layout_goneMarginStart
  • layout_goneMarginEnd
  • layout_goneMarginLeft
  • layout_goneMarginTop
  • layout_goneMarginRight
  • layout_goneMarginBottom

假设TextView2的左边约束在TextView1的右边,并给TextView2设一个app:layout_goneMarginLeft=“10dp”,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/TextView1"
        .../>

    <TextView
        android:id="@+id/TextView2"
        ...
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_goneMarginLeft="10dp"
        />

</android.support.constraint.ConstraintLayout>

效果图:
goneMargin效果图1

这个时候把TextView1的可见性设为gone,效果如下:
goneMargin效果图2

extView1消失后,TextView2有一个距离左边10dp的边距。

居中

ConstraintLayout居中写法:

1
2
3
4
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"

水平居中:

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

垂直居中:

1
2
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"

偏移

居中后可采用margin进行适当偏移:

1
2
3
4
5
6
<TextView
    android:id="@+id/TextView1"
    ...
    android:layout_marginLeft="100dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

居中后margin适当偏移效果图

除了这种偏移外,ConstraintLayout还提供了另外一种偏移的属性:

  • layout_constraintHorizontal_bias 水平偏移
  • layout_constraintVertical_bias 垂直偏移

例子:

1
2
3
4
5
6
<TextView
    android:id="@+id/TextView1"
    ...
    app:layout_constraintHorizontal_bias="0.3"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

layout_constraintHorizontal_bias偏移效果图

解释:
居中时layout_constraintHorizontal_bias默认为0.5即50%(左偏移50%右偏移50%),0.3(左偏移30%右偏移70%)

尺寸约束

控件的尺寸可以通过四种不同方式指定。

使用指定的尺寸

这个就不说了。

使用wrap_content

当控件的高度或宽度为wrap_content时,可以使用下列属性来控制最大、最小的高度或宽度:

  • android:minWidth 最小的宽度
  • android:minHeight 最小的高度
  • android:maxWidth 最大的宽度
  • android:maxHeight 最大的高度

另外使用这些属性需要加上强制约束:

  • app:constrainedWidth=”true”
  • app:constrainedHeight=”true”

使用0dp

官方不推荐在ConstraintLayout中使用match_parent,可以设置 0dp (MATCH_CONSTRAINT) 配合约束代替match_parent,例如:

1
2
3
4
5
6
7
8
<TextView
    android:id="@+id/TextView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="50dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:visibility="visible" />

宽度设为0dp,左右两边约束parent的左右两边,并设置左边边距为50dp,效果如下:
0dp代替MATCH_CONSTRAINT效果图

控件内宽高比

当宽或高至少有一个尺寸被设置为0dp时,可以通过属性layout_constraintDimensionRatio设置宽高比,举个例子:

1
2
3
4
5
6
7
<TextView
    android:id="@+id/TextView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

宽设置为0dp,宽高比设置为1:1,这个时候TextView1是一个正方形。

除此之外,在设置宽高比的值的时候,还可以在前面加W或H,分别指定宽度或高度限制。 例如:

1
2
app:layout_constraintDimensionRatio="H,2:3"指的是 高:宽=2:3
app:layout_constraintDimensionRatio="W,2:3"指的是 宽:高=2:3

如果两个或以上控件通过下图的方式约束在一起,就可以认为是他们是一条链。

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<TextView
    android:id="@+id/TextView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/TextView2" />

<TextView
    android:id="@+id/TextView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/TextView1"
    app:layout_constraintRight_toLeftOf="@+id/TextView3"
    app:layout_constraintRight_toRightOf="parent" />

<TextView
    android:id="@+id/TextView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/TextView2"
    app:layout_constraintRight_toRightOf="parent" />

个TextView相互约束,两端两个TextView分别与parent约束,成为一条链,效果如下:
链效果图

链样式

一条链的第一个控件是这条链的链头,我们可以在链头中设置 layout_constraintHorizontal_chainStyle来改变整条链的样式,提供有三种样式:

  • spread
  • spread_inside
  • packed

对应这三种样式的效果图如下:
链三种样式效果图

权重链

可以留意到上面所用到的3个TextView宽度都为wrap_content,如果我们把宽度都设为0dp,这个时候可以在每个TextView中设置横向权重layout_constraintHorizontal_weight(constraintVertical为纵向)来创建一个权重链,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<TextView
    android:id="@+id/TextView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/TextView2"
    app:layout_constraintHorizontal_weight="2" />

<TextView
    android:id="@+id/TextView2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/TextView1"
    app:layout_constraintRight_toLeftOf="@+id/TextView3"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_weight="3" />

<TextView
    android:id="@+id/TextView3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/TextView2"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_weight="4" />

效果图如下:
权重链效果图

辅助工具

Optimizer(约束优化)

当我们使用 MATCH_CONSTRAINT 时,ConstraintLayout 将对控件进行 2 次测量,ConstraintLayout在1.1中可以通过设置 layout_optimizationLevel 进行优化,可设置的值有:

  • none:无优化
  • standard:仅优化直接约束和屏障约束(默认)
  • direct:优化直接约束
  • barrier:优化屏障约束
  • chain:优化链约束
  • dimensions:优化尺寸测量

Barrier(屏障标准)

假设有3个控件ABC,C在AB的右边,但是AB的宽是不固定的,这个时候C无论约束在A的右边或者B的右边都不对。当出现这种情况可以用Barrier来解决。Barrier可以在多个控件的一侧建立一个屏障,如下所示:
Barrier屏障标准示意图

这个时候C只要约束在Barrier的右边就可以了,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<TextView
    android:id="@+id/TextView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<TextView
    android:id="@+id/TextView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@+id/TextView1" />

<android.support.constraint.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="right"
    app:constraint_referenced_ids="TextView1,TextView2" />

<TextView
    android:id="@+id/TextView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/barrier" />

其中:

  • app:barrierDirection为屏障所在的位置,可设置的值有:bottom、end、left、right、start、top
  • app:constraint_referenced_ids为屏障引用的控件,可设置多个(用“,”隔开)

Group(组概念)

Group可以把多个控件归为一组,方便隐藏或显示一组控件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<TextView
    android:id="@+id/TextView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<TextView
    android:id="@+id/TextView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/TextView1" />

<TextView
    android:id="@+id/TextView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@id/TextView2" />

组概念效果图
现在有3个并排的TextView,用Group把TextView1和TextView3归为一组,再设置这组控件的可见性,如下所示:
组隐藏效果图

Placeholder(占位符)

Placeholder指的是占位符。在Placeholder中可使用setContent()设置另一个控件的id,使这个控件移动到占位符的位置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<android.support.constraint.Placeholder
    android:id="@+id/placeholder"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:content="@+id/textview"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#cccccc"
    android:padding="16dp"
    android:text="TextView"
    android:textColor="#000000"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

新建一个Placeholder约束在屏幕的左上角,新建一个TextView约束在屏幕的右上角,在Placeholder中设置 app:content="@+id/textview",这时TextView会跑到屏幕的左上角。效果如下:
占位符效果图

Guideline(辅助线)

Guildline像辅助线一样,在预览的时候帮助你完成布局(不会显示在界面上)。

Guildline的主要属性:

  • android:orientation 垂直vertical,水平horizontal
  • layout_constraintGuide_begin 开始位置
  • layout_constraintGuide_end 结束位置
  • layout_constraintGuide_percent 距离顶部的百分比(orientation = horizontal时则为距离左边)

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
<android.support.constraint.Guideline
    android:id="@+id/guideline1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="50dp" />

<android.support.constraint.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

guideline1为水平辅助线,开始位置是距离顶部50dp,guideline2位垂直辅助线,开始位置为屏幕宽的0.5(中点位置),效果如下:
guideline效果图

参考

  • https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout
  • https://www.jianshu.com/p/17ec9bd6ca8a
  • https://blog.csdn.net/qq_38520096/article/details/80813994