在ConstraintLayout中自动调整限制

Question

我有一个像ConstraintLayout的形式，像这样：

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

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

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

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

对于我来说，这种情况对于避免为“全名”和“密码”的翻译可以改变其大小并使文本从屏幕中移出的语言制作几种不同的布局尤为重要。

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

Answer 1

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

关键是将全名和密码字段的末尾限制在一起，并将它们的开头限制在父级的开头。将水平偏差设置为1.0，使两个字段右对齐。

我想知道循环引用（结束< - >结束）是否能够快乐地解决而且确实如此。我现在想知道这个解决方案是否恰好可行，但在将来的版本中可能会中断。

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中的一个时，它们将再次自动对齐。