如何用RecyclerView创建支持横竖滚动、含随机尺寸元素的网格？

1. 依赖引入 #

先添加Flexbox Layout的官方依赖（可根据需求替换为最新版本）：

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

2. 布局文件设置 #

通过嵌套容器实现二维滚动，让RecyclerView支持横向+纵向自由拖动：

<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" />

</HorizontalScrollView>

HorizontalScrollView负责横向滚动，RecyclerView负责纵向滚动，组合后即可实现类似大图片的任意方向拖动效果。

3. 配置Flexbox布局管理器 #

给RecyclerView设置FlexboxLayoutManager，适配不同尺寸的元素排列：

val flexboxManager = FlexboxLayoutManager(context).apply {
    flexDirection = FlexDirection.ROW // 元素横向排列
    flexWrap = FlexWrap.WRAP // 超出宽度自动换行
    justifyContent = JustifyContent.FLEX_START // 左对齐
    alignItems = AlignItems.FLEX_START // 顶部对齐
}
recyclerView.layoutManager = flexboxManager
recyclerView.adapter = RandomSizeItemAdapter()

4. 生成随机尺寸的Item #

在Adapter中动态给每个Item设置随机宽高：

class RandomSizeItemAdapter : RecyclerView.Adapter<RandomSizeItemAdapter.ViewHolder>() {
    private var itemCount = 100
    private val random = Random()

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        // 随机生成100-300dp的宽高
        val dpToPx = holder.itemView.context.resources.displayMetrics.density
        val width = (random.nextInt(200) + 100) * dpToPx
        val height = (random.nextInt(200) + 100) * dpToPx

        holder.itemView.layoutParams.apply {
            this.width = width.toInt()
            this.height = height.toInt()
        }
        // 随机背景色区分不同元素
        holder.itemView.setBackgroundColor(Color.rgb(
            random.nextInt(256),
            random.nextInt(256),
            random.nextInt(256)
        ))
    }

    override fun getItemCount() = itemCount

    // 加载更多数据的方法
    fun loadMore() {
        itemCount += 50
        notifyDataSetChanged()
    }
}

对应的Item布局item_flex.xml仅需基础结构：

<View xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="4dp"/>

5. 滚动时自动加载新元素 #

给RecyclerView添加滚动监听，实现滚动到底部时自动加载：

recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        super.onScrolled(recyclerView, dx, dy)
        val layoutManager = recyclerView.layoutManager as FlexboxLayoutManager
        val lastVisiblePos = layoutManager.findLastVisibleItemPosition()
        // 滚动到倒数第5个元素时触发加载
        if (lastVisiblePos >= itemCount - 5) {
            (recyclerView.adapter as RandomSizeItemAdapter).loadMore()
        }
    }
})

关键注意点 #

• 必须将RecyclerView的宽度设为wrap_content，否则HorizontalScrollView无法识别横向滚动需求
• FlexboxLayoutManager的flexWrap需设置为WRAP，否则元素不会换行形成网格
• 关闭RecyclerView的setHasFixedSize(true)，因为Item尺寸是动态变化的

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