Android ConstraintLayout 约束布局的使用手册

传统的布局容易在版本迭代过程中，造成页面层级过多的问题（俄罗斯套娃），一是对页面渲染有影响，二是不利于开发者的后期维护。RelativeLayout能够在一定层度上减少页面层级，但是其不够灵活，不支持百分比，而ConstraintLayout功能则类似于加强版的相对布局，可以轻松的完成其他布局不好实现的一些布局效果，因此我们要学习它的使用方法。

二、ConstraintLayout使用步骤

1、引入库

早期创建项目需要手动引入，现在官方已经自动引入。

implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

2、基本使用，实现按钮居中。相对于父布局的约束。

创建一个layout布局后，根布局为android.support.constraint.ConstraintLayout。添加一个Button后，为Button增加水平和垂直约束条件，约束对象为父布局：

layout_constraintBottom_toBottomOf           底部约束
layout_constraintTop_toTopOf                 顶部约束
layout_constraintStart_toStartOf             左边约束
layout_constraintEnd_toEndOf                 右边约束

由此，Button的上下左右，都以父布局为约束，即可实现Button的居中展示。代码如下：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <Button
        android:id="@+id/button3"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
</android.support.constraint.ConstraintLayout>

3、A Button 居中展示，B Button展示在A Button正下方（距离A 46dp）。相对于兄弟控件的约束。

A Button居中后，垂直方向为B Button添加约束layout_constraintTop_toBottomOf，约束对象为A Button，水平方向约束条件参考A Button使之居中即可。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <Button
        android:id="@+id/buttonA"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="A Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
    <Button
        android:id="@+id/buttonB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="46dp"
        android:text="B Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonA" />
 
 
</android.support.constraint.ConstraintLayout>

效果图如下：

如果B Button的宽度和A Button的宽度一致如何实现呢？当然，我们可以在上边代码的基础上，将B的宽度写成200dp就可以实现，但是如果将来 A宽度修改了，那么B的宽度我们也需要修改一下。有没有简单的方式能让B的宽度同A的宽度呢？当A宽度变化后，B宽度也随之变化。

我们调整一下B Button的宽度，使用ConstraintLayout的MATCH_CONSTRAINT属性，所谓MATCH_CONSTRAINT其实是将宽度或者高度设置成0dp来表示的，然后将B的约束条件由父布局调整为A Button，这样B的左边和A的左边对齐，B的右边和A的右边对齐，宽度因为是MATCH_CONSTRAINT的0dp，之后B的宽度将同A的宽度一样。代码如下：

    <Button
        android:id="@+id/buttonB"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="46dp"
        android:text="B Button"
        app:layout_constraintEnd_toEndOf="@+id/buttonA"
        app:layout_constraintStart_toStartOf="@+id/buttonA"
        app:layout_constraintTop_toBottomOf="@+id/buttonA" /&

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看