美文网首页简化开发
RecyclerView-实现多布局

RecyclerView-实现多布局

作者: Android砖家 | 来源:发表于2020-11-03 11:24 被阅读0次

在安卓开发中,随着业务的丰富,在列表数据展示中,布局多样式很常见,如下图所示:

yhx.gif

第一步:拿到UI页面之后不要慌,分析页面有几种类型展示,拿上图来说,一共四种类型。下图标记说明:

yhx.png

第二步:上代码:

class RvAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    private var liquidates = mutableListOf<DataBean>()

     //标识布局类型
    companion object {
        const val TYPE_ONE = 1
        const val TYPE_TWO = 2
        const val TYPE_THREE = 3
        const val TYPE_FOUR = 4
    }

    fun setDatas(lists: MutableList<DataBean>) {
        this.liquidates = lists
        notifyDataSetChanged()
    }


    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        return when (viewType) {
            TYPE_ONE -> {
                OneViewHolder((LayoutInflater.from(parent.context).inflate(R.layout.rv_item_type_one, parent, false)))
            }
            TYPE_TWO -> {
                TwoViewHodler((LayoutInflater.from(parent.context).inflate(R.layout.rv_item_type_two, parent, false)))
            }
            TYPE_THREE -> {
                ThreeViewHolder((LayoutInflater.from(parent.context).inflate(R.layout.rv_item_type_three, parent, false)))
            }
            else -> {
                FourViewHolder((LayoutInflater.from(parent.context).inflate(R.layout.rv_item_type_four, parent, false)))
            }
        }
    }

    override fun getItemCount(): Int {
        return liquidates.size
    }

   /**
     * 这个方法重要
     * 说明 根据数据源中bean中 type标识返回当前布局类型
     */
    override fun getItemViewType(position: Int): Int {

        return when (liquidates[position].type) {
            1 -> {
                TYPE_ONE
            }
            2 -> {
                TYPE_TWO
            }
            3 -> {
                TYPE_THREE
            }
            else -> {
                TYPE_FOUR
            }
        }
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        val item = liquidates[position]
        when (holder.itemViewType) {
            TYPE_ONE -> {
                val oneViewHolder = holder as OneViewHolder
                //设置数据
                oneViewHolder.itemView.title.text = item.name

            }
            TYPE_TWO -> {
                val twoViewHodler = holder as TwoViewHodler
                //
                twoViewHodler.itemView.title.text = item.name
            }
            TYPE_THREE -> {
                val threeViewHolder = holder as ThreeViewHolder
            }

            else -> {
                val fourViewHolder = holder as FourViewHolder
            }
        }
    }


    class OneViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

    }

    class TwoViewHodler(itemView: View) : RecyclerView.ViewHolder(itemView) {

    }


    class ThreeViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

    }

    class FourViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

    }

}

第三步:MainActivity

class MainActivity : AppCompatActivity() {

    val rvAdapter by lazy {
        RvAdapter()
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)


