如何在ConstraintLayout中垂直对齐按钮并匹配输入框布局？

嘿，我来帮你搞定这个登录界面的布局问题！从你的描述和代码来看，主要是两个按钮的约束设置不对，咱们一步步调整就能搞定：

核心修改思路 #

• 让「忘记密码」按钮和上方的TextInputLayout左对齐：把它的起始约束从父布局改成和最下方的输入框对齐，不用手动算margin，能完美适配不同屏幕
• 让「登录」按钮垂直对齐在「忘记密码」按钮下方：给「登录」按钮绑定和「忘记密码」按钮相同的起始约束，同时把顶部约束锚定到「忘记密码」按钮的底部，加上合适的间距

修改后的完整XML代码 #

<android.support.constraint.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=".RegisterActivity">

    <include layout="@layout/app_bar_layout" android:id="@+id/login_toolbar"/>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInputLayout2"
        android:layout_width="368dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="200dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInputLayout3"
        android:layout_width="368dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textInputLayout2">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/login_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Email"
            android:inputType="textEmailAddress"
            android:text="@string/email" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInputLayout4"
        android:layout_width="368dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textInputLayout3">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/login_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:inputType="textPassword"/>
    </android.support.design.widget.TextInputLayout>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="60dp"
        android:text="Login to your Account"
        android:textAllCaps="false"
        android:textAppearance="@style/TextAppearance.AppCompat.Headline"
        app:layout_constraintBottom_toTopOf="@+id/textInputLayout2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.503"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/login_forgot_password_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:background="@color/colorAccent"
        android:padding="16dp"
        android:text="@string/forgot_pass"
        android:textAllCaps="false"
        android:textColor="@android:color/white"
        <!-- 修改：和密码输入框左对齐，替代原有的父布局+固定margin -->
        app:layout_constraintStart_toStartOf="@+id/textInputLayout4"
        app:layout_constraintTop_toBottomOf="@+id/textInputLayout4" />

    <Button
        android:id="@+id/login_create_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:background="@color/colorPrimaryDark"
        android:text="@string/login"
        android:textAllCaps="false"
        android:textColor="@android:color/white"
        <!-- 修改：和忘记密码按钮左对齐，顶部锚定到忘记密码按钮底部 -->
        app:layout_constraintStart_toStartOf="@+id/login_forgot_password_btn"
        app:layout_constraintTop_toBottomOf="@+id/login_forgot_password_btn" />

</android.support.constraint.ConstraintLayout>

关键修改说明 #

1. 忘记密码按钮：
   • 删掉了android:layout_marginStart="116dp"这个固定间距
   • 把app:layout_constraintStart_toStartOf="parent"改成app:layout_constraintStart_toStartOf="@+id/textInputLayout4"，让它和密码输入框的左边完全对齐
2. 登录按钮：
   • 删掉了编辑器临时用的tools:layout_editor_absoluteX="148dp"（打包后无效）
   • 把顶部约束从输入框改成了app:layout_constraintTop_toBottomOf="@+id/login_forgot_password_btn"，让它紧跟在忘记密码按钮下方
   • 添加了app:layout_constraintStart_toStartOf="@+id/login_forgot_password_btn"，保证两个按钮垂直对齐

这样调整后，布局就会变得规整：忘记密码按钮和输入框左对齐，登录按钮在它正下方垂直排列，适配不同屏幕也不会错位啦！

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