19

我想要一个与屏幕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比屏幕宽，额外的部分就会离开屏幕/不可见。

4

2 回答 2

24

我想要一个水平 LinearLayout，它与屏幕一样宽，与其子级一样高，但诀窍是它的子级每个都有动态宽度，我不希望它们离开屏幕（切掉）。

ALinearLayout不能这样做（SDK 中的任何默认布局都不能这样做），因为它LinearLayout被设置为将所有子级放置在一条水平线或垂直线上。此外，任何类型的基于尺寸的条件布局规则尚不可用（例如在您的情况下，可用的宽度LinearLayout）在 xml 中是不可能的。

您需要的是一个自定义布局，它测量孩子使用可用空间将任何不合适的孩子移动到下面的新行（所谓的FlowLayout）。

编辑：

Google 现在提供了flexbox在 Android 上实现 web 的 flexbox 布局的库。使用该库，通过使用（值为row）和（值为wrap）属性， a 的子级FlexboxLayout将根据其宽度放置在多行上。flexDirectionflexWrap

于 2013-08-24T06:58:01.020 回答
10

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

一个 ChipGroup 用于容纳多个 Chip。默认情况下，芯片在多条线上回流。设置 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

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

请务必阅读官方文档

于 2020-08-06T14:01:47.407 回答