        val gridLayoutManager = GridLayoutManager(this, 4)
        gridLayoutManager.spanSizeLookup = mySpanSizeLookup()
        Rv.layoutManager = gridLayoutManager
        Rv.adapter = rvAdapter
        rvAdapter.setDatas(getlistDatas())
    }


    fun getlistDatas(): MutableList<DataBean> {
        val lists = mutableListOf<DataBean>()

        lists.add(DataBean("这是标题栏1>>>> 表示第一种布局类型", 1))
        lists.add(DataBean("这是内容2>>>> 表示第二种布局类型", 2))
        lists.add(DataBean("这是内容3>>>> 表示第二种布局类型", 3))
        lists.add(DataBean("这是内容3>>>> 表示第二种布局类型", 4))
        lists.add(DataBean("这是内容3>>>> 表示第二种布局类型", 4))
        lists.add(DataBean("这是内容3>>>> 表示第二种布局类型", 4))

        lists.add(DataBean("这是标题栏1>>>> 表示第一种布局类型", 1))
        lists.add(DataBean("这是内容3>>>> 表示第二种布局类型", 4))
        lists.add(DataBean("这是内容3>>>> 表示第二种布局类型", 4))
        lists.add(DataBean("这是内容3>>>> 表示第二种布局类型", 4))

        lists.add(DataBean("这是标题栏1>>>> 表示第一种布局类型", 1))
        lists.add(DataBean("这是内容2>>>> 表示第二种布局类型", 2))
        lists.add(DataBean("这是内容3>>>> 表示第二种布局类型", 3))

        lists.add(DataBean("这是标题栏1>>>> 表示第一种布局类型", 1))
        lists.add(DataBean("这是内容3>>>> 表示第二种布局类型", 4))
        lists.add(DataBean("这是内容3>>>> 表示第二种布局类型", 4))
        lists.add(DataBean("这是内容3>>>> 表示第二种布局类型", 4))

        lists.add(DataBean("这是标题栏1>>>> 表示第一种布局类型", 1))
        lists.add(DataBean("这是内容3>>>> 表示第二种布局类型", 4))
        lists.add(DataBean("这是内容3>>>> 表示第二种布局类型", 4))
        lists.add(DataBean("这是内容3>>>> 表示第二种布局类型", 4))

        return lists
    }

    inner class mySpanSizeLookup : GridLayoutManager.SpanSizeLookup() {
        override fun getSpanSize(position: Int): Int {

            return when (getlistDatas()[position].type) {
                //当type为1,或4时,当前item布局所占权重为4份,也就是一行显示。
               //在上面我们设置了GridLayoutManager为一行显示4个item,每个item所占比为1/4。
                1,4 -> {
                    4
                }
            //以此类推,当type 2或3时,为屏幕的一半。(比重由GridLayoutManager初始值决定)
                2,3 -> {
                    2
                }
                else -> {
                    0
                }
            }
        }

    }
}

总结:RecyclerView复杂的多布局结合SpanSizeLookup使用,比较容易实现。把数据源造好,demo中,比较难理解的地方,我都给了注释说明

相关文章

  • RecyclerView-实现多布局

    在安卓开发中,随着业务的丰富,在列表数据展示中,布局多样式很常见,如下图所示: 第一步:拿到UI页面之后不要慌,分...

  • 05 RecyclerView-布局过程

    前言 本文中,我将从RecyclerView插入Item 和 删除Item的两个场景,通过dispatchLayo...

  • 05 RecyclerView-布局原理

    前言 本文主要通过以下两个方面来讲解RecyclerView的布局原理: 布局放置:dispatchLayout(...

  • BaseQuickAdapter实现拖拽排序或多布局

    实现拖拽 继承BaseItemDraggableAdapter onItemDragListener 实现多布局 ...

  • CSS-多列布局3-瀑布流

    1、实现效果 2、实现思路 (1) 使用多列布局进行布局。(2) 使用column-break-inside 防止...

  • 多布局的实现

    1., 导入 baseRecyclerviewHelper 依赖 2, 下载具体的demo 3, 将demo 运...

  • RecyclerView实现多布局

    这里是我写的一种常规实现,思路清晰易懂。开始接触这类需求的时候我都是这么写的,适合于新手使用。有助于帮助使用者形成...

  • RecyclerView多布局实现

    实现效果 实现原理 为recyclerview设置GridLayoutManager,通过重写adapter中的o...

  • BaseMultiItemQuickAdapter实现多布局

    有种需求,在点击按钮的时候,改变RecyclerView的列数以及布局。 如果用的RecyclerView.Ada...

  • ItemBinding多布局实现

    国际惯例:上个效果图 简单介绍一下,就是使用ItemBinding来分类型加载布局,告别Adapter的同时也告别...

网友评论

    本文标题:RecyclerView-实现多布局

    本文链接:https://www.haomeiwen.com/subject/dpjbvktx.html