当您想要对齐但不确定子部件大小时如何最好地使用 ConstraintLayout

Question

我正在尝试创建此布局：

我的标准是：

我希望标签相对于彼此右对齐，但在父项中左对齐（带边距）。
我希望 EditText 项目填充剩余的 space
文本与基线对齐

知道 EditText 小部件比 TextView 小部件高，并且“密码”比“登录”宽，我能够想出这个布局：

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/login"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="8dp"
            android:autofillHints="login"
            android:hint="@string/user_name_hint"
            android:inputType="textPersonName"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/textView"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="48dp"
            android:text="@string/login"
            app:layout_constraintBaseline_toBaselineOf="@+id/login"
            app:layout_constraintStart_toStartOf="parent" />

        <EditText
            android:id="@+id/password"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="16dp"
            android:ems="10"
            android:hint="@string/password_hint"
            android:inputType="textPassword"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/login"
            app:layout_constraintTop_toBottomOf="@+id/login"
            android:autofillHints="password" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
            android:text="@string/password"
            app:layout_constraintBaseline_toBaselineOf="@+id/password"
            app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

但我意识到这取决于无效的假设。实现此布局的“正确”方法是什么？

（我意识到如果使用 GridLayout 这几乎是微不足道的，但我正在尝试学习使用 ConstraintLayout。

Answer 1

试试下面的布局。我在两个 TextViews 的末端创建了一个屏障，并将它们的末端限制在屏障内。开始仅限于父开始。偏差设置为 1.0 以将两者都向右移动。这应该给你 right-justified 文本。（您可能需要更高版本的 ConstraintLayout 才能工作；我使用的是 2.1.3 版）

EditTexts 的布局很简单。

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/loginLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="@string/login"
        app:layout_constraintBaseline_toBaselineOf="@+id/login"
        app:layout_constraintEnd_toStartOf="@id/barrier"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/passwordLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="@string/password"
        app:layout_constraintBaseline_toBaselineOf="@+id/password"
        app:layout_constraintEnd_toStartOf="@id/barrier"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent" />

    <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="loginLabel,passwordLabel" />

    <EditText
        android:id="@+id/login"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="8dp"
        android:autofillHints="login"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/password"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="16dp"
        android:autofillHints="password"
        android:ems="10"
        android:inputType="textPassword"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/barrier"
        app:layout_constraintTop_toBottomOf="@+id/login" />

</androidx.constraintlayout.widget.ConstraintLayout>

可能有更简单的方法来完成这一切，但我现在还没有想到。

当您想要对齐但不确定子部件大小时如何最好地使用 ConstraintLayout

How best to use ConstraintLayout when you want alignment but are unsure of the child widget sizes

android

android-constraintlayout