盒子
盒子
文章目录
  1. 前言
  2. ConstraintLayout VS RelativeLayout
  3. ConstraintLayout VS LinearLayout
  4. margin & goneMargin
    1. margin
    2. goneMargin
  5. Circle
  6. GuideLine
  7. Barrier & Group
    1. Barrier
    2. Group
  8. other
    1. wrap_content
    2. MATCH_CONSTRAIN
    3. Ratio
  9. End
  10. 关注

ConstraintLayout使用汇总

前言

在这里我要向大家介绍ConstraintLayout,它是一种布局方法,可以帮助我们在对Android进行布局时减少对布局层次的嵌套,进而提高app的性能。

接下来我会通过一些示例来全面介绍ConstraintLayout的使用方式与它的一些特性。希望能够帮助正在学习ConstraintLayout使用的同学们。

ConstraintLayout VS RelativeLayout

相信当我们进行布局的时候,使用最多的应该是LinearLayout与RelativeLayout。而对于复杂一点的布局来说,他们之间的嵌套使用就最正常不过了。所以为了减少不必要的嵌套布局,Google特意开发的ConstraintLayout。它同时支持LinearLayout与RelativeLayout的所用特性。同时它完全通过约束来减少布局的嵌套。意思就是基本上最外层只需要一个ConstraintLayout节点就可以了。下面先从RelativeLayout开始,看它是如何来实现RelativeLayout的特性。

这里我列举一些RelativeLayout的特性:

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
android:layout_alignStart="@id/view"
android:layout_alignLeft="@id/view"
android:layout_alignEnd="@id/view"
android:layout_alignRight="@id/view"
android:layout_alignTop="@id/view"
android:layout_alignBaseline="@id/view"
android:layout_alignBottom="@id/view"

android:layout_toStartOf="@id/view"
android:layout_toLeftOf="@id/view"
android:layout_toEndOf="@id/view"
android:layout_toRightOf="@id/view"
android:layout_above="@id/view"
android:layout_below="@id/view"

android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"

android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"

相信上面的特性大家再熟悉不过了。对于layout_align*的属性在ConstraintLayout中可以通过以下方式替代。

1
2
3
4
5
6
7
app:layout_constraintStart_toStartOf="@id/view"
app:layout_constraintLeft_toLeftOf="@id/view"
app:layout_constraintEnd_toEndOf="@id/view"
app:layout_constraintRight_toRightOf="@id/view"
app:layout_constraintTop_toTopOf="@id/view"
app:layout_constraintBaseline_toBaselineOf="@id/view"
app:layout_constraintBottom_toBottomOf="@id/view"

而对于layout_to*的属性ConstraintLayout也有与之完美替代的特性:

1
2
3
4
5
6
app:layout_constraintStart_toEndOf="@id/view"
app:layout_constraintLeft_toRightOf="@id/view"
app:layout_constraintEnd_toStartOf="@id/view"
app:layout_constraintRight_toLeftOf="@id/view"
app:layout_constraintTop_toBottomOf="@id/view"
app:layout_constraintBottom_toTopOf="@id/view"

接下来是layout_alignParent*的替代实现:

1
2
3
4
5
6
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

这里与之前的layout_align*基本类似,只不过它的所以约束的对象不同而已,为了实现对父布局的依赖,这里统一都是parent。

最后是layout_center*属性,本质与上面的基本类似。下面直接通过实例来展示

1
2
3
4
5
6
7
8
9
<Button
android:id="@+id/center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

通过上面的代码相信不难理解,要想实现水平居中只需设置left与right分别约束parent,而要想实现竖直居中则只需设置top与bottom分别约束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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="left" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="right"
app:layout_constraintRight_toRightOf="parent" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="bottom"
app:layout_constraintBottom_toBottomOf="parent" />

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

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="center top"
app:layout_constraintBottom_toTopOf="@+id/center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="center bottom"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/center" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="center left"
app:layout_constraintRight_toLeftOf="@+id/center"
app:layout_constraintTop_toTopOf="@+id/center" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="center right"
app:layout_constraintLeft_toRightOf="@+id/center"
app:layout_constraintTop_toTopOf="@+id/center" />

</android.support.constraint.ConstraintLayout>

效果图

点击查看源码

在ConstraintLayout中没有match_parent,而与之替代的是match_constraint,在使用中通过0dp来代表。一旦你使用了match_parent那么它的约束将会失效。

ConstraintLayout VS LinearLayout

为了能够达到LinearLayout的效果,ConstraintLayout引入了Chain Style.通过以下代码来设置:

