Android中ConstraintLayout约束布局使用详解

Android中ConstraintLayout约束布局使用详解

ConstraintLayout是Android中最强大灵活的布局之一，它通过约束关系来定位和排列视图，通过纯XML实现复杂的布局效果，而无需多层嵌套，这大大提高了布局性能。

一、基本约束定位

1. 相对父容器定位

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="按钮"
    app:layout_constraintStart_toStartOf="parent"  <!-- 左侧对齐父容器左侧 -->
    app:layout_constraintTop_toTopOf="parent"/>   <!-- 顶部对齐父容器顶部 -->

2. 相对其他视图定位

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="按钮1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="按钮2"
    app:layout_constraintStart_toEndOf="@id/button1"  <!-- 左侧在button1右侧 -->
    app:layout_constraintTop_toTopOf="@id/button1"/> <!-- 顶部与button1对齐 -->

二、居中定位

1. 水平居中

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="水平居中"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

2. 垂直居中

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="垂直居中"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"/>

3. 完全居中

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="完全居中"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"/>

三、偏移定位（Bias）

当视图在两个方向上都有约束时，可以使用bias属性设置偏移比例（0.0-1.0）

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="偏移按钮"
    app:layout_constraintHorizontal_bias="0.3"  <!-- 水平方向30%位置 -->
    app:layout_constraintVertical_bias="0.7"    <!-- 垂直方向70%位置 -->
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"/>

四、尺寸控制

1. 匹配约束（类似match_parent但更灵活）

<Button
    android:layout_width="0dp"  <!-- 相当于match_constraint -->
    android:layout_height="wrap_content"
    android:text="匹配约束宽度"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

2. 比例尺寸

<ImageView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="H,16:9"  <!-- 高:宽=16:9 -->
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

3. 最大最小尺寸

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="有限制按钮"
    app:layout_constraintWidth_min="100dp"
    app:layout_constraintWidth_max="200dp"/>

五、链（Chains）布局

链是一组通过双向连接约束关联在一起的视图

1. 创建水平链

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="按钮1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toStartOf="@id/button2"
    app:layout_constraintHorizontal_chainStyle="spread"/>

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="按钮2"
    app:layout_constraintStart_toEndOf="@id/button1"
    app:layout_constraintEnd_toStartOf="@id/button3"/>

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="按钮3"
    app:layout_constraintStart_toEndOf="@id/button2"
    app:layout_constraintEnd_toEndOf="parent"/>

2. 链式样式

• spread：均匀分布（默认）
• spread_inside：两端不留空间
• packed：所有视图打包在一起

六、辅助工具类

1. Guideline（参考线）

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.3"/>  <!-- 30%位置 -->

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="对齐参考线"
    app:layout_constraintStart_toStartOf="@id/guideline"/>

2. Barrier（屏障）

<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="button1,button2"/>

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="按钮3"
    app:layout_constraintStart_toEndOf="@id/barrier"/>

3. Group（视图组）

<androidx.constraintlayout.widget.Group
    android:id="@+id/group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="button1,button2,button3"/>

<!-- 可以通过代码控制整个组的可见性 -->
group.setVisibility(View.VISIBLE);

七、实际应用示例

登录表单布局

<EditText
    android:id="@+id/username"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="用户名"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.8"
    android:layout_marginTop="32dp"/>

<EditText
    android:id="@+id/password"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="密码"
    android:inputType="textPassword"
    app:layout_constraintStart_toStartOf="@id/username"
    app:layout_constraintEnd_toEndOf="@id/username"
    app:layout_constraintTop_toBottomOf="@id/username"
    app:layout_constraintWidth_percent="0.8"
    android:layout_marginTop="16dp"/>

<Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="登录"
    app:layout_constraintStart_toStartOf="@id/password"
    app:layout_constraintEnd_toEndOf="@id/password"
    app:layout_constraintTop_toBottomOf="@id/password"
    android:layout_marginTop="24dp"/>