Question

使用ConstraintLayout我有2个TextView，当我们有足够的空间来查看两者的内容时，我希望彼此相邻。但是如果TextView A需要占用大量空间并且满足所有屏幕宽度，那么我希望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>

我应该如何编辑此代码段，以便TextView B在TextView A下面，如果他们没有留给他的任何空间？

Answer 1

看一下Google的FlexboxLayout。您可能需要流动TextView。您可以找到一些文档here和一个教程here。

FlexboxLayout是一个库项目，它将CSS Flexible Box Layout Module的类似功能引入Android。

您可以查看在ConstraintLayout中的FlexbotLayout中包装TextView以允许它们根据需要流动。

这是一个示例布局。由于顶部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>

只有在足够的空间时才能在右侧查看，否则请在底部查看

1 个答案: