Автоматическая настройка лимитов в ConstraintLayout

Question

У меня есть форма как ConstraintLayout, например:

«Полное имя» и «Пароль» выровнены по правому краю, а «Полное имя» обеспечивает поле от ConstraintLayout:

Пока все в порядке, но мне интересно, как правильно обрабатывать случай, когда мне нужно программно изменить эти тексты. Если «Полное имя» станет больше или меньше, «Пароль» останется выровненным:

НО, если «Пароль» изменит свой размер, он выйдет из экрана:

Я пытался использовать Barrier, чтобы получить левый край как "Полного имени", так и "Пароля", но я не смог заставить его работать, я думаю, что Barrier может относиться только к другим элементам и не выравнивать элементы барьера по краям (поправьте меня, если я ошибаюсь, пожалуйста).

Этот случай особенно важен для меня, чтобы не создавать несколько разных макетов для языков, в которых перевод «ФИО» и «Пароль» может изменить их размеры и вывести текст из экрана.

Итак, как я могу избежать выхода "Полного имени" и "Пароля" из экрана, если их текст изменяется, а также с расширением EditText к правому краю, как на рисунке?

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 они снова автоматически выровняются.