1
2
app:layout_constraintHorizontal_chainStyle=""
app:layout_constraintVertical_chainStyle=""

它主要有三个属性分别为:

  1. spread_inside:两边不留空间,中间间距平分
  2. spread:完全均分
  3. packed:完全不留间距

解释的有点生硬,下面通过一张官方图来更直观的了解

效果图

需要注意的是:要达到上的的chain效果,他们之间必须完全相互约束,同时chain style的设置都是以第一个view为基点。同时默认chain style为spread。

同样的下面是一个示例代码与效果图

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
android:id="@+id/first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/second" />

<Button
android:id="@+id/second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second"
app:layout_constraintLeft_toRightOf="@+id/first"
app:layout_constraintRight_toLeftOf="@+id/third"
app:layout_constraintTop_toTopOf="@+id/first" />

<Button
android:id="@+id/third"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="third"
app:layout_constraintLeft_toRightOf="@+id/second"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/first" />

<Button
android:id="@+id/match_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/match_second"
app:layout_constraintTop_toBottomOf="@+id/first" />

<Button
android:id="@+id/match_second"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="second"
app:layout_constraintHorizontal_weight="3"
app:layout_constraintLeft_toRightOf="@+id/match_first"
app:layout_constraintRight_toLeftOf="@+id/match_third"
app:layout_constraintTop_toTopOf="@+id/match_first" />

<Button
android:id="@+id/match_third"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="third"
app:layout_constraintHorizontal_weight="4"
app:layout_constraintLeft_toRightOf="@+id/match_second"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/match_first" />

<Button
android:id="@+id/spread_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/spread_second"
app:layout_constraintTop_toBottomOf="@+id/match_first" />

<Button
android:id="@+id/spread_second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second"
app:layout_constraintLeft_toRightOf="@+id/spread_first"
app:layout_constraintRight_toLeftOf="@+id/spread_third"
app:layout_constraintTop_toTopOf="@+id/spread_first" />

<Button
android:id="@+id/spread_third"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="third"
app:layout_constraintLeft_toRightOf="@+id/spread_second"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/spread_first" />

<Button
android:id="@+id/packed_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/packed_second"
app:layout_constraintTop_toBottomOf="@+id/spread_first" />

<Button
android:id="@+id/packed_second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second"
app:layout_constraintLeft_toRightOf="@+id/packed_first"
app:layout_constraintRight_toLeftOf="@+id/packed_third"
app:layout_constraintTop_toTopOf="@+id/packed_first" />

<Button
android:id="@+id/packed_third"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="third"
app:layout_constraintLeft_toRightOf="@+id/packed_second"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/packed_first" />

<Button
android:id="@+id/bias_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/bias_second"
app:layout_constraintTop_toBottomOf="@+id/packed_first" />

<Button
android:id="@+id/bias_second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second"
app:layout_constraintLeft_toRightOf="@+id/bias_first"
app:layout_constraintRight_toLeftOf="@+id/bias_third"
app:layout_constraintTop_toTopOf="@+id/bias_first" />

<Button
android:id="@+id/bias_third"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="third"
app:layout_constraintLeft_toRightOf="@+id/bias_second"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/bias_first" />

</android.support.constraint.ConstraintLayout>

效果图

点击查看源码

通过效果图,我们会发现第二行他们占的比例不同,返回看代码发现其实与LinearLayout类似,使用了app:layout_constraintHorizontal_weight=""权重属性。当然要使得其生效必须layout_width与layout_height其中一个为0dp。
我们再来看第4、5行,如果chain style的值为packed,那么它默认是居中排列的,如果想改变的话可以通过设置app:layout_constraintHorizontal_bias="0.2"app:layout_constraintVertical_bias="0.2"

margin & goneMargin

margin

ConstraintLayout的margin与原来的使用区别主要为两点:其一android:layout_margin*效果不变,但它的值不能为负值;其二相应方向的margin设置必须要有约束,否则不生效。

1
2
3
4
5
6
7
8
9
10
11
<TextView
android:id="@+id/tv1"
...
android:layout_marginRight="100dp"
app:layout_constraintLeft_toLeftOf="parent"/>

<TextView
android:layout_marginLeft="10dp"
...
app:layout_constraintBaseline_toBaselineOf="@+id/tv1"
app:layout_constraintLeft_toRightOf="@+id/tv1" />

首先我们来看第二个TextView,它的marginLeft会生效,因为它有left方向的约束:app:layout_constraintLeft_toRightOf=”@+id/tv1”;而对于第一个TextView,它的marginRight不会生效,因为它的right方向上没有约束,所以如果要生效可以加入:app:layout_constraintRight_toRightOf=”parent约束。

