如何防止GridLayout单列项拉伸，保持与多列项同宽？

问题原因 #

当前代码中给GridLayout.LayoutParams设置了列权重1f，并且将子View宽度设为0，导致单行时子View会拉伸填充整个可用宽度。要让单行项宽度与4列布局时的列宽一致，需要让每个子View的宽度固定为「(GridLayout可用宽度 - 列间距总和) / 4」。

具体实现步骤 #

1. 移除LayoutParams的权重设置 #

创建子View的LayoutParams时，不再使用带权重的GridLayout.spec，改为基础配置，暂不设置宽度（后续计算后赋值）：

val layoutParams: GridLayout.LayoutParams = GridLayout.LayoutParams().apply {
    height = LayoutParams.WRAP_CONTENT
    topMargin = 16.pxToDp(this@YourActivity)
    bottomMargin = 16.pxToDp(this@YourActivity)
    // 保留原有的间距逻辑
    if (index % 4 == 0) {
        marginEnd = 36.pxToDp(this@YourActivity)
    } else if ((index + 1) % 4 == 0) {
        // 第四列无需右侧间距
    } else {
        marginEnd = 36.pxToDp(this@YourActivity)
    }
}

2. 监听GridLayout布局完成，计算并设置子View固定宽度 #

由于GridLayout的宽度需要在布局完成后才能准确获取，因此添加OnGlobalLayoutListener来计算每个子View的目标宽度：

filteredSlots.forEach {
    val gridLayout = GridLayout(this)
    gridLayout.columnCount = 4
    val slotViews = mutableListOf<AppointmentSlotView>() // 存储所有子View，用于后续批量设置宽度

    it.value.forEachIndexed { index, slot ->
        val view = AppointmentSlotView(this)
        slotViews.add(view)
        // 应用上面的LayoutParams配置
        gridLayout.addView(view, layoutParams)
    }

    // 监听布局完成事件
    gridLayout.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
        override fun onGlobalLayout() {
            // 移除监听，避免重复触发
            gridLayout.viewTreeObserver.removeOnGlobalLayoutListener(this)
            
            // 计算单个预约项的目标宽度
            val totalHorizontalPadding = gridLayout.paddingLeft + gridLayout.paddingRight
            val columnGap = 36.pxToDp(this@YourActivity)
            val totalGap = columnGap * 3 // 4列有3个间隔
            val availableWidth = gridLayout.width - totalHorizontalPadding - totalGap
            val targetSlotWidth = availableWidth / 4

            // 给所有子View设置固定宽度
            slotViews.forEach { view ->
                val params = view.layoutParams as GridLayout.LayoutParams
                params.width = targetSlotWidth
                view.layoutParams = params
            }
        }
    })

    wrapper.addView(gridLayout)
}

3. 优化AppointmentSlotView的内容适配 #

确保AppointmentSlotView的内容不会超出固定宽度，可在init代码块中添加：

init {
    // ... 原有代码
    ellipsize = TextUtils.TruncateAt.END // 内容过长时显示省略号
}

替代方案：使用ConstraintLayout Flow布局 #

如果可以替换布局容器，ConstraintLayout的Flow组件更适合这种场景：

• 设置app:flow_maxElementsWrap="4"，每行最多4个元素
• 设置app:flow_horizontalGap="36dp"，保持与原逻辑一致的列间距
• 给每个子View设置layout_width="0dp"和layout_constraintWidth_percent="0.25"，确保每个元素宽度为父容器的1/4（自动扣除间距）

这样无需手动计算宽度，Flow会自动处理单行和多行的宽度一致性。

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