ConstraintLayout: составной ImageView, который остается в родительском при расширении текста

Question

Рассмотрим следующую компоновку:

<android.support.constraint.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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:padding="8dp"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Text" />

    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toEndOf="@id/text_view"
        app:layout_constraintTop_toTopOf="parent"
        tools:background="@android:color/black" />
</android.support.constraint.ConstraintLayout>

Представление изображения (или кнопка, или любой другой виджет, важно то, что оно имеет фиксированный размер) выровнено по правому краю TextView с размером по размеруwrap_content, таким образом, сам текст занимает только необходимое ему пространство.

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

Я попытался исправить это, добавив ограничение endToEnd = "parent" к изображению и установив горизонтальное смещениедо 0 (см. код), но это не сработает.

Есть предложения о том, что я мог бы сделать вместо этого?

Answer 1

Чтобы предотвратить выталкивание ImageView за пределы родителя, вам нужно ограничить конец TextView началом ImageView, чтобы создать цепочку.Теперь, чтобы убедиться, что TextView занимает только необходимое пространство, но также имеет ограничения, необходимо добавить атрибут app:layout_constrainedWidth="true" к вашему TextView.

Если вы хотите, чтобы ImageView оставалсясразу справа от TextView можно использовать packed стиль цепочки с горизонтальным смещением 0.Если вы хотите, чтобы ImageView был выровнен справа от родителя, вы можете использовать стиль цепочки spread_inside без смещения.

Полученный XML-код с указанными выше изменениями может выглядеть следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:padding="8dp"
        android:textSize="18sp"
        app:layout_constrainedWidth="true"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/image_view"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Text" />

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/text_view"
        app:layout_constraintTop_toTopOf="parent"
        tools:background="@android:color/black" />
</android.support.constraint.ConstraintLayout>

РЕДАКТИРОВАТЬ: В соответствии с просьбой в комментарии, вот как это будет работать с Barrier, разделяя 3 TextViews и ImageView.В этом случае вы не указываете ограничения для концов TextViews, поэтому у вас больше нет горизонтальных цепочек.Вместо этого вы создаете Barrier с направлением, равным end из всех TextViews, на которые есть ссылка в Barrier.Это гарантирует, что Barrier всегда находится в конце самого широкого TextView.Последнее, что нужно сделать, это ограничить начальную сторону ImageView Barrier.

Пример XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/text_view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:padding="8dp"
        android:textSize="18sp"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintBottom_toTopOf="@id/text_view2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Text1" />

    <TextView
        android:id="@+id/text_view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:padding="8dp"
        android:textSize="18sp"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintBottom_toTopOf="@id/text_view3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/text_view1"
        tools:text="Text2" />

    <TextView
        android:id="@+id/text_view3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:padding="8dp"
        android:textSize="18sp"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/text_view2"
        tools:text="Text3" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="text_view1,text_view2,text_view3" />

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/barrier"
        app:layout_constraintTop_toTopOf="parent"
        tools:background="@android:color/black" />
</android.support.constraint.ConstraintLayout>