如何在FlexboxLayoutManager中修改行间距及首行子项间距？

一、修改行之间的间距 #

方法1：自定义RecyclerView.ItemDecoration实现 #

通过自定义ItemDecoration，给非最后一行的item添加底部间距，实现行与行的分隔：

class FlexboxRowSpacingDecoration(private val rowSpacing: Int) : RecyclerView.ItemDecoration() {
    override fun getItemOffsets(
        outRect: Rect,
        view: View,
        parent: RecyclerView,
        state: RecyclerView.State
    ) {
        super.getItemOffsets(outRect, view, parent, state)
        val layoutManager = parent.layoutManager as FlexboxLayoutManager
        val position = parent.getChildAdapterPosition(view)
        // 判断当前item是否在最后一行
        val isLastRow = layoutManager.isItemOnLastRow(position)
        if (!isLastRow) {
            outRect.bottom = rowSpacing
        }
    }
}

使用时添加到RecyclerView：

flexboxLayoutManager = FlexboxLayoutManagerImpl(context, FlexDirection.ROW)
holder.recycleListView.layoutManager = flexboxLayoutManager
// 示例：设置20dp的行间距
val rowSpacing = resources.getDimensionPixelSize(R.dimen.row_spacing)
holder.recycleListView.addItemDecoration(FlexboxRowSpacingDecoration(rowSpacing))

方法2：利用FlexboxLayoutManager的统一间距方法 #

如果不需要区分行内和行间距，可直接调用setGap设置全局item间距（同时作用于水平、垂直方向）：

flexboxLayoutManager.setGap(resources.getDimensionPixelSize(R.dimen.gap_size))

二、修改首行内子项之间的间距 #

要实现首行子项间距与其他行不同，需结合自定义布局管理器和ItemDecoration判断item所在行：

1. 扩展自定义布局管理器，增加首行判断方法：

class FlexboxLayoutManagerImpl(context: Context, flexDirection: Int) :
    FlexboxLayoutManager(context, flexDirection) {

    override fun generateLayoutParams(lp: ViewGroup.LayoutParams): RecyclerView.LayoutParams {
        return LayoutParams(lp)
    }

    // 判断item是否在首行
    fun isItemOnFirstRow(position: Int): Boolean {
        val view = findViewByPosition(position) ?: return false
        val lp = view.layoutParams as LayoutParams
        return lp.flexLineIndex == 0
    }
}

2. 自定义ItemDecoration设置差异化水平间距：

class FlexboxFirstRowItemSpacingDecoration(
    private val firstRowHorizontalSpacing: Int,
    private val normalHorizontalSpacing: Int
) : RecyclerView.ItemDecoration() {
    override fun getItemOffsets(
        outRect: Rect,
        view: View,
        parent: RecyclerView,
        state: RecyclerView.State
    ) {
        super.getItemOffsets(outRect, view, parent, state)
        val layoutManager = parent.layoutManager as FlexboxLayoutManagerImpl
        val position = parent.getChildAdapterPosition(view)
        
        if (layoutManager.isItemOnFirstRow(position)) {
            // 首行非第一个item设置首行水平间距
            if (position != 0) {
                outRect.left = firstRowHorizontalSpacing
            }
        } else {
            // 非首行非该行第一个item设置常规水平间距
            val firstPosOfCurrentRow = layoutManager.findFirstVisibleItemPositionInFlexLine(position)
            if (position != firstPosOfCurrentRow) {
                outRect.left = normalHorizontalSpacing
            }
        }
    }
}

3. 使用时添加到RecyclerView：

val firstRowSpacing = resources.getDimensionPixelSize(R.dimen.first_row_spacing)
val normalSpacing = resources.getDimensionPixelSize(R.dimen.normal_spacing)
holder.recycleListView.addItemDecoration(
    FlexboxFirstRowItemSpacingDecoration(firstRowSpacing, normalSpacing)
)

注意事项 #

• 同时使用多个ItemDecoration时，要注意添加顺序，避免间距叠加异常。
• setGap方法会覆盖item自身的margin设置，建议与自定义ItemDecoration二选一使用。

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