Цепочка с барьером в ConstraintLayout

Я хочу добиться макета ниже, используя ConstraintLayout без вложенности.

enter image description here

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

Вот то, что у меня есть, которое будет правильно расположено, но не будет по центру:

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/topLeftText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        tools:text="Test test test test test test test test test test"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/topRightText"/>

    <TextView
        android:id="@+id/topRightText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp"
        tools:text="Test test test test test test test test test test test test test test test test test test test test"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/topLeftText"
        app:layout_constraintEnd_toEndOf="parent"/>

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="topLeftText,topRightText"
        app:barrierDirection="bottom"/>

    <TextView
        android:id="@+id/bottomText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        tools:text="Test test test test test test test test test test test test test test test test test test test test"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/barrier"/>

</android.support.constraint.ConstraintLayout>

Если кто-нибудь знает, как этого добиться, это будет высоко ценится!

Ответы

Ответ 1

  1. Создайте horizontal chain с помощью topLeftText и topRightText, установите стиль цепочки на packed, чтобы центрировать текст по горизонтали, также добавьте end margin к topLeftText, чтобы обеспечить некоторое горизонтальное пространство между текстами
  2. установите top constraint topLeftText на top topRightText, чтобы выровнять текст сверху.
  3. Создайте vertical chain с помощью topRightText и bottomText, установите стиль цепочки на packed, чтобы центрировать текст по вертикали, добавьте top margin к bottomText, чтобы обеспечить некоторое вертикальное пространство между текстами.
  4. Добавьте поле constraint layout, чтобы текст не касался краев.

Скриншот

constraint layout center center texts

XML

<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="match_parent"
    android:layout_margin="16dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/topLeftText"
        android:layout_width="182dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@+id/topRightText"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/topRightText"
        android:text="Test test test test test test test test test test" />

    <TextView
        android:id="@+id/topRightText"
        android:layout_width="182dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/bottomText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/topLeftText"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Test test test test test test test test test test test test test test test test test test test test" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="topLeftText,topRightText" />

    <TextView
        android:id="@+id/bottomText"
        android:layout_width="379dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Test test test test test test test test test test test test test test test test test test test test"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/topRightText" />


</androidx.constraintlayout.widget.ConstraintLayout>