Android ConstraintLayout 约束布局

一、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"><TextViewandroid: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"><TextViewandroid: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" /><TextViewandroid: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"><TextViewandroid: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" /><TextViewandroid: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>