在 ConstraintLayout 中自动调整限制

Question

我有一个ConstraintLayout 的表格，如下所示：

“全名”和“密码”在其右边缘对齐，“全名”提供距ConstraintLayout 的边距：

到目前为止一切都很好，但我想知道如何正确处理需要以编程方式更改这些文本的情况。如果“全名”变大或变小，“密码”将保持对齐：

但是如果“密码”改变了它的大小，它就会离开屏幕：

我尝试使用Barrier 来获取“全名”和“密码”的左边缘，但我无法让它工作，我认为Barrier 只能与其他元素和不要将屏障的元素与边缘对齐（如果我错了，请纠正我）。

这个案例对我来说特别重要，以避免为“全名”和“密码”的翻译可能会改变它们的大小并导致文本超出屏幕的语言制作几种不同的布局。

那么，如果“全名”和“密码”的文本发生变化，并且如图所示，EditTexts 也扩展到其右边缘，我该如何避免它们离开屏幕？

Answer 1

这是对ConstraintLayout 的有趣测试。以下布局适用于版本 1.1.2 和 1.1.3，但未在其他版本中测试。

关键是将全名和密码字段的结尾相互约束，并将它们的开头约束到父字段的开头。将水平偏移设置为1.0 以使两个字段右对齐。

我想知道循环引用（end end）是否会愉快地解决，并且确实如此。我现在想知道这个解决方案是否恰好可以工作，但可能会在未来的版本中中断。

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/fullName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="50dp"
        android:text="Full Name"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintEnd_toEndOf="@+id/password"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="24dp"
        android:text="Password is longer"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintEnd_toEndOf="@id/fullName"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/fullName" />

    <View
        android:id="@+id/view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintBottom_toBottomOf="@id/fullName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/fullName"
        app:layout_constraintTop_toTopOf="@id/fullName" />

    <View
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintBottom_toBottomOf="@id/password"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/password"
        app:layout_constraintTop_toTopOf="@id/password" />

</androidx.constraintlayout.widget.ConstraintLayout>

这是第二次使用循环引用。障碍放置在文本字段的右侧，并且这些相同字段的末端与障碍相关联。 1.0 的水平偏差右对齐文本。屏幕截图看起来和上面一样，所以我不会在这里复制它们。

我认为这种方法更可取，恕我直言，不太可能破坏。

activity_main2.xml

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/fullName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="50dp"
        android:text="Full Name"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintEnd_toEndOf="@+id/barrier"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="24dp"
        android:text="Password is longer"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintEnd_toStartOf="@id/barrier"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/fullName" />

    <View
        android:id="@+id/view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintBottom_toBottomOf="@id/fullName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/barrier"
        app:layout_constraintTop_toTopOf="@id/fullName" />

    <View
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintBottom_toBottomOf="@id/password"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/barrier"
        app:layout_constraintTop_toTopOf="@id/password" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="fullName,password" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

TableLayout 比 ConstraintLayout 在你的情况下更好，布局可能是这样的：

<TableLayout android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="24dp"
    android:stretchColumns="1">
    <TableRow>
        <TextView android:gravity="end"
            android:text="Full Name"/>
        <EditText/>
    </TableRow>
    <TableRow>
        <TextView android:gravity="end"
            android:text="Password"/>
        <EditText/>
    </TableRow>
</TableLayout>

当您更改两个TextView 之一时，它们将再次自动对齐。