RecyclerView横向滚动网格行优先排列实现问题咨询

嘿，这个问题我之前也碰到过！GridLayoutManager在横向模式下默认是列优先排列，比如3列3行的网格，4个元素会排成第一列3个、第二列1个，完全不符合我们要的行优先（第一行3个、第二行1个）需求。下面给你两个实用的解决方案：

方案一：自定义RowFirstGridLayoutManager（推荐，性能更优） #

核心思路是手动控制每个Item的排列顺序，完全按行优先来布局，同时支持横向滚动。直接上代码：

class RowFirstGridLayoutManager(
    private val spanCount: Int, // 每行的列数
    private val itemWidth: Int, // 单个Item的宽度
    private val itemHeight: Int // 单个Item的高度
) : RecyclerView.LayoutManager() {

    override fun generateDefaultLayoutParams(): RecyclerView.LayoutParams {
        return RecyclerView.LayoutParams(
            RecyclerView.LayoutParams.WRAP_CONTENT,
            RecyclerView.LayoutParams.WRAP_CONTENT
        )
    }

    // 开启横向滚动支持
    override fun canScrollHorizontally(): Boolean {
        return true
    }

    override fun onLayoutChildren(recycler: RecyclerView.Recycler, state: RecyclerView.State) {
        if (state.itemCount == 0) {
            detachAndScrapAttachedViews(recycler)
            return
        }

        // 清空已有的子View
        detachAndScrapAttachedViews(recycler)

        var currentLeft = paddingLeft
        var currentTop = paddingTop
        var currentColumn = 0

        // 按行优先顺序逐个布局Item
        for (position in 0 until state.itemCount) {
            val view = recycler.getViewForPosition(position)
            addView(view)

            measureChildWithMargins(view, 0, 0)
            // 布局当前Item
            layoutDecoratedWithMargins(
                view,
                currentLeft,
                currentTop,
                currentLeft + itemWidth,
                currentTop + itemHeight
            )

            currentColumn++
            // 排满一行，切换到下一行开头
            if (currentColumn >= spanCount) {
                currentColumn = 0
                currentLeft = paddingLeft
                currentTop += itemHeight
            } else {
                // 同一行，移动到下一个列的位置
                currentLeft += itemWidth
            }
        }
    }

    // 处理横向滚动逻辑
    override fun scrollHorizontallyBy(
        dx: Int,
        recycler: RecyclerView.Recycler,
        state: RecyclerView.State
    ): Int {
        val scrolledDistance = calculateScrollDistance(dx)
        offsetChildrenHorizontal(-scrolledDistance)
        return scrolledDistance
    }

    private fun calculateScrollDistance(dx: Int): Int {
        val targetScroll = computeHorizontalScrollOffset(state) + dx
        val maxScroll = computeHorizontalScrollRange(state) - computeHorizontalScrollExtent(state)
        // 限制滚动范围，避免超出边界
        return (targetScroll.coerceIn(0, maxScroll) - computeHorizontalScrollOffset(state))
    }

    // 以下三个方法用于计算滚动相关的参数，保证滚动条正常显示
    override fun computeHorizontalScrollOffset(state: RecyclerView.State): Int {
        return if (childCount == 0) 0 else -getChildAt(0)!!.left + paddingLeft
    }

    override fun computeHorizontalScrollRange(state: RecyclerView.State): Int {
        val totalRows = (state.itemCount + spanCount - 1) / spanCount
        return paddingLeft + paddingRight + totalRows * itemHeight
    }

    override fun computeHorizontalScrollExtent(state: RecyclerView.State): Int {
        return height - paddingTop - paddingBottom
    }
}

使用的时候直接替换GridLayoutManager就行：

recyclerView.layoutManager = RowFirstGridLayoutManager(3, 100, 100) // 3列，每个Item宽高100px

方案二：分组+LinearLayoutManager（快速实现，适合简单场景） #

如果不想写复杂的自定义LayoutManager，可以用"分组"的思路绕过去：把数据源按每行的列数分成若干组，然后用横向的LinearLayoutManager来展示这些组，每个组内部是横向排列的图标。

步骤1：分组数据源 #

// 扩展函数：把列表按指定数量分组
fun <T> List<T>.groupBySpan(spanCount: Int): List<List<T>> {
    return chunked(spanCount)
}

步骤2：实现分组Adapter #

class IconGroupAdapter(private val groupedData: List<List<IconData>>) :
    RecyclerView.Adapter<IconGroupAdapter.GroupViewHolder>() {

    inner class GroupViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val iconContainer: LinearLayout = itemView.findViewById(R.id.icon_container)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): GroupViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_icon_group, parent, false)
        return GroupViewHolder(view)
    }

    override fun onBindViewHolder(holder: GroupViewHolder, position: Int) {
        val iconList = groupedData[position]
        holder.iconContainer.removeAllViews()
        // 逐个添加图标到组容器中
        iconList.forEach { iconData ->
            val iconView = LayoutInflater.from(holder.itemView.context)
                .inflate(R.layout.item_single_icon, holder.iconContainer, false)
            // 设置图标资源、文字等
            iconView.findViewById<ImageView>(R.id.icon_img).setImageResource(iconData.resId)
            holder.iconContainer.addView(iconView)
        }
    }

    override fun getItemCount() = groupedData.size
}

步骤3：设置RecyclerView #

// 原始图标列表
val originalIcons = listOf(IconData(R.drawable.icon1), IconData(R.drawable.icon2), ...)
// 按3列分组
val groupedIcons = originalIcons.groupBySpan(3)
// 设置RecyclerView
recyclerView.apply {
    layoutManager = LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false)
    adapter = IconGroupAdapter(groupedIcons)
}

这个方案的优点是实现快，不用碰LayoutManager的底层逻辑；缺点是如果数据量很大，会创建更多的子View，性能略逊于自定义LayoutManager。

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