Выровняйте виды прямо в ConstraintLayout без обрезки

Я создаю диалог с двумя кнопками, выровненными по правому краю относительно родительского ConstraintLayout.

Все нормально, пока текст кнопок не станет очень длинным. Если текст одной или обеих кнопок длинный, кнопки выходят за пределы родительского элемента, что приводит к обрезке текста, как показано на изображении ниже. Я хотел бы обрабатывать случаи, когда есть более длинный текст.

т.е. желаемое поведение будет

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

Если текст кнопки короткий, макет работает правильно:

Если текст кнопки длинный:

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

Код макета

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/dialog_padding"
    android:paddingLeft="@dimen/dialog_padding"
    android:paddingRight="@dimen/dialog_padding"
    android:paddingTop="@dimen/dialog_padding">

    <TextView
        android:id="@+id/dialog_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dialog_text_margin"
        tools:text="Dialog title" />

    <TextView
        android:id="@+id/dialog_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dialog_text_margin"
        app:layout_constraintTop_toBottomOf="@id/dialog_title"
        tools:text="Dialog text content" />

    <Button
        android:id="@+id/cancel_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@id/ok_btn"
        app:layout_constraintTop_toBottomOf="@id/dialog_content"
        tools:text="Dismiss" />

    <Button
        android:id="@+id/ok_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dialog_content"
        tools:text="Accept" />
</android.support.constraint.ConstraintLayout>

Things that I've tried to no avail:

добавление app:layout_constraintStart_toStartOf="parent" к кнопке отмены приводит к тому, что кнопки больше не выровнены по правому краю, и это решение неверно
ограничение конца кнопки отклонения до начала кнопки принятия приводит к тому, что кнопки больше не выравниваются по правому краю
использование layout_width="0dp" для кнопок и использование app:layout_constrainedWidth="true" не имеет никакого эффекта

VIN 11.04.2018 источник

comment

Когда вы ограничили конец кнопки отклонения началом кнопки принятия, вы установили app:layout_constraintHorizontal_bias="1.0" в представлениях кнопок? - rjr-apps 11.04.2018

comment

@ nope4561759 Я связал их по горизонтали и установил смещение на 1.0, как вы сказали, но смещение не имеет никакого эффекта. После этого изменения кнопки фактически выровнены по левому краю. - VIN 11.04.2018

comment

Просто хотел добавить это для записи, что ответ на добавление app:layout_constraintStart_toStartOf="parent" к кнопке отмены неверен, потому что из-за этого кнопки больше не выравниваются по правому краю. - VIN 11.04.2018

Ответы (1)

arrow_upward
10
arrow_downward

Вот два скриншота того, что, я думаю, вы пытаетесь достичь.

Во-первых, небольшой текст:

Теперь с длинным текстом:

Я позволил себе несколько вольностей с макетом и ввел норму в 33% от ширины, которой ограничена кнопка. Вы не указали, насколько кнопка может расширяться по горизонтали, поэтому я сделал такое предположение.

XML для этого макета следует. Я установил ширину кнопок 0dp или match_constraints, чтобы их размер можно было регулировать. Кнопки также были помещены в packed цепочку, которая группирует две кнопки вместе. Горизонтальное смещение сейчас установлено на 0.5, но при его увеличении группа смещается вправо, если она начинает ползать влево по вам.

ConstraintLayout документация содержит хорошее описание этих функций и способов используй их.

<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.33" />

<TextView
    android:id="@+id/dialog_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/dialog_text_margin"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="Dialog title" />

<Button
    android:id="@+id/cancel_btn"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toStartOf="@+id/ok_btn"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toEndOf="@+id/guideline"
    app:layout_constraintTop_toBottomOf="@+id/dialog_title"
    tools:text="Dismiss" />

<Button
    android:id="@+id/ok_btn"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/cancel_btn"
    app:layout_constraintTop_toTopOf="@+id/cancel_btn"
    tools:text="Accept" />

Cheticamp 11.04.2018

Выровняйте виды прямо в ConstraintLayout без обрезки

Ответы (1)

Вопросы по теме