Как поддерживать условия wrap_content и match_parent с 3 видами в горизонтальном положении в Android Constraint Layout

Question

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

Пример:

WRAP_CONTENT:

| view1 view2 view3 --empty-space-- |

MATCH_PARENT:

| view1 view2 --empty-space-- view3 |

По какой-то причине я должен использовать здесь макет ограничения.

Я попробовал код ниже. Когда я попытался изменить ширину второго вида на WRAP_CONTENT и установить весь макет ограничения на MATCH_PARENT, второй вид стал располагаться в центре (в то время как я хочу сохранить расположение слева)

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:text="view1"/>

    <TextView
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/test1"
        app:layout_constraintEnd_toStartOf="@id/test3"
        android:text="view2"/>

    <TextView
        android:id="@+id/view3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:text="view3"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Спасибо. Я ценю любые решения.

Answer 1

ConstraintLayout предоставляет возможность определять цепочки между дочерними представлениями.Есть в наличии упакованные, spread_inside и распространения.

Вы можете прочитать о сцеплении здесь: https://constraintlayout.com/basics/create_chains.html

Answer 2

Я не уверен на 100%, что понимаю, что вы пытаетесь выполнить, но я буду расширять (уже даны ответы) для каждого случая, который я могу себе представить:

| V1 | V2 | V3 ...... | вам просто нужнопередайте 3-му виду match_constraints с android:layout_width="0dp", и он будет занимать все пространство, оставленное другими видами (которые имеют обтекание).

Это даст тот же результат, который я понимаю здесь:

|view1 view2 view3 --empty-space--|

Если только -- empty space -- вы не имели в виду |V1|V2|V3| ..... |, в этом случае вам понадобитсяСхема ограничения Chain и bias:

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

app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"

и убедитесь, что все виды имеют связь между ними, например, view1 (крайний левый)будет иметь: startToStart = parent, endToStart = view2.В этом случае View2 будет иметь startToEnd = view1, endToStart = view3 и view3 ... startToEnd = view2, endToEnd = parent

Вы поймете идею.

Это упакует все представления в start оставляя пустое место в конце.Вышеуказанное будет работать независимо от ограничений родителя (сопоставление / перенос), поскольку движок в любом случае будет позиционировать / отображать размеры в зависимости от доступного пространства.

Теперь для вашего примера MATCH_PARENT:

|view1 view2 --empty-space-- view3|

Неясно (для меня), что вы подразумеваете под - пустое пространство - означает ли это, что вы хотите, чтобы view2 обернул его содержимое?или вы хотите, чтобы view2 использовал все доступное пространство и выдвинул view3 до конца?

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

Теперь, если вы не возражаете против того, чтобы view2 занял все оставшееся пространство и разорвал цепочку (только при необходимости), вы можете сделать обычную смещенную цепочку, но использовать условие распространения по умолчанию для переноса:

И так это будет выглядеть так:

<?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"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <TextView
            android:id="@+id/view1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/view2"
            app:layout_constraintTop_toTopOf="parent"
            android:text="view1"/>

    <TextView
            android:id="@+id/view2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@id/view1"
            app:layout_constraintEnd_toStartOf="@id/view3"
            app:layout_constraintWidth_default="spread"
            android:text="view2"/>

    <TextView
            android:id="@+id/view3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toEndOf="@id/view2"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            android:text="view3"/>

</androidx.constraintlayout.widget.ConstraintLayout>

И это будет производить что-то вроде:

| V1 | V2.............|V3|

Что может или не может работать для вас.

Answer 3

Поместите Views в упакованную горизонтальную цепь со смещением 0, чтобы выровнять их по левому краю.

Упакованная цепочка сгруппирует Views бок о бок в середине родительского элемента ConstraintLayout. Когда ни один из ваших Views не имеет ширины, установленной на 0dp (ограничение соответствия), вы можете контролировать горизонтальное расположение этой группы, установив смещение. Если вы установите свой второй View на 0dp, тогда он займет все оставшееся место.

Подробнее о цепях можно прочитать в документации .

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

        <TextView
            android:id="@+id/view1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/view2"
            app:layout_constraintTop_toTopOf="parent"
            android:text="view1"/>

        <TextView
            android:id="@+id/view2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@id/view1"
            app:layout_constraintEnd_toStartOf="@id/view3"
            android:text="view2"/>

        <TextView
            android:id="@+id/view3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toEndOf="@id/view2"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="view3"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Edit:

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

Во-первых, при установке ширины родительского макета на wrap_content вы также можете установить ширину второго View на wrap_content.

Второй вариант - добавить Space между вторым и третьим View, чтобы заполнить оставшееся пространство, когда родительский макет установлен на match_constraint, или уменьшить, если установить его на wrap_content.

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

    <TextView
            android:id="@+id/view1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/view2"
            app:layout_constraintTop_toTopOf="parent"
            android:text="view1"/>

    <TextView
            android:id="@+id/view2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@id/view1"
            app:layout_constraintEnd_toStartOf="@id/space"
            android:text="view2"/>

    <Space
            android:id="@+id/space"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toEndOf="@id/view2"
            app:layout_constraintEnd_toStartOf="@id/view3"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/view3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toEndOf="@id/space"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="view3"/>

</androidx.constraintlayout.widget.ConstraintLayout>