这些都是相对于原来布局margin使用的区别,如果你觉得不习惯可以使用padding代替,这也是ConstraintLayout所推荐的方式。

goneMargin

在ConstraintLayout中还增加了另外一种goneMargin,它的作用主要是:一旦某个方向上的约束view不可以见,这时如果设置了该属性,该方向将自动增加margin值。即目标必须不可见。

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
49
50
51
52
53
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/tv1"
android:layout_marginTop="100dp"
android:text="tv1"
...
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />

<TextView
android:layout_marginLeft="10dp"
android:text="tv2"
....
app:layout_constraintBaseline_toBaselineOf="@+id/tv1"
app:layout_constraintLeft_toRightOf="@+id/tv1" />

<TextView
android:id="@+id/tv3"
...
android:text="tv3"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/tv4"
android:layout_marginLeft="10dp"
android:text="tv4"
...
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/tv3"
app:layout_constraintTop_toTopOf="parent"
app:layout_goneMarginLeft="100dp" />

<TextView
android:id="@+id/tv5"
...
android:layout_marginBottom="10dp"
android:text="tv5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.33" />

</android.support.constraint.ConstraintLayout>

效果图

点击查看源码

Circle

在ConstraintLayout中你不仅可以对任意view进行水平与竖直方向的约束,同时你还可以居于约束view的中心点进行不同角度方向的约束。主要属性有如下三种:

  1. layout_constraintCircle: 代表约束的view的id
  2. layout_constraintCircleAngle: 代表约束的角度
  3. layout_constraintCircleRadius: 代表约束的半径大小

效果图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
...
>

<TextView
android:id="@+id/tv1"
android:text="tv1"
...
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:text="tv2"
...
app:layout_constraintCircle="@id/tv1"
app:layout_constraintCircleAngle="45"
app:layout_constraintCircleRadius="100dp" />

</android.support.constraint.ConstraintLayout>

效果图

点击查看源码

GuideLine

GuideLine也是ConstraintLayout特有的属性,它相当于一个参考线,且它的布局中不会展示。

GuidLine有水平与竖直方法的设置:

1
android:orientation="horizontal|vertical"

主要设置属性为:

  1. layout_constraintGuide_begin: 代表距离GuideLine左边或者底部的距离
  2. layout_constraintGuide_end: 代表距离GuideLine右边或者底部的距离
  3. layout_constraintGuide_percent:代表GuideLine相对于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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
...
>

<android.support.constraint.Guideline
android:id="@+id/vertical_guide_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="150dp" />

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Button"
app:layout_constraintLeft_toLeftOf="@+id/vertical_guide_line"
app:layout_constraintTop_toTopOf="parent" />

<android.support.constraint.Guideline
android:id="@+id/horizontal_guide_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_end="150dp" />

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
app:layout_constraintRight_toLeftOf="@+id/vertical_guide_line"
app:layout_constraintTop_toTopOf="@+id/horizontal_guide_line" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"
app:layout_constraintBottom_toBottomOf="@+id/horizontal_guide_line"
app:layout_constraintLeft_toRightOf="@+id/vertical_guide_line" />

<android.support.constraint.Guideline
android:id="@+id/percent_guide_Line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="margin top of parent 30%"
app:layout_constraintTop_toBottomOf="@+id/percent_guide_Line" />

</android.support.constraint.ConstraintLayout>

效果图

点击查看源码

Barrier & Group

Barrier

Barrier与GuideLine有点类似,也是布局不可见的,不同的是它就约束对象的,看如下图:

效果图

如果有这么一种需求:tv3始终在tv1与tv2的最近右边,但tv1与tv2的宽度的不看预期的,即可能tv1更长或者tv2更长。这时Barrier就能很好的解决这问题。

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
<!--barrier-->
<TextView
android:id="@+id/tv1"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:padding="5dp"
android:text="tv1,固定宽度"
android:textColor="@android:color/white" />

<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@color/colorPrimary"
android:padding="5dp"
android:text="tv2,宽度不固定"
android:textColor="@android:color/white"
app:layout_constraintTop_toBottomOf="@+id/tv1" />

<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="tv1,tv2" />

<TextView
android:id="@+id/tv3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:background="@color/colorPrimary"
android:padding="5dp"
android:text="@string/barrier_tv3"
android:textColor="@android:color/white"
app:layout_constraintLeft_toRightOf="@+id/barrier"
app:layout_constraintRight_toRightOf="parent" />

在Barrier中有两个属性,分别为:

  1. barrierDirection:控制其方向
  2. constraint_referenced_ids:约束的view的参考id

