如何在Android Studio中用Constraint Layout的XML实现指定UI？

以下是基于Constraint Layout的完整XML实现示例，附带关键约束的说明，你可以根据实际UI细节调整控件属性和约束关系：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <!-- 顶部居中标题 -->
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="示例标题"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <!-- 中间内容区域（以输入框为例） -->
    <EditText
        android:id="@+id/et_content"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:hint="请输入内容"
        android:padding="8dp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toBottomOf="@id/tv_title"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <!-- 底部左侧按钮 -->
    <Button
        android:id="@+id/btn_cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="取消"
        android:layout_marginTop="24dp"
        app:layout_constraintTop_toBottomOf="@id/et_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.25"/>

    <!-- 底部右侧按钮 -->
    <Button
        android:id="@+id/btn_confirm"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="确认"
        android:layout_marginTop="24dp"
        app:layout_constraintTop_toBottomOf="@id/et_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.75"/>

</androidx.constraintlayout.widget.ConstraintLayout>

关键约束说明 #

• 水平居中：通过app:layout_constraintStart_toStartOf="parent"和app:layout_constraintEnd_toEndOf="parent"组合，实现控件在父布局水平居中。
• 垂直位置绑定：使用app:layout_constraintTop_toBottomOf="@id/xxx"，将当前控件的顶部绑定到目标控件的底部，实现垂直方向的有序排列。
• 底部固定：app:layout_constraintBottom_toBottomOf="parent"可将控件固定在父布局底部，配合layout_margin调整与底部的距离。
• 水平偏移：app:layout_constraintHorizontal_bias用于调整控件在水平约束范围内的位置（取值0-1，0为靠左，1为靠右）。

自定义调整提示 #

• 如果UI包含图片，添加<ImageView>控件，设置android:src或app:srcCompat属性，再用约束绑定到指定位置即可。
• 如需分割线，添加<View>控件，设置android:background="#E0E0E0"和android:layout_height="1dp"，通过约束定位到需要分割的区域之间。
• 所有layout_margin值可根据实际UI的留白需求调整，保证界面视觉舒适。

内容的提问来源于stack exchange，提问作者Kossy