什么是ConstraintLayout

ConstraintLayout又称约束布局,是当前Google主推的布局,支持RelativeLayout的所有特性,功能上更加强大.其最大好处是大幅减少布局嵌套层次,提升界面绘制速度.但须知道,事物都有两面性,强大的另外一面是复杂.

基础样例

1. 单控件相对于父控件定位

效果图

代码

<androidx.constraintlayout.widget.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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="居中文本"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

代码说明:

app:layout_constraintBottom_toBottomOf,设置当前控件底部和目标控件底部对齐.
app:layout_constraintLeft_toLeftOf,设置当前控件左侧和目标控件左侧对齐.
app:layout_constraintRight_toRightOf,设置当前控件右侧和目标控件右侧对齐.
app:layout_constraintTop_toTopOf,设置当前控件顶部和目标控件顶部对齐.

布局界面预览图上图中的每一个实心圆点及圆点上连接的弹簧对应上面每一个属性: 左侧对应: app:layout_constraintLeft_toLeftOf; 右侧对应: app:layout_constraintRight_toRightOf; 上面对应: app:layout_constraintTop_toTopOf 下面对应: app:layout_constraintBottom_toBottomOf

2. 相对同级兄弟控件对齐

设置本控件的一侧和目标控件(同级兄弟控件)的同侧对齐,如左侧对齐、右侧对齐.

效果图

代码

<androidx.constraintlayout.widget.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/centerButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="居中按钮"
        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="左侧按钮"
        app:layout_constraintBottom_toBottomOf="@id/centerButton"
        app:layout_constraintRight_toLeftOf="@id/centerButton" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右侧按钮"
        app:layout_constraintBottom_toBottomOf="@id/centerButton"
        app:layout_constraintLeft_toRightOf="@id/centerButton" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="上面按钮"
        app:layout_constraintBottom_toTopOf="@id/centerButton"
        app:layout_constraintLeft_toLeftOf="@id/centerButton" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="下面按钮"
        app:layout_constraintLeft_toLeftOf="@id/centerButton"
        app:layout_constraintTop_toBottomOf="@id/centerButton" />
</androidx.constraintlayout.widget.ConstraintLayout>

代码说明:

app:layout_constraintRight_toLeftOf,设置当前控件右侧和目标控件左侧对齐(parent表示父控件).
app:layout_constraintLeft_toRightOf,设置当前控件左侧和目标控件右侧对齐.
app:layout_constraintBottom_toTopOf,设置当前控件底部和目标控件顶部对齐.
app:layout_constraintTop_toBottomOf,设置当前控件顶部和目标控件底部对齐.

布局界面预览图每个控件上的两个实心圆点对应控件里设置的两个constraint属性.

基础样例完整源代码

gitee.com/hspbc/Const…

常用属性说明

属性名	用途
android:layout_width	设置控件宽度,可设置为:match_parent(和父控件一样),wrap_content(按照内容自动伸缩),设置固定值(如200dp)
android:layout_height	设置控件高度,可设置为:match_parent(和父控件一样),wrap_content(按照内容自动伸缩),设置固定值(如200dp)
android:background	设置背景,可以是色值(如#FF0000)或图片等
android:visibility	可选值: visible(显示), invisible(隐藏,但是仍占据UI空间),gone(隐藏,且不占UI空间)
app:layout_constraintBottom_toBottomOf	设置当前控件底部和目标控件底部对齐.
app:layout_constraintLeft_toLeftOf	设置当前控件左侧和目标控件左侧对齐.
app:layout_constraintRight_toRightOf	设置当前控件右侧和目标控件右侧对齐.
app:layout_constraintTop_toTopOf	设置当前控件顶部和目标控件顶部对齐.
app:layout_constraintRight_toLeftOf	设置当前控件右侧和目标控件左侧对齐.
app:layout_constraintLeft_toRightOf	设置当前控件左侧和目标控件右侧对齐.
app:layout_constraintBottom_toTopOf	设置当前控件底部和目标控件顶部对齐.
app:layout_constraintTop_toBottomOf	设置当前控件顶部和目标控件底部对齐.

更多属性及实际效果,可以在开发工具里自行体验.

关于我

厦门大学计算机专业|华为八年高级工程师
十年软件开发经验，5年编程培训教学经验
目前从事编程教学，软件开发指导，软件类毕业设计指导。
所有编程资料及开源项目见juejin.cn/post/700279…

安卓开发入门教程-常用布局_ConstraintLayout