Android Studio：ConstraintLayout的常用属性详解_android constraintlayout布局右上角

一、介绍

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

二、常用属性

2.1 相对布局

• 演示：按钮 B 放置在按钮 A 的右侧

  

引用id的另一个小部件，或者parent（将引用父容器）

<Button android:id="@+id/buttonA" ... />
         <Button android:id="@+id/buttonB" ...
                 app:layout_constraintLeft_toRightOf="@+id/buttonA" />
         

1
2
3
4
5

• 水平轴：左、右、起点和终点

• 纵轴：顶边、底边和文本基线

  

2.2 边距

如果设置了侧边距，它们将应用于相应的约束（如果存在），将边距强制为目标侧和源侧之间的空间。通常的布局边距属性可用于此效果

• goneMargin主要用于约束的控件可见性被设置为gone的时候使用的margin值

  属性	说明
  layout_goneMarginStart
  layout_goneMarginEnd
  layout_goneMarginLeft
  layout_goneMarginTop
  layout_goneMarginRight
  layout_goneMarginBottom

2.3 居中定位和偏差

居中

约束就像相反的力一样将小部件平均拉开；这样小部件最终将在父容器中居中。这同样适用于垂直约束

<android.support.constraint.ConstraintLayout ...>
             <Button android:id="@+id/button" ...
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintRight_toRightOf="parent/>
         </>

1
2
3
4
5
6

Bias

• layout_constraintHorizontal_bias : 水平方向偏移
• layout_constraintVertical_bias : 垂直方向偏移

下面将使左侧有 30% 的偏差而不是默认的 50%，这样左侧会更短，小部件更向左侧倾斜

<android.support.constraint.ConstraintLayout ...>
             <Button android:id="@+id/button" ...
                 app:layout_constraintHorizontal_bias="0.3"
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintRight_toRightOf="parent/>
         </>

1
2
3
4
5
6
7

圆形定位

<Button android:id="@+id/buttonA" ... />
  <Button android:id="@+id/buttonB" ...
      app:layout_constraintCircle="@+id/buttonA"
      app:layout_constraintCircleRadius="100dp"
      app:layout_constraintCircleAngle="45" />

1
2
3
4
5
6

2.4 尺寸约束

2.4.1 使用wrap_content，让控件自己计算大小

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

2.4.2 使用 0dp (MATCH_CONSTRAINT)

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

<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" />

1
2
3
4
5
6
7
8
9

宽度设为0dp，左右两边约束parent的左右两边，并设置左边边距为50dp

2.4.3 宽高比

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

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

<Button android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
         

1
2
3
4
5
6
7

2.4.4

• layout_constraintHeight_percent：高度百分比，占父类高度的百分比
• layout_constraintWidth_percent：宽度百分比，占父类宽度的百分比

<TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:text="constraintHeight"
        app:layout_constraintHeight_percent="0.2"
        app:layout_constraintWidth_percent="0.2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

1
2
3
4
5
6
7
8
9
10

2.5 链

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

<TextView
        android:id="@+id/TextView1"
        style="@style/ConSampleText"
        android:text="1111"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/TextView2"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintTop_toTopOf="parent" />

<TextView
        android:id="@+id/TextView2"
        style="@style/ConSampleText"
        android:text="2222"
        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"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintTop_toTopOf="parent" />

<TextView
        android:id="@+id/TextView3"
        style="@style/ConSampleText"
        android:text="3333"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintTop_toTopOf="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相互约束，两端两个TextView分别与parent约束，成为一条链，

2.6 权重链

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

    <TextView
            android:id="@+id/TextView4"
            android:background="@color/design_default_color_primary"
            android:text="444"
            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"
            app:layout_constraintTop_toBottomOf ="@id/TextView1"/>

    <TextView
            android:id="@+id/TextView5"
            android:background="@color/colorAccent"
            android:text="5555"
            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"
            app:layout_constraintTop_toBottomOf="@id/TextView1"/>

    <TextView
            android:id="@+id/TextView6"
            android:background="@color/blue"
            android:text="6666"
            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"
            app:layout_constraintTop_toBottomOf="@id/TextView1"/>


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

三、.辅助工具

3.1Guideline(指导线)

像辅助线一样，在预览的时候帮助你完成布局

    <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" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.2 Barrier

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

<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" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

3.3 Group

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

    <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" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

现在有3个并排的TextView，用Group把TextView1和TextView3归为一组，再设置这组控件的可见性，

   <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:constraint_referenced_ids="TextView1,TextView3" />

1
2
3
4
5
6
7

3.4 Placeholder

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

<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" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

新建一个Placeholder约束在屏幕的左上角，新建一个TextView约束在屏幕的右上角，在Placeholder中设置 app:content=“@+id/textview”，这时TextView会跑到屏幕的左上角

最后

如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。

如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。

相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。

全套视频资料：

一、面试合集

二、源码解析合集

三、开源框架合集

欢迎大家一键三连支持，若需要文中资料，直接扫描文末CSDN官方认证微信卡片免费领取↓↓↓

PS:群里还设有ChatGPT机器人，可以解答大家在工作上或者是技术上的问题