只有当他们足够时才在右边查看space，否则在底部

Question

使用 ConstraintLayout 我有 2 个 TextView，当它们足够 space 以查看两者的内容时，我想彼此相邻。但是，如果 TextView A 占用大量 space 并填满所有屏幕宽度，那么我希望 TextView B 位于 TextView A 下方，而不是仍在右侧但不可见（在屏幕外）。

所以使用下面的代码我得到了我的 2 TextView 彼此相邻。

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/text_view_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        tools:text="a very long text ..." />

    <TextView
        android:id="@+id/text_view_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintLeft_toRightOf="@+id/text_view_a"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="some text" />

</android.support.constraint.ConstraintLayout>

如果 space 没有留给他，我应该如何编辑此代码片段，以便 TextView B 位于 TextView A 之下？

Answer 1

看看 Google 的 FlexboxLayout。这可能是您流动 TextView 所需要的。您可以找到一些文档 here and a tutorial here.

FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android.

您可以考虑将 TextView 包装在 ConstraintLayout 内的 FlexbotLayout 中，以允许它们根据需要流动。

这是一个示例布局。由于最上面的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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.flexer.MainActivity">

    <com.google.android.flexbox.FlexboxLayout 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="0dp"
        app:alignContent="stretch"
        app:alignItems="stretch"
        app:flexWrap="wrap"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/text_view_a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:text="a very long text ...a very long text ...a very long text ...a very long text ...a very long text ...a very long text ...a very long text ...a very long text ..." />

        <TextView
            android:id="@+id/text_view_b"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:text="some text" />
    </com.google.android.flexbox.FlexboxLayout>
</android.support.constraint.ConstraintLayout>

Answer 2

我不得不添加这个答案，因为尽管接受的答案有效，我推荐使用当前存在的约束布局的不同方法，由于 UI 性能 [=14]，强烈推荐使用该布局=] 就像添加 androidx.constraintlayout.helper.widget.Flow 并将视图的引用 ID 设置为流一样简单：

<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:orientation="vertical">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="[AAAAAAAA]"
        tools:ignore="MissingConstraints" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="[BBBBBBBB]"
        tools:ignore="MissingConstraints" />

    <TextView
        android:id="@+id/text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="[CCCCCCCC]"
        tools:ignore="MissingConstraints" />

    <TextView
        android:id="@+id/text4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="[DDDDDDDD]"
        tools:ignore="MissingConstraints" />

    <TextView
        android:id="@+id/text5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="[EEEEEEEE]"
        tools:ignore="MissingConstraints" />

    <TextView
        android:id="@+id/text6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="[FFFFFFFF]"
        tools:ignore="MissingConstraints" />

    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/flow1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="10dp"
        app:constraint_referenced_ids="text1,text2,text3,text4,text5,text6"
        app:flow_horizontalBias="0"
        app:flow_horizontalGap="10dp"
        app:flow_horizontalStyle="packed"
        app:flow_verticalBias="0"
        app:flow_wrapMode="chain"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

只有当他们足够时才在右边查看space，否则在底部

View on the right only if their is enough space, otherwise go at the bottom

android

android-view

android-constraintlayout