ConstraintLayout使用详解
前言
ConstraintLayout是Google在Google I/O 2016大会上发布的一种新的布局容器(ViewGroup)，它支持以灵活的方式来放置子控件和调整子控件的大小。ConstraintLayout功能强大，它能实现Android中传统的布局容器FrameLayout、LinearLayout和RelativeLayout所能实现的所有功能。我们可以使用ConstraintLayout来优化页面的布局层次。
为什么推荐使用ConstraintLayout
从Android Studio 2.3版本开始，创建Activity时的默认布局容器变为ConstraintLayout。为什么官方推荐使用ConstraintLayout呢？总结一下，主要有下面这三个原因：
- 减少布局层次。我们知道一个好的布局是浅而宽的，而不是窄而深的。布局层次越浅，即布局层次越少，那么UI测量和布局阶段所花费的时间就越少，UI的性能就越好。通常情况下，我们在使用传统布局容器来实现一些稍微复杂的页面时布局层次很容易就大于等于两层。ConstraintLayout支持构建复杂的页面布局，如果使用它作为页面的布局容器，基本上一层就足够了。
- 性能较好。Google的工程师测量过ConstraintLayout和RelativeLayout的性能，测量结果表明：ConstraintLayout在测量/布局阶段的性能比RelativeLayout大约高40%。
- 扩展性好。ConstraintLayout功能强大，当页面的需求发生变化时很方便进行修改和扩展。
准备工作
要在项目中使用ConstraintLayout，需要在模块的build.gradle文件中添加如下依赖：
dependencies {
...
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
}
如果项目还没有使用AndroidX，那么添加如下依赖：
dependencies {
...
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}
基本使用
ConstraintLayout的基本使用主要包括：
- 相对定位
- 外边距
- 尺寸约束
相对定位
相对定位是在ConstraintLayout中放置子控件所需要的必要也是最基本的操作。每个子控件都必须至少有两个约束关系：一个水平方向上的约束关系和一个垂直方向上的约束关系。 如果没有指定约束关系，那么子控件默认放置在父容器的左上角位置。约束关系可以相对于父容器也可以相对于兄弟控件。
ConstraintLayout的约束关系属性与RelativeLayout的属性很相似，可以对比学习：
- layout_constraintTop_toTopOf (约束子控件的顶部与父容器/兄弟控件的顶部对齐)
- layout_constraintTop_toBottomOf (约束子控件的顶部与父容器/兄弟控件的底部对齐)
- layout_constraintBottom_toTopOf (约束子控件的底部与父容器/兄弟控件的顶部对齐)
- layout_constraintBottom_toBottomOf (约束子控件的底部与父容器/兄弟控件的底部对齐)
- layout_constraintLeft_toLeftOf (约束子控件的左边与父容器/兄弟控件的左边对齐)
- layout_constraintLeft_toRightOf (约束子控件的左边与父容器/兄弟控件的右边对齐)
- layout_constraintRight_toLeftOf (约束子控件的右边与父容器/兄弟控件的左边对齐)
- layout_constraintRight_toRightOf (约束子控件的右边与父容器/兄弟控件的右边对齐)
- layout_constraintBaseline_toBaselineOf (约束子控件的文本基线与兄弟控件的文本基线对齐)
在控制子控件居中显示上，ConstraintLayout与通过单一属性来控制居中显示的RelativeLayout不同：水平方向上，当你同时设置了子控件的左边和右边的约束关系时，子控件将水平居中显示；垂直方向上，当你同时设置了子控件的顶部和底部的约束关系时，子控件将垂直居中显示。
相对定位的示例如下所示：
<androidx.constraintlayout.widget.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"
tools:context=".Demo01Activity">
<TextView
android:id="@+id/tv_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:text="TextView01"
android:textSize="24sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="@+id/tv_02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorPrimaryDark"
android:text="TextView02"
android:textSize="24sp"
app:layout_constraintTop_toBottomOf="@id/tv_01"
app:layout_constraintLeft_toRightOf="@id/tv_01" />
<TextView
android:id="@+id/tv_03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:text="TextView03"
android:textSize="24sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="@+id/tv_04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="32dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="TextView04"
android:textSize="32sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<TextView
android:id="@+id/tv_05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp"
android:background="@color/colorPrimaryDark"
android:gravity="center"
android:text="TextView05"
android:textSize="16sp"
app:layout_constraintBaseline_toBaselineOf="@id/tv_04"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/tv_04" />
androidx.constraintlayout.widget.ConstraintLayout>
显示效果如下图所示：
外边距
与所有的布局容器一样，ConstraintLayout中的子控件也支持设置外边距。不一样的地方是：要想某个方向上的外边距生效，必须设置了对应方向上的约束关系。 外边距的值只能大于或者等于0。
设置外边距的相关属性如下：
- android:layout_marginTop (设置顶部的外边距)
- android:layout_marginBottom (设置底部的外边距)
- android:layout_marginLeft (设置左边的外边距)
- android:layout_marginRight (设置右边的外边距)
ConstraintLayout还支持当约束关系中的兄弟控件GONE不可见时设置一个新的外边距。以前遇到这种需求时我们很可能需要在代码中设置一个新的外边距，现在有了这个功能就很方便了。相关属性如下：
- layout_goneMarginTop
- layout_goneMarginBottom
- layout_goneMarginLeft
- layout_goneMarginRight
外边距的示例如下所示：
<androidx.constraintlayout.widget.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"
tools:context=".Demo02Activity">
<TextView
android:id="@+id/tv_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="200dp"
android:layout_marginLeft="32dp"
android:padding="16dp"
android:background="@color/colorPrimary"
android:text="TextView01"
android:textSize="24sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="@+id/tv_02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="200dp"
android:layout_marginLeft="16dp"
android:padding="16dp"
android:background="@color/colorPrimaryDark"
android:text="TextView02"
android:textSize="24sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/tv_01" />
<TextView
android:visibility="gone"
android:id="@+id/tv_03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="400dp"
android:layout_marginLeft="32dp"
android:padding="16dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="TextView03"
android:textSize="24sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="@+id/tv_04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="400dp"
android:layout_marginLeft="16dp"
android:padding="16dp"
android:background="@color/colorPrimaryDark"
android:gravity="center"
android:text="TextView04"
android:textSize="24sp"
app:layout_goneMarginLeft="32dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/tv_03" />
androidx.constraintlayout.widget.ConstraintLayout>
显示效果如下图所示：
尺寸约束
ConstraintLayout有四种方式来控制子控件的尺寸：
- 设置为固定大小。例如：android:layout_width=“100dp”。
- 设置为wrap_content。例如：android:layout_height=“wrap_content”。
- 设置为0dp。此时，子控件的尺寸为满足约束关系的尺寸。在ConstraintLayout中不推荐使用match_parent。
- 设置宽高比。前提：子控件的宽/高至少有一个设置为0dp。通过layout_constraintDimensionRatio属性来设置宽高比。
尺寸约束的示例如下所示：
<androidx.constraintlayout.widget.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"
tools:context=".Demo03Activity">
<TextView
android:id="@+id/tv_01"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="120dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="TextView01"
android:textSize="24sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="@+id/tv_02"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="120dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="TextView02"
android:textSize="24sp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toBottomOf="@id/tv_01"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="@+id/tv_03"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_marginTop="120dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="TextView03"
android:textSize="24sp"
app:layout_constraintDimensionRatio="h,1:2"
app:layout_constraintTop_toBottomOf="@id/tv_02"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
androidx.constraintlayout.widget.ConstraintLayout>
显示效果如下图所示：
进阶使用
ConstraintLayout的进阶使用主要包括：
- 链 (Chain)
- 辅助工具
- 引导线 (Guideline)
- 屏障 (Barrier)
- 组 (Group)
链 (Chain)
水平/垂直方向上，一组子控件两两相互约束连接起来，那么它们被当作是一个链。链的第一个子控件称为链头。链可以实现一些特殊的效果，比如LinearLayout的按比例分布等。
链的相关属性如下：
- layout_constraintHorizontal_chainStyle (水平方向上链的样式)
- layout_constraintVertical_chainStyle (垂直方向上链的样式)
链的样式属性需要设置在链头上，它支持的值有三种：
- spread (默认值，子控件均匀展开显示)
- spread_inside (链头和链尾靠父容器显示，其它子控件均匀展开显示)
- packed (子控件挤在一起居中显示)
默认情况下，链在可用空间中均匀分布子控件。如果有子控件在水平(垂直)方向上设置宽(高)为0dp，那么可以通过layout_constraintHorizontal_weight (layout_constraintVertical_weight)属性来控制自己的分布比例。
链的示例如下所示：
<androidx.constraintlayout.widget.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"
tools:context=".Demo04Activity">
<TextView
android:id="@+id/tv_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="104dp"
android:background="@color/colorPrimary"
android:text="TextView01"
android:textSize="20sp"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/tv_02" />
<TextView
android:id="@+id/tv_02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="104dp"
android:background="@color/colorPrimaryDark"
android:text="TextView02"
android:textSize="20sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/tv_01"
app:layout_constraintRight_toLeftOf="@id/tv_03" />
<TextView
android:id="@+id/tv_03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="104dp"
android:background="@color/colorPrimary"
android:text="TextView03"
android:textSize="20sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/tv_02"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="@+id/tv_04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="208dp"
android:background="@color/colorPrimary"
android:text="TextView04"
android:textSize="20sp"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/tv_05" />
<TextView
android:id="@+id/tv_05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="208dp"
android:background="@color/colorPrimaryDark"
android:text="TextView05"
android:textSize="20sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/tv_04"
app:layout_constraintRight_toLeftOf="@id/tv_06" />
<TextView
android:id="@+id/tv_06"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="208dp"
android:background="@color/colorPrimary"
android:text="TextView06"
android:textSize="20sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/tv_05"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="@+id/tv_07"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="312dp"
android:background="@color/colorPrimary"
android:text="TextView07"
android:textSize="20sp"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/tv_08" />
<TextView
android:id="@+id/tv_08"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="312dp"
android:background="@color/colorPrimaryDark"
android:text="TextView08"
android:textSize="20sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/tv_07"
app:layout_constraintRight_toLeftOf="@id/tv_09" />
<TextView
android:id="@+id/tv_09"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="312dp"
android:background="@color/colorPrimary"
android:text="TextView09"
android:textSize="20sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/tv_08"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="@+id/tv_10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="416dp"
android:background="@color/colorPrimary"
android:text="TextView10"
android:textSize="20sp"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="0.25"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/tv_11" />
<TextView
android:id="@+id/tv_11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="416dp"
android:background="@color/colorPrimaryDark"
android:text="TextView11"
android:textSize="20sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/tv_10"
app:layout_constraintRight_toLeftOf="@id/tv_12" />
<TextView
android:id="@+id/tv_12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="416dp"
android:background="@color/colorPrimary"
android:text="TextView12"
android:textSize="20sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/tv_11"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="@+id/tv_13"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="520dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="TextView13"
android:textSize="20sp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/tv_14" />
<TextView
android:id="@+id/tv_14"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="520dp"
android:background="@color/colorPrimaryDark"
android:gravity="center"
android:text="TextView14"
android:textSize="20sp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/tv_13"
app:layout_constraintRight_toLeftOf="@id/tv_15" />
<TextView
android:id="@+id/tv_15"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="520dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="TextView15"
android:textSize="20sp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/tv_14"
app:layout_constraintRight_toRightOf="parent" />
androidx.constraintlayout.widget.ConstraintLayout>
显示效果如下图所示：
辅助工具
ConstraintLayout支持使用辅助工具来帮助你布局。注意：辅助工具只是用来辅助布局，最终并不会显示在界面上。
引导线 (Guideline)
你可以添加一条或者多条水平/垂直的引导线到ConstraintLayout中，在你布局时，可以把它们当作是兄弟控件来建立约束关系辅助你布局。ConstraintLayout支持按固定的距离或者百分比来定位引导线的位置。
引导线的相关属性如下：
- android:orientation (指定为水平/垂直方向)
- layout_constraintGuide_begin (与父容器的左边缘/顶部相距固定的距离)
- layout_constraintGuide_end (与父容器的右边缘/底部相距固定的距离)
- layout_constraintGuide_percent (父容器的宽度/高度的百分比)
屏障 (Barrier)
与引导线相同，屏障也是一条不可见的线。与引导线不同的是，屏障的位置是相对的，它会随着指定子控件的变化而移动。
屏障的相关属性如下：
- constraint_referenced_ids (引用的子控件)
- barrierDirection (与引用的子控件对齐的方向)
举个例子：当barrierDirection为right时，屏障的位置与所有引用的子控件的最右边缘对齐。当某个子控件的位置依赖于所有引用的子控件的最右边缘的位置，而最右边缘是动态可变的时候，使用屏障就非常方便了。例如下图所示：
组 (Group)
组可以用来同时控制一组子控件的可见性。当我们设置组的可见性时，可见性会同时作用于组所引用的所有子控件上。这个功能使用起来很方便，我们不用再一个个子控件地去设置可见性，或者用一个布局容器来同时设置它们的可见性。
组的相关属性如下：
- constraint_referenced_ids (引用的子控件)
辅助工具的示例如下所示：
<androidx.constraintlayout.widget.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"
tools:context=".Demo05Activity">
<androidx.constraintlayout.widget.Guideline
android:id="@+id/gl_01"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_begin="32dp" />
<TextView
android:id="@+id/tv_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="120dp"
android:background="@color/colorPrimary"
android:text="TextView01"
android:textSize="24sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/gl_01" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/gl_02"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6" />
<TextView
android:id="@+id/tv_02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="240dp"
android:background="@color/colorPrimary"
android:text="TextView02"
android:textSize="24sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/gl_02" />
<TextView
android:id="@+id/tv_03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="360dp"
android:background="@color/colorPrimary"
android:text="TextView03的文案"
android:textSize="20sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="@+id/tv_04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:background="@color/colorPrimary"
android:text="TextView04的文案文案"
android:textSize="20sp"
app:layout_constraintTop_toBottomOf="@id/tv_03"
app:layout_constraintLeft_toLeftOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="@+id/br_01"
android:layout_width="0dp"
android:layout_height="match_parent"
app:barrierDirection="right"
app:constraint_referenced_ids="tv_03,tv_04" />
<TextView
android:id="@+id/tv_05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="360dp"
android:background="@color/colorPrimaryDark"
android:text="TextView05"
android:textSize="24sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/br_01" />
<TextView
android:id="@+id/tv_06"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="600dp"
android:background="@color/colorPrimary"
android:text="TextView06"
android:textSize="20sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="@+id/tv_07"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorPrimaryDark"
android:text="TextView07"
android:textSize="20sp"
app:layout_constraintTop_toTopOf="@id/tv_06"
app:layout_constraintLeft_toRightOf="@id/tv_06" />
<TextView
android:id="@+id/tv_08"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:text="TextView08"
android:textSize="20sp"
app:layout_constraintTop_toTopOf="@id/tv_07"
app:layout_constraintLeft_toRightOf="@id/tv_07" />
<androidx.constraintlayout.widget.Group
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="tv_06,tv_07,tv_08" />
androidx.constraintlayout.widget.ConstraintLayout>
显示效果如下图所示：
总结
ConstraintLayout功能强大，支持构建复杂的页面布局。我们可以使用ConstraintLayout来优化页面的布局层次。
参考
- https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout
- https://developer.android.google.cn/training/constraint-layout
- 解析ConstraintLayout的性能优势