Android ConstraintLayout 约束布局

目录

1）ConstraintLayout 约束布局是什么？为什么使用？
2）如何使用
3）可见性改变后的行为处理
4）图形化界面的一些工具介绍
5）Chains ( 链 )

一、ConstraintLayout 约束布局是什么

ConstraintLayout 是一个灵活且强大的布局容器，用于在 Android 应用程序中创建复杂的用户界面。并且该布局可以只有一层嵌套 , 解决了布局嵌套过多问题 , 减少了界面绘制的时间 ;

二、如何使用

推荐图形化界面+代码的方式一起。

2.1约束的基本使用

在 ConstraintLayout 中 设置 View 的位置 , 至少为 该 View 设置 一个垂直 和 一个水平 约束 ;

可以看到四个方向有四个小白圆圈，就是用于设置约束的。可以通过拖动设置约束

设置以后，它就是小实心圆圈

<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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".hilt.MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"  设置组件的 Bottom ( 底部 ) 位置的约束
        app:layout_constraintEnd_toEndOf="parent" 设置组件的 End ( 右部 ) 位置的约束 
        app:layout_constraintStart_toStartOf="parent" 设置组件的 Start ( 左部 ) 位置的约束 
        app:layout_constraintTop_toTopOf="parent" />设置组件的 Top ( 顶部 ) 位置的约束 
</androidx.constraintlayout.widget.ConstraintLayout>

2.2 相对定位约束

相对定位的意思，就是相对于某个控件，如果这个控件移动，那么也会跟着移动。如下这一种曲线，就是相对定位。

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".hilt.MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.575"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="56dp"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/textView" 将 被约束组件 的 结束 约束到 目标组件 的 开始
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.367" />
</androidx.constraintlayout.widget.ConstraintLayout>

可以设置的属性非常多

//将 被约束组件 的 左侧 约束到 目标组件 的左侧
layout_constraintLeft_toLeftOf
//将 被约束组件 的 左侧 约束到 目标组件 的右侧
layout_constraintLeft_toRightOf

//将 被约束组件 的 右侧 约束到 目标组件 的左侧
layout_constraintRight_toLeftOf
//将 被约束组件 的 右侧 约束到 目标组件 的右侧
layout_constraintRight_toRightOf
...

2.3 基线约束

用于文本对齐 , 如果两个视图中有 文字 , 可以使用基线约束将两个视图中的文本进行对齐操作 ;

以前我们定义的控件，可能大小不一样，导致文字老是对齐不了，或者对齐起来很麻烦，那么我们就可以使用基线约束。

（1）右键控件，点击show Baseline


可以看到文字下方就会显示出一个白色矩形，然后拖动它连接到另外一个控件的文字底部，就会实现文字对齐。

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".hilt.MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintBaseline_toBaselineOf="@+id/textView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.592"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="100dp"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.318" />
</androidx.constraintlayout.widget.ConstraintLayout>

三、可见性改变后的行为处理

如果说，当一个控件被GONE时，那么被约束的控件的位置会怎么样？

1. Margin 置 0 : 该组件所有方向的 Margin 属性都被设置成 0 ; 即 下面 的 6 种 Margin 属性清零 ;
2. 约束保留 : 该组件 四个方向的约束 仍然有效 , 其所在位置不会改变 ;
3. 尺寸修改 : 该组件的宽高尺寸会被设置成 0 , 即 该组件收缩成一个点 ;

可以看到位置还是保持不变，但由于大小变了，所以相对应也会被抬高.

四、工具栏介绍

（1）第一个：删除所有约束布局
（2）第二个：自动推断要添加的约束

（3）第三个：自动横向，竖向拉伸

（3）第四个：设置对齐方式

（5）第五个：增加辅助工具，引导线，用于控件的参考对象

五、Chains ( 链 )

Chains ( 链 )的功能，就是控制一组控件，只能垂直，或者水平移动，如果设置了垂直，就不能水平移动，也就是不能左右移动。

比如我们设置以后，只能垂直方向，那么我们就可以设置它的权重。为什么可以设置权重呢，因为这个方向已经不能移动。