具有多个子项的水平LinearLayout,当没有更多水平空间时,在新行上移动子项

Question

我希望有一个LinearLayout像屏幕一样宽的水平线和它的孩子一样高,但诀窍是它的孩子每个都有动态宽度,我不希望它们离开屏幕(切出).我希望它们在新行中流动/中断,以便它们都可见.

尽管与Android完全无关,但它应该与inline <div>在HTML中的工作方式类似.

这就是我现在所拥有的:

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="If you would enter some digits in this field " />
        <EditText
            android:id="@+id/tvDistance"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="enter some digits here"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" that would be great" />
    </LinearLayout>

但是,一旦LinearLayout比屏幕更宽的孩子,额外的部分离开屏幕/看不见.

Answer 1

我想要一个水平的LinearLayout,它与屏幕一样宽,和它的孩子一样高,但诀窍是它的子节点每个都有动态宽度,我不希望它们离开屏幕(剪切掉).

A LinearLayout不能这样做(SDK中的任何默认布局都不能这样做)因为LinearLayout设置为将所有子项放在一个水平或垂直线上.此外,任何类型的条件布局规则都基于尚未提供的维度(例如,在您的情况下,可用的宽度LinearLayout)无论如何都不可能在xml中.

你需要的是一个自定义布局,它测量孩子们使用可用空间移动下面一条新线上的任何非适合孩子(所谓的FlowLayout).

编辑:

Google现在提供了flexbox在Android上实现web的flexbox布局的库.使用该库,a的子节点FlexboxLayout将根据其宽度放置在多行上,方法是使用flexDirection(带有值的值)和(带有换行flexWrap值)属性.

Answer 2

除了 Flexbox，您还可以使用ChipGroup，它是 Material Design Library 的一部分。它也ChipGroup可以是其他组件的容器，它不一定是Chip，也可以是按钮等。

ChipGroup 用于容纳多个 Chips。默认情况下，芯片跨多条线回流。设置 app:singleLine 属性以将筹码限制为一条水平线。如果这样做，您通常希望将此 ChipGroup 包装在 Horizo​​ntalScrollView 中。

<com.google.android.material.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="This" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="is" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="a" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="because" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="chip" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="group" />


    </com.google.android.material.chip.ChipGroup>

更新：

从Constraint Layout 2.0我们现在可以使用Flow

<androidx.constraintlayout.helper.widget.Flow
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintTop_toTopOf="parent"
   app:flow_wrapMode="chain"
   app:constraint_referenced_ids="card1, card2, card3"
   />

通知app:constraint_referenced_ids 和app:flow_wrapMode

第一个是关于传递视图，第二个是关于处理我们包装它们的方式。

请务必在官方文档中阅读有关它的信息