Android ConstraintLayout 基础

- [屏障线 Barrier](#屏障线 Barrier)
- 设置水平和垂直方向的约束关系
参考地址

屏障线 Barrier

以下是使用 ConstraintLayout 在 Android 中实现简单屏障线（Barrier）使用的示例代码，主要步骤如下：

首先，在 Android 项目的布局 XML 文件中，将根布局设置为 ConstraintLayout。例如创建一个名为 activity_main.xml 的布局文件（以下代码基于 Kotlin 语言环境，Java 语言使用方式类似，只是语法上稍有不同）：

xml 复制代码

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- 创建两个视图，这里以两个 TextView 为例 -->
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView 1"
        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:text="TextView 2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textView1" />

    <!-- 创建屏障 -->
    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="textView1,textView2" />

    <!-- 再创建一个视图，让它根据屏障来布局 -->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintStart_toEndOf="@id/barrier"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget ConstraintLayout>

在上述代码中：

首先定义了两个 TextView（textView1 和 textView2），它们都是靠父布局左侧（start 侧）对齐并且垂直排列。
接着创建了一个 Barrier（barrier），通过 app:constraint_referenced_ids 属性指定它关联的视图为 textView1 和 textView2，app:barrierDirection="end" 表示这个屏障的方向是在关联视图的右侧（结束侧），会根据关联视图中最右侧的边界来确定自身位置。
最后创建了一个 Button，它的左侧（start 侧）通过 app:layout_constraintStart_toEndOf="@id/barrier" 约束到了这个屏障的右侧，这样按钮就会位于两个 TextView 的右侧，并且会随着 TextView 中靠右侧最远的那个视图位置变化而自适应位置。

https://www.jianshu.com/p/6ee3caaa4135

设置水平和垂直方向的约束关系

在XML布局文件中设置约束关系（静态方式）
- 水平方向约束关系 ：
  - 左对齐（start对齐） ：
    - 假设在ConstraintLayout中有一个TextView，要使其左边缘与父布局的左边缘对齐，可以这样设置：
    xml 复制代码
```
<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello"
    app:layout_constraintStart_toStartOf="parent"/>
```
    - 这里app:layout_constraintStart_toStartOf="parent"表示将textView的start（在从左到右的布局语言环境中相当于左侧）边缘与父布局（parent）的start边缘对齐。
  - 右对齐（end对齐） ：
    - 例如，要使一个Button的右边缘与父布局的右边缘对齐：
    xml 复制代码
```
<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click Me"
    app:layout_constraintEnd_toEndOf="parent"/>
```
    - 其中app:layout_constraintEnd_toEndOf="parent"用于将button的end（在从左到右的布局语言环境中相当于右侧）边缘与父布局的end边缘对齐。
  - 水平居中对齐 ：
    - 对于一个ImageView，要使其在父布局中水平居中，可以使用以下约束：
    xml 复制代码
```
<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>
```
    - 通过将imageView的start边缘与父布局的start边缘对齐，并且end边缘与父布局的end边缘对齐，就可以实现水平居中。
- 垂直方向约束关系 ：
  - 顶部对齐（top对齐） ：
    - 假设有一个EditText，要使其顶部边缘与父布局的顶部边缘对齐：
    xml 复制代码
```
<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"/>
```
    - 这里app:layout_constraintTop_toTopOf="parent"确保了editText的top边缘与父布局的top边缘对齐。
  - 底部对齐（bottom对齐） ：
    - 例如，使一个LinearLayout的底部边缘与父布局的底部边缘对齐：
    xml 复制代码
```
<LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"/>
```
    - 其中app:layout_constraintBottom_toBottomOf="parent"实现了linearLayout的bottom边缘与父布局的bottom边缘对齐。
  - 垂直居中对齐 ：
    - 对于一个View，要使其在父布局中垂直居中，可以这样设置：
    xml 复制代码
```
<View
    android:id="@+id/view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:licensePlateConstraintBottom_toBottomOf="parent"/>
```
    - 通过同时将view的top边缘与父布局的top边缘对齐，以及bottom边缘与父布局的bottom边缘对齐，实现垂直居中。

在Java代码中设置约束关系（动态方式）

使用ConstraintSet设置水平方向约束关系 ：

首先，在Activity的onCreate方法或者其他合适的方法中，获取ConstraintLayout和要设置约束的视图，以及创建ConstraintSet对象：

java 复制代码

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.constraintlayout.widget.ConstraintSet;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    private ConstraintLayout constraintLayout;
    private Button button;
    private ConstraintSet constraintSet;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        constraintLayout = findViewById(R.id.constraint_layout);
        button = findViewById(R.id.button);
        constraintSet = new ConstraintSet();
    }
}

左对齐（start对齐） ：
- 假设要将button的start边缘与父布局的start边缘对齐，可以这样设置：
java 复制代码
```
constraintSet.clone(constraintLayout);
constraintSet.connect(button.getId(), ConstraintSet.START, ConstraintLayout.LayoutParams.PARENT_ID, ConstraintSet.START);
constraintSet.applyTo(constraintLayout);
```
- 首先通过constraintSet.clone(constraintLayout)克隆当前布局的约束集。然后使用constraintSet.connect方法，将button的START（左侧）约束连接到父布局（ConstraintLayout.LayoutParams.PARENT_ID）的START边缘。最后通过constraintSet.applyTo(constraintLayout)将修改后的约束应用到布局中。
右对齐（end对齐） ：
- 要将button的end边缘与父布局的end边缘对齐，可以使用以下代码：
java 复制代码
```
constraintSet.clone(constraintLayout);
constraintSet.connect(button.getId(), ConstraintSet.END, ConstraintLayout.LayoutParams.PARENT_ID, ConstraintSet.END);
constraintSet.applyTo(constraintLayout);
```
- 这里的逻辑与左对齐类似，只是将连接的方向改为END（右侧）。

水平居中对齐 ：

若要使button在父布局中水平居中，可以这样设置：

java 复制代码

constraintSet.clone(constraintLayout);
constraintSet.connect(button.getId(), ConstraintSet.START, ConstraintLayout.LayoutParams.PARENT_ID, ConstraintSet.START);
constraintSet.connect(button.getId(), ConstraintSet.END, ConstraintLayout.LayoutParams.PARENT_ID, ConstraintSet.END);
constraintSet.applyTo(constraintLayout);

通过同时将button的START和END边缘分别与父布局的START和END边缘连接，实现水平居中。

使用ConstraintSet设置垂直方向约束关系 ：
- 顶部对齐（top对齐） ：
  - 假设要将button的top边缘与父布局的top边缘对齐，可以这样设置：
  java 复制代码
```
constraintSet.clone(constraintLayout);
constraintSet.connect(button.getId(), ConstraintSet.TOP, ConstraintLayout.LayoutParams.PARENT_ID, ConstraintSet.TOP);
constraintSet.applyTo(constraintLayout);
```
  - 首先克隆约束集，然后使用connect方法将button的TOP（顶部）约束连接到父布局的TOP边缘，最后应用修改后的约束。
- 底部对齐（bottom对齐） ：
  - 要将button的bottom边缘与父布局的bottom边缘对齐，可以使用以下代码：
  java 复制代码
```
constraintSet.clone(constraintLayout);
constraintSet.connect(button.getId(), ConstraintSet.BOTTOM, ConstraintLayout.LayoutParams.PARENT_ID, ConstraintSet.BOTTOM);
constraintSet.applyTo(constraintLayout);
```
  - 这里的逻辑与顶部对齐类似，只是将连接的方向改为BOTTOM（底部）。
- 垂直居中对齐 ：
  - 若要使button在父布局中垂直居中，可以这样设置：
  java 复制代码
```
constraintSet.clone(constraintLayout);
constraintSet.connect(button.getId(), ConstraintSet.TOP, ConstraintLayout.LayoutParams.PARENT_ID, ConstraintSet.TOP);
constraintSet.connect(button.getId(), ConstraintSet.BOTTOM, ConstraintLayout.LayoutParams.PARENT_ID, ConstraintSet.BOTTOM);
constraintSet.applyTo(constraintLayout);
```
  - 通过同时将button的TOP和BOTTOM边缘分别与父布局的TOP和BOTTOM边缘连接，实现垂直居中。

参考地址

豆包AI