Android登录页布局求助：用户名与密码文本位置不一致

针对用户名和密码文本位置不一致的问题，推荐使用ConstraintLayout实现精确对齐，以下是优化后的完整布局代码：

<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_username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="用户名"
        android:textSize="16sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintMarginTop="64dp"/>

    <!-- 用户名输入框 -->
    <EditText
        android:id="@+id/et_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入用户名"
        android:inputType="textEmailAddress|textPersonName"
        android:background="@drawable/edittext_border"
        android:paddingHorizontal="12dp"
        android:paddingVertical="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_username"
        app:layout_constraintMarginTop="8dp"/>

    <!-- 密码标签 -->
    <TextView
        android:id="@+id/tv_password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="密码"
        android:textSize="16sp"
        app:layout_constraintStart_toStartOf="@id/tv_username"
        app:layout_constraintTop_toBottomOf="@id/et_username"
        app:layout_constraintMarginTop="16dp"/>

    <!-- 密码输入框 -->
    <EditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入密码"
        android:inputType="textPassword"
        android:background="@drawable/edittext_border"
        android:paddingHorizontal="12dp"
        android:paddingVertical="8dp"
        app:layout_constraintStart_toStartOf="@id/et_username"
        app:layout_constraintTop_toBottomOf="@id/tv_password"
        app:layout_constraintMarginTop="8dp"/>

    <!-- 登录按钮 -->
    <Button
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="登录"
        android:textSize="16sp"
        android:backgroundTint="#2196F3"
        android:textColor="@android:color/white"
        app:layout_constraintTop_toBottomOf="@id/et_password"
        app:layout_constraintMarginTop="24dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

关键优化点 #

• 利用ConstraintLayout的约束关系，让密码标签与用户名标签左对齐（app:layout_constraintStart_toStartOf="@id/tv_username"），输入框同理，彻底解决位置错位问题
• 统一设置控件间距（标签与输入框间距8dp，输入框与下一个标签间距16dp），保证布局规整
• 给输入框添加统一的边框样式（需在drawable目录下创建edittext_border.xml），提升视觉一致性：

<!-- drawable/edittext_border.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white"/>
    <stroke android:width="1dp" android:color="#E0E0E0"/>
    <corners android:radius="4dp"/>
</shape>

视觉体验优化 #

• 给登录区域添加独立背景：将输入框和按钮包裹在CardView中，设置圆角和阴影，与页面背景区分开，提升层次感
• 区分文字权重：标签文字用#333333深灰色，输入框hint用#9E9E9E浅灰色，按钮用主色调，建立清晰的视觉层级
• 统一控件尺寸：输入框和按钮设置相同的圆角半径，保证风格统一

交互体验增强 #

• 添加密码可见切换：在密码输入框右侧添加图标，点击切换密码的显示/隐藏状态，核心代码示例：

EditText passwordEt = findViewById(R.id.et_password);
ImageView togglePwdIv = findViewById(R.id.iv_toggle_pwd);
togglePwdIv.setOnClickListener(v -> {
    int inputType = passwordEt.getInputType();
    if ((inputType & InputType.TYPE_TEXT_VARIATION_PASSWORD) == InputType.TYPE_TEXT_VARIATION_PASSWORD) {
        passwordEt.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
        togglePwdIv.setImageResource(R.drawable.ic_visibility);
    } else {
        passwordEt.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
        togglePwdIv.setImageResource(R.drawable.ic_visibility_off);
    }
    passwordEt.setSelection(passwordEt.getText().length());
});

• 输入验证反馈：点击登录时检查输入是否为空或格式错误，在输入框下方显示红色提示文字，同时更改输入框边框颜色为红色
• 按钮状态管理：输入为空时，登录按钮置灰且不可点击；输入符合要求时，恢复可点击状态

输入效率提升 #

• 开启自动填充：给输入框添加android:importantForAutofill="yes"，支持Android系统的自动填充用户名/密码功能
• 添加一键清除：在输入框右侧添加清除图标，点击清空输入内容
• 软键盘适配：设置用户名输入框的android:imeOptions="actionNext"、密码输入框的android:imeOptions="actionDone"，方便用户快速切换输入

无障碍支持 #

• 给所有控件添加android:contentDescription，例如：android:contentDescription="用户名输入框"，方便屏幕阅读器识别
• 保证文字大小不小于14sp，确保小屏幕下的可读性

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