4. ConstraintLayout 登录表单布局

ConstraintLayout 登录表单布局

登录表单的典型结构是：用户名输入框、密码输入框、登录按钮，以及可选的标题和辅助链接。使用 ConstraintLayout 时，核心思路不是“从上到下依次摆放”，而是为每个控件建立水平居中约束和垂直链式约束，再通过宽度约束（0dp + 左右约束）实现响应式拉伸。

布局实现要点

下面给出完整的 XML 布局文件，可直接放入 res/layout/activity_login.xml。所有控件均使用 0dp 宽度配合左右约束，保证在 320dp 小屏到 600dp 大屏上都能正确拉伸。

<?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="24dp">

    <EditText
        android:id="@+id/etUsername"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="请输入用户名"
        android:inputType="text"
        android:minHeight="48dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/etPassword"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintVertical_bias="0.5" />

    <EditText
        android:id="@+id/etPassword"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="请输入密码"
        android:inputType="textPassword"
        android:minHeight="48dp"
        android:layout_marginTop="16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/etUsername"
        app:layout_constraintBottom_toTopOf="@id/btnLogin" />

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="登录"
        android:minHeight="48dp"
        android:layout_marginTop="24dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/etPassword"
        app:layout_constraintBottom_toTopOf="@id/tvForgot" />

    <TextView
        android:id="@+id/tvForgot"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="忘记密码？"
        android:padding="8dp"
        android:layout_marginTop="16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btnLogin"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

响应式行为验证

将上述布局分别运行在以下三种屏幕宽度下，观察约束是否按预期工作：