如何在Android中实现混合Linear与Grid布局的多ViewHolder RecyclerView

你要实现的效果参考下图：

核心结论 #

单个RecyclerView仅支持绑定一个LayoutManager，不需要同时使用LinearLayoutManager和GridLayoutManager，通过GridLayoutManager + 多ViewHolder + 跨列规则即可完美实现你需要的混合布局效果。

具体实现步骤 #

• 步骤1：定义不同item对应的ViewType常量
  在RecyclerView.Adapter中新增不同布局对应的类型标记：

  // 示例定义两种ViewType：满宽的线性样式item、网格样式item，可根据业务新增更多类型
  private const val VIEW_TYPE_FULL_WIDTH = 0
  private const val VIEW_TYPE_GRID = 1
  

• 步骤2：重写getItemViewType方法，匹配item对应的布局类型
  根据业务数据的属性或者位置，返回当前位置对应的ViewType：

  override fun getItemViewType(position: Int): Int {
      val currentItem = dataList[position]
      // 示例逻辑：标记为通栏的item返回满宽类型，其余返回网格类型
      return if (currentItem.isFullWidth) VIEW_TYPE_FULL_WIDTH else VIEW_TYPE_GRID
  }
  

• 步骤3：创建多个ViewHolder子类，对应不同布局的渲染逻辑
  在onCreateViewHolder中根据ViewType加载不同的布局文件，返回对应的ViewHolder实例：

  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
      val inflater = LayoutInflater.from(parent.context)
      return when (viewType) {
          VIEW_TYPE_FULL_WIDTH -> {
              val view = inflater.inflate(R.layout.item_full_width, parent, false)
              FullWidthViewHolder(view)
          }
          VIEW_TYPE_GRID -> {
              val view = inflater.inflate(R.layout.item_grid, parent, false)
              GridViewHolder(view)
          }
          else -> throw IllegalArgumentException("不支持的ViewType：$viewType")
      }
  }
  

• 步骤4：配置GridLayoutManager的跨列规则
  给RecyclerView设置GridLayoutManager，指定网格的基础列数，再通过spanSizeLookup配置不同ViewType对应的跨列数量，满宽item的跨列数等于总列数即可实现和LinearLayoutManager一致的效果：

  // 示例设置基础网格为2列，可根据需求调整为3、4列
  val layoutManager = GridLayoutManager(context, 2)
  layoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
      override fun getSpanSize(position: Int): Int {
          return when (adapter.getItemViewType(position)) {
              // 满宽item跨2列，占满整行
              VIEW_TYPE_FULL_WIDTH -> 2
              // 网格item占1列
              VIEW_TYPE_GRID -> 1
              else -> 1
          }
      }
  }
  recyclerView.layoutManager = layoutManager
  recyclerView.adapter = yourAdapter
  

• 步骤5：绑定不同ViewHolder的数据
  在onBindViewHolder中根据ViewHolder类型，绑定对应的数据即可：

  override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
      val itemData = dataList[position]
      when (holder) {
          is FullWidthViewHolder -> holder.render(itemData)
          is GridViewHolder -> holder.render(itemData)
      }
  }
  

扩展说明 #

如果需要实现更多混合布局样式（比如头部Banner、分类分割栏、瀑布流卡片等），只需要新增对应的ViewType和ViewHolder，同时在spanSizeLookup中配置对应跨列数即可，无需调整整体框架逻辑。

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