3

我将使用以下方法实现这个目标ConstraintLayout在此处输入图像描述

每个 TextView 的长度不是固定的,可能会发生变化,TextView 应该位于它们的列的中间。我猜想如果我使用链接barrier_leftbarrier_rightapp:layout_constraintHorizontal_chainStyle="spread_inside"障碍和指南可以帮助我,所以我检查了一下:

<?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>

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

在此处输入图像描述

这是我的设计表面:

在此处输入图像描述

我需要将所有视图保留在屏幕上(它们都不应该熄灭),并且每个视图都应该放在其列的中心。如果左列或右列较长且需要空间,我需要从中间列到左列或右列留出一些空间。如何像第一张图片中显示的那样排列视图?

4

2 回答 2

0

我检查了你的代码,也许我的版本对你有好处。试试这样:

<?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>
于 2019-12-02T08:45:41.697 回答
0

没看清楚你的要求。但是你可以试试这个

<?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>
于 2019-12-02T12:20:51.797 回答