Group

细心的你可能会发现,既然ConstraintLayout中能减少布局的嵌套,那么对于同一模块的UI对其进行整体操作,是否只能逐一进行操作(显隐操作)?ConstraintLayout给出了它的答案,就是Group。它的作用就是对多个view进行分组操作,当然在布局中也是不可见的。主要属性是:

1
constraint_referenced_ids: 约束的view的参考id

就拿上面Barrier的示例来说。

1
2
3
4
5
6
7
<!--group 通过设置关联id来控制它们的显隐-->
<android.support.constraint.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="tv1,tv2" />

如果加了如上代码,那么对group进行VISIBLE操作时,对同时作用于tv1与tv2。

点击查看源码

other

下面来说一下使用ConstraintLayout时,一些需要注意的点。这样可以帮助你在使用做少走弯路。

wrap_content

如果你的View中对宽高使用了wrap_content,那么你要时刻注意,它的约束可能并不会很好的生效。例如如下实例:

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
<!--当为wrap_content对其进行强制约束-->
<!--app:layout_constrainedWidth=”true|false”-->
<!--app:layout_constrainedHeight=”true|false”-->
<!--android:minWidth-->
<!--android:minHeight-->
<!--android:maxWidth-->
<!--android:maxHeight-->
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:padding="10dp"
android:text="tv1"
android:textColor="@android:color/white" />

<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="@color/colorPrimary"
android:padding="10dp"
android:text="@string/other_tv2"
android:textColor="@android:color/white"
app:layout_constrainedWidth="true"
app:layout_constraintLeft_toRightOf="@+id/tv1"
app:layout_constraintRight_toRightOf="parent" />

效果图

如果将app:layout_constrainedWidth=”true”这行代码删除,那么你将会看到如下效果

效果图

在代码注释中已经说明,在使用wrap_content时,还可以使用minWith等属性。它们之间的优先级为 min/max > constraintWith/Height

MATCH_CONSTRAIN

当使用了MATCH_CONSTRAIN,即0dp来展示宽高时,可以通过如下方式来进行约束相应宽高值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--当为MATCH_CONSTRAINT 可以通过以下设置来约束宽高-->
<!--layout_constraintWidth_min and layout_constraintHeight_min-->
<!--layout_constraintWidth_max and layout_constraintHeight_max-->
<!--layout_constraintWidth_percent and layout_constraintHeight_percent-->
<!--android:minWidth-->
<!--android:minHeight-->
<!--android:maxWidth-->
<!--android:maxHeight-->
<TextView
android:id="@+id/tv3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:background="@color/colorPrimary"
android:padding="10dp"
android:text="tv3"
android:textColor="@android:color/white"
app:layout_constraintTop_toBottomOf="@+id/tv1"
app:layout_constraintWidth_percent="0.5" />

效果图

如果将app:layout_constraintWidth_percent=”0.5”去掉的话,你将看到如下效果:

效果图

注意它们之间的优先级为parent > min/max > constraint_min/max

Ratio

如果你的需要是对View进行固定宽高比展示时,那么Ratio的这个特性将非常适合你。你只需设置它的layout_constraintDimensionRatio属性即可。

如果layout_width与layout_height其中一个为MATCH_CONSTRAIN(0dp), MATCH_CONSTRAIN(0dp)的值将根据layout_constraintDimensionRatio所设的值来计算(w:h)

1
2
3
4
5
6
7
8
9
10
11
<TextView
android:id="@+id/tv4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:background="@color/colorPrimary"
android:padding="10dp"
android:text="tv4"
android:textColor="@android:color/white"
app:layout_constraintDimensionRatio="2:1"
app:layout_constraintTop_toBottomOf="@+id/tv3" />

效果图

如果layout_width与layout_height都为MATCH_CONSTRAIN(0dp), 那么可以对layout_constraintDimensionRatio添加前缀W/H(H,w:h,来对其进行宽高方向的约束,从而形成比例。

1
2
3
4
5
6
7
8
9
10
11
12
<TextView
android:id="@+id/tv5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="50dp"
android:background="@color/colorPrimary"
android:padding="10dp"
android:text="tv5"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="H,3:1"
app:layout_constraintTop_toBottomOf="@+id/tv4" />

效果图

根据效果图展示的宽高比为1:3。即对应了H,3:1。

点击查看源码

End

到这里ConstraintLayout的使用全部介绍完毕,希望能有所作用与帮助。如有不足之处欢迎指出,谢谢!

点击跳转到项目地址

关注

怪谈时间到了

支持一下
赞赏是一门艺术