Как макетировать ряд кнопок с ConstraintLayout

Question

В настоящее время я пытаюсь создать что-то, что, как я думал, должно быть довольно легко с ConstraintLayout, но после попытки я понял, что понятия не имею, как этого добиться.

Идея проста,разметка диалогового вида с использованием ConstraintLayout без вложенности.

XML для этого прост (см. ниже). Проблема возникает, когда я хотел сделать масштаб этого макета для более длинного текста на кнопках. Например, желаемый макет может выглядеть следующим образом:

В конечном итоге мне не удалось найти хорошее решение, которое может работать с:

• Краткий текст для обеих кнопок
• Длинный текст для одной из кнопок
• Длинный текст для другой кнопки
• Длинный текст для обеих кнопок.

Вот мой макет xml, если кто-то захочет поиграть с ним.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp">

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        android:paddingTop="24dp"
        tools:text="Some title"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <TextView
        android:id="@+id/body"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        android:paddingTop="8dp"
        tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus neque quis nunc ornare varius."
        app:layout_constraintTop_toBottomOf="@+id/title"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <Button
        android:id="@+id/negativeButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginStart="16dp"
        style="@style/Widget.AppCompat.Button.Borderless"
        tools:text="Cancel"
        app:layout_constrainedWidth="true"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/positiveButton"
        app:layout_constraintTop_toBottomOf="@+id/body"/>

    <Button
        android:id="@+id/positiveButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        style="@style/Widget.AppCompat.Button.Borderless.Colored"
        tools:text="Ok"
        app:layout_constrainedWidth="true"
        app:layout_constraintStart_toEndOf="@+id/negativeButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/negativeButton"
        app:layout_constraintBottom_toBottomOf="@+id/negativeButton"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Редактировать: Просто перечислить некоторые вещи, которые я пробовал (и не смог):

• layout_constraintWidth_percent
• layout_constraintHorizontal_weight

Edit2: просто чтобы добавить больше информации. Я пытаюсь сделать это как можно более универсальным, поскольку я хотел создать повторно используемый компонент. Поэтому он должен просто работать с текстом кнопки любой длины, а не только с конкретным текстом. В любом случае, это хорошая идея, поскольку локализация часто приводит к тому, что текст кнопки становится длиннее или короче.

Answer 1

Вы можете использовать инструкции, чтобы помочь в раскладке кнопок. Вы захотите ограничить крайнюю правую кнопку до правой направляющей и установить для этой направляющей значение около 0,90, а для левой части кнопки constraint_start - startOf parent. Ограничьте правую левую кнопку до начала правой кнопки.

Отрегулируйте поля в рекомендациях, чтобы учесть дополнительные требования к заполнению.

<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"
    xmlns:tools="http://schemas.android.com/tools"
    android:padding="10dp">
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_left_vertical"
        android:layout_width="2dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.05" />
    <Button android:id="@+id/leftButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        app:layout_constraintEnd_toStartOf="@+id/rightButton"
        app:layout_constraintStart_toEndOf="@id/guideline_left_vertical"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Some Teggggggfffffffffffeeeeext" />
    <Button android:id="@+id/rightButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginStart="2dp"
        tools:text="Helfffghhhhhhhhhhlo"
        app:layout_constraintEnd_toStartOf="@+id/guideline_right_vertical"
        app:layout_constraintStart_toEndOf="@+id/leftButton"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_right_vertical"
        android:layout_width="2dp"
        android:layout_marginStart="5dp"
        android:layout_height="2dp"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.95" />

</androidx.constraintlayout.widget.ConstraintLayout>```

Answer 2

Я не верю, что это возможно с ConstraintLayout. Не существует механизма, который позволял бы вам обеим кнопкам вести себя "интеллектуально", когда они обе становятся слишком большими.

Тем не менее, вот что вы можете сделать, чтобы приблизиться. Сначала настройте упакованную горизонтальную цепочку со смещением 1:

app:layout_constraintHorizontal_bias="1"
app:layout_constraintHorizontal_chainStyle="packed"

Затем используйте эти два атрибута для управления шириной обеих ваших кнопок:

android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"

Это дастто, что вы просили, но только до тех пор, пока вторая кнопка не станет достаточно широкой, чтобы заполнить экран (в этот момент она будет занимать все доступное пространство).

Чтобы обойти это, вы можетелибо установите минимальную ширину для первой кнопки:

app:layout_constraintWidth_min="100dp"

Или установите максимальную ширину для второй кнопки:

app:layout_constraintWidth_max="200dp"

Answer 3

Самый простой способ - добавить android:maxWidth="200dp" к кнопке, которую вы хотите ограничить