ConstraintLayout中的两个障碍

Question

我将使用ConstraintLayout实现此目标：

每个TextView的长度不是固定的，可以更改，并且TextViews应该位于其列的中间。我猜想，如果我使用app:layout_constraintHorizontal_chainStyle="spread_inside"链接barrier_left和barrier_right，那么障碍和指南可能会对我有所帮助，所以我检查了一下：

<?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="wrap_content">

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier_left"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        app:barrierDirection="left"
        app:constraint_referenced_ids="tv_left_1,tv_left_2,tv_left_3"
        app:layout_constraintEnd_toStartOf="@id/barrier_right"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/tv_left_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 1 AA"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_left_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 2 AAA"
        app:layout_constraintEnd_toEndOf="@id/tv_left_1"
        app:layout_constraintStart_toStartOf="@id/tv_left_1"
        app:layout_constraintTop_toBottomOf="@+id/tv_left_1" />

    <TextView
        android:id="@+id/tv_left_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 3 AAAA"
        app:layout_constraintEnd_toEndOf="@+id/tv_left_2"
        app:layout_constraintStart_toStartOf="@+id/tv_left_2"
        app:layout_constraintTop_toBottomOf="@+id/tv_left_2" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <TextView
        android:id="@+id/tv_middle_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 1 AA"
        app:layout_constraintEnd_toEndOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_middle_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 2 AAAAAA"
        app:layout_constraintEnd_toEndOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@id/tv_middle_1" />

    <TextView
        android:id="@+id/tv_middle_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 3 AAAA"
        app:layout_constraintEnd_toEndOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@+id/tv_middle_2" />

    <TextView
        android:id="@+id/tv_right_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 1 AAAAAAAAA"
        app:layout_constraintEnd_toEndOf="@id/barrier_right"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_right_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 2 AAAA"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_right_1" />

    <TextView
        android:id="@+id/tv_right_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 3 A"
        app:layout_constraintEnd_toEndOf="@+id/tv_right_2"
        app:layout_constraintStart_toStartOf="@+id/tv_right_2"
        app:layout_constraintTop_toBottomOf="@+id/tv_right_2" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier_right"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        app:barrierDirection="right"
        app:constraint_referenced_ids="tv_right_1,tv_right_2,tv_right_3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/barrier_left" />

</androidx.constraintlayout.widget.ConstraintLayout>

但是它根本不起作用！ 它是结果：

这是我的设计图：

如何像第一张图所示排列视图？

Answer 1

我检查了您的代码，也许我的版本对您有用。尝试这样：

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

    <android.support.constraint.Barrier
        android:id="@+id/barrier_left"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        app:barrierDirection="right"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/tv_left_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 1 AA"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="@+id/tv_left_2"
        app:layout_constraintEnd_toEndOf="@+id/tv_left_2"/>

    <TextView
        android:id="@+id/tv_left_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 2 AAA"
        app:layout_constraintEnd_toEndOf="@+id/tv_left_3"
        app:layout_constraintStart_toStartOf="@+id/tv_left_3"
        app:layout_constraintTop_toBottomOf="@+id/tv_left_1" />

    <TextView
        android:id="@+id/tv_left_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 3 AAAA"
        app:layout_constraintStart_toStartOf="@+id/barrier_left"
        app:layout_constraintTop_toBottomOf="@id/tv_left_2"/>

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

    <TextView
        android:id="@+id/tv_middle_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 1 AA"
        app:layout_constraintEnd_toEndOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_middle_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 2 AAAAAA"
        app:layout_constraintEnd_toEndOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@id/tv_middle_1" />

    <TextView
        android:id="@+id/tv_middle_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 3 AAAA"
        app:layout_constraintEnd_toEndOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@+id/tv_middle_2" />

    <TextView
        android:id="@+id/tv_right_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 1 AAAAAAAAA"
        app:layout_constraintEnd_toEndOf="@id/barrier_right"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_right_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 2 AAAA"
        app:layout_constraintStart_toStartOf="@+id/tv_right_1"
        app:layout_constraintEnd_toEndOf="@+id/tv_right_1"
        app:layout_constraintTop_toBottomOf="@+id/tv_right_1" />

    <TextView
        android:id="@+id/tv_right_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 3 A"
        app:layout_constraintEnd_toEndOf="@+id/tv_right_2"
        app:layout_constraintStart_toStartOf="@+id/tv_right_2"
        app:layout_constraintTop_toBottomOf="@+id/tv_right_2" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier_right"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        app:barrierDirection="left"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

Answer 2

未明确要求。但是你可以试试这个]

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

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier_left"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        app:barrierDirection="right"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent" />

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

    <android.support.constraint.Guideline
        android:id="@+id/guideline_right"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.66" />

    <TextView
        android:id="@+id/tv_left_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 1 AAAAAAAA"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="@+id/barrier_left"
        app:layout_constraintEnd_toStartOf="@+id/guideline_left"/>

    <TextView
        android:id="@+id/tv_left_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 2 AAA"
        app:layout_constraintStart_toStartOf="@+id/barrier_left"
        app:layout_constraintEnd_toStartOf="@+id/guideline_left"
        app:layout_constraintTop_toBottomOf="@+id/tv_left_1" />

    <TextView
        android:id="@+id/tv_left_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Left 3 AAAA"
        app:layout_constraintStart_toStartOf="@+id/barrier_left"
        app:layout_constraintEnd_toStartOf="@+id/guideline_left"
        app:layout_constraintTop_toBottomOf="@id/tv_left_2"/>

    <TextView
        android:id="@+id/tv_middle_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 1 AA"
        app:layout_constraintEnd_toStartOf="@+id/guideline_right"
        app:layout_constraintStart_toEndOf="@+id/guideline_left"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_middle_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 2 AAAAAA"
        app:layout_constraintEnd_toStartOf="@+id/guideline_right"
        app:layout_constraintStart_toEndOf="@+id/guideline_left"
        app:layout_constraintTop_toBottomOf="@id/tv_middle_1" />

    <TextView
        android:id="@+id/tv_middle_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Middle 3 AAAA"
        app:layout_constraintEnd_toStartOf="@+id/guideline_right"
        app:layout_constraintStart_toEndOf="@+id/guideline_left"
        app:layout_constraintTop_toBottomOf="@+id/tv_middle_2" />

    <TextView
        android:id="@+id/tv_right_1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 1 AAAAAAAAA"
        app:layout_constraintEnd_toEndOf="@id/barrier_right"
        app:layout_constraintStart_toEndOf="@+id/guideline_right"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_right_2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 2 AAAA"
        app:layout_constraintEnd_toEndOf="@id/barrier_right"
        app:layout_constraintStart_toEndOf="@+id/guideline_right"
        app:layout_constraintTop_toBottomOf="@+id/tv_right_1" />

    <TextView
        android:id="@+id/tv_right_3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="Right 3 A"
        app:layout_constraintEnd_toEndOf="@id/barrier_right"
        app:layout_constraintStart_toEndOf="@+id/guideline_right"
        app:layout_constraintTop_toBottomOf="@+id/tv_right_2" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier_right"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        app:barrierDirection="left"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>