Android Studio中如何用GridLayout动态添加不同尺寸视图？

你想要实现的是流式紧凑排列的标签布局（标签根据自身宽度自动排列，一行放不下则换行，相邻标签紧密贴合），但使用GridLayout无法达到效果——因为GridLayout的固定列数会强制每列宽度统一，导致窄标签旁边出现多余空隙，下一个标签无法紧跟其后。

问题原因 #

你设置了android:columnCount="3"，GridLayout会将布局分成3列，每列宽度由该列最宽的元素决定。即使某个标签（比如"ALL"）宽度很小，它也会占据整列宽度，下一个标签只能从下一列起始位置开始，自然无法紧密相邻。

可行解决方案 #

方案1：使用FlexboxLayout（推荐）

FlexboxLayout是AndroidX提供的布局，完全支持流式排列，能完美实现你要的效果。

1. 添加依赖到build.gradle（Module级别）：

implementation "com.google.android.flexbox:flexbox:3.0.0"

2. 替换原GridLayout为FlexboxLayout，调整布局属性：

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/_16ssp"
    android:layout_marginHorizontal="@dimen/_16ssp"
    app:flexWrap="wrap"
    app:alignItems="center"
    app:gap="@dimen/_16ssp">

    <!-- 原标签元素，去掉多余的layout_marginTop，由gap统一控制间距 -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/grey_20dp_10op"
        android:paddingHorizontal="@dimen/_32ssp"
        android:paddingVertical="@dimen/_8ssp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/regular"
            android:text="ALL"
            android:textColor="@color/black"
            android:textSize="@dimen/_12ssp"/>
    </LinearLayout>

    <!-- 其他标签元素重复即可，无需设置layout_marginEnd和layout_marginTop，由Flexbox的gap控制 -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/grey_20dp_10op"
        android:paddingHorizontal="@dimen/_32ssp"
        android:paddingVertical="@dimen/_8ssp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/regular"
            android:text="Default"
            android:textColor="@color/black"
            android:textSize="@dimen/_12ssp"/>
    </LinearLayout>

    <!-- 剩余标签元素... -->

</com.google.android.flexbox.FlexboxLayout>

• app:flexWrap="wrap"：开启自动换行
• app:gap="@dimen/_16ssp"：统一控制标签之间的水平和垂直间距，替代原来的layout_marginEnd和layout_marginTop

方案2：使用Material Design的ChipGroup

如果你的标签是可交互的（类似筛选标签），可以直接用Material库的ChipGroup，它默认支持流式排列，样式更贴合Material设计：

1. 确保已添加Material依赖：

implementation "com.google.android.material:material:1.11.0"

2. 布局代码：

<com.google.android.material.chip.ChipGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/_16ssp"
    android:layout_marginHorizontal="@dimen/_16ssp"
    app:chipSpacing="@dimen/_16ssp">

    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ALL"
        android:textSize="@dimen/_12ssp"
        android:textColor="@color/black"
        app:chipBackgroundColor="@drawable/grey_20dp_10op"
        app:chipCornerRadius="@dimen/_20dp"
        app:chipPaddingHorizontal="@dimen/_32ssp"
        app:chipPaddingVertical="@dimen/_8ssp"/>

    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Default"
        android:textSize="@dimen/_12ssp"
        android:textColor="@color/black"
        app:chipBackgroundColor="@drawable/grey_20dp_10op"
        app:chipCornerRadius="@dimen/_20dp"
        app:chipPaddingHorizontal="@dimen/_32ssp"
        app:chipPaddingVertical="@dimen/_8ssp"/>

    <!-- 剩余标签... -->

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

总结 #

GridLayout适合固定行列的网格布局，不适合这种流式紧凑排列的场景。优先选择FlexboxLayout或ChipGroup，两者都能完美实现你想要的标签紧密排列、自动换行的效果。

内容的提问来源于stack exchange，提问作者Tamoor Malik