android - 在ConstraintLayout中链接两个障碍

Question

我将使用ConstraintLayout实现此目标:


每个TextView的长度不是固定的，可以更改，并且TextViews应该在其列的中间。我猜想，如果我使用app:layout_constraintHorizontal_chainStyle="spread_inside"链接 barrier_left 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>

但它根本没有用! 是结果:



，这是我的设计图:



我需要将所有 View 都保留在屏幕上(它们都不应该熄灭)，并且每个 View 都应放置在其列的中央。如果左列或右列较长并且需要空间，则需要在中间列到左列或右列之间留一些空间。
如何排列第一张图所示的 View ？

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>