Остановить перекрытие представлений в ConstraintLayout

Question

Я пытаюсь создать простой макет с тремя видами, используя ConstrainLayout:

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

Но вместо этого я получаю следующее: левый вид слишком сильно увеличивается вправо и скрывает средний вид.

Вот мой код:

<android.support.constraint.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/left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/middle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toRightOf="@id/left"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>

Некоторые из вещей, которые я пробовал до сих пор:

• создание цепочки и опробование различных стилей цепочки
• настройка андроида: minWidth to Middle view, чтобы предотвратить его сдавливание при просмотре слева
• с использованием Guidline, чтобы предотвратить левое и / или среднее представление дляразвернуть слишком далеко вправо

Я потратил около 4 часов, пытаясь заставить вещи работать, но пока безуспешно.Был бы очень признателен за помощь.

Answer 1

Что вам не хватает, так это app:layout_constrainedWidth="true", который устанавливает ограничения для Views с шириной, установленной на wrap_content.Я бы связал первые два TextView со стилем packed и смещением o 0.0, чтобы выровнять цепочку слева от родителя и ограничить ее третьим TextView справа.TextView справа может остаться самостоятельно с ограничением справа.

Пример (при условии, что только левый TextView увеличится в размере):

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

    <TextView
            android:id="@+id/left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="left"
            app:layout_constrainedWidth="true"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/middle"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/middle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="middle"
            app:layout_constraintLeft_toRightOf="@id/left"
            app:layout_constraintRight_toLeftOf="@id/right"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="right"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>

Answer 2

Нет проблем с использованием цепочек, вам просто нужно установить ширину ваших представлений на match_constraint, чтобы она не перекрывала ваши другие представления:

  <TextView
    android:id="@+id/left"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:text="this is some text"
    app:layout_constraintEnd_toStartOf="@+id/right"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/middle"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="this is some text"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/right"
    app:layout_constraintTop_toTopOf="@+id/right" />

<TextView
    android:id="@+id/right"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="this is some text but longgggggggggggggggggggggggggggggggggggggggggggggggggggggg"
    app:layout_constraintEnd_toStartOf="@+id/middle"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/left"
    app:layout_constraintTop_toTopOf="@+id/left" />

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

Вы были на 95% в правильном направлении, все необходимые для изменения ширины ваших просмотров.

Answer 3

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

<android.support.constraint.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:text="A long text to show how weights work in constraint layouts"
    android:id="@+id/one"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="#caf"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/two"
    app:layout_constraintHorizontal_weight="1"/>

<TextView
    android:text="Short text in middle"
    android:id="@+id/two"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="#fac"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/one"
    app:layout_constraintRight_toRightOf="@id/three"
    app:layout_constraintHorizontal_weight="1"/>

<TextView
    android:text="Here is the end to the right"
    android:id="@+id/three"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="#fea"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/two"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_weight="1"/>

</android.support.constraint.ConstraintLayout>

Answer 4

Вам нужен барьер:

В чем разница между барьером и руководством в схеме ограничений?

https://constraintlayout.com/basics/barriers.html

Answer 5

<TextView
    android:id="@+id/left"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="left left left left left left left left left left left left left left left left left "
    app:layout_constraintEnd_toStartOf="@+id/middle"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/middle"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="middle"
    app:layout_constraintEnd_toStartOf="@+id/right"
    app:layout_constraintStart_toEndOf="@+id/left"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/right"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="right"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/middle"
    app:layout_constraintTop_toTopOf="parent" />