Android 实现多种样式 item 列表

写了几年的代码了，真心体会到了，代码得一天一天的写，饭得一天一天的吃，一口气吃个胖子的天才也不是没有，但是自己吃几碗饭，自己还是清楚的，想一想很久之前，自己写多样式列表还是直接用别人的框架，套进去了，然后出一个盼着别出 bug 的列表，最近有时间，自己撸一个简单的 Kotlin 版本的多种样式 item 的列表。效果如下

效果

一、创建多个样式的 item

这里可以创建多种样式的 item ，也就是每个列表的子项，只展示一个

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/iv_img"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:contentDescription="@string/app_name"
    android:padding="10dp"
    android:src="@mipmap/lq">
</ImageView>

二、撰写 Adapter

这里算是要点了，重要的事情都是在这里了，创建个继承自 RecyclerView.Adapter 的 Adapter。
全体内容如下，稍后分部讲解都是干什么用的

class MyAdapter(private var context: Context) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {

    private val head: Int = 1000
    private val itemPt: Int = 1001
    private val cardView: Int = 1002

    private lateinit var data: List<Bean>


    fun setData(data: List<Bean>) {
        this.data = data
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder =
        when (viewType) {
            head -> HeadViewHolder(
                LayoutInflater.from(context).inflate(R.layout.item_head, parent, false)
            )
            itemPt -> PtViewHolder(
                LayoutInflater.from(context).inflate(R.layout.item_pt, parent, false)
            )
            cardView -> CardViewHolder(
                LayoutInflater.from(context).inflate(R.layout.item_card_view, parent, false)
            )
            else -> ImageViewHolder(
                LayoutInflater.from(context).inflate(R.layout.item_img, parent, false)
            )
        }


    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        val bean = data[position]
        when (holder) {
            is HeadViewHolder -> {
                Glide.with(context).load(bean.id1).into(holder.ibHead)
                holder.tvHead.text = bean.text
            }
            is PtViewHolder -> {
                Glide.with(context).load(bean.id1).into(holder.ivItemPt)
                holder.tvItemPt.text = bean.text
            }

            is CardViewHolder -> {
                Glide.with(context).load(bean.id1).into(holder.ivCard1)
                Glide.with(context).load(bean.id2).into(holder.ivCard2)
                Glide.with(context).load(bean.id3).into(holder.ivCard3)
            }

            is ImageViewHolder -> Glide.with(context).load(bean.id1).into(holder.ivItemImg)
        }
    }

    /**
     * 返回 数据 size
     */
    override fun getItemCount(): Int = data.size


    /**
     * 返回不同 item 标志位
     */
    override fun getItemViewType(position: Int): Int = data[position].type


    class HeadViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val ibHead: ImageButton = itemView.findViewById(R.id.ib_head)
        val tvHead: TextView = itemView.findViewById(R.id.tv_username)
    }

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

        val ivItemPt: ImageView = itemView.findViewById(R.id.iv_pt_item)
        val tvItemPt: TextView = itemView.findViewById(R.id.tv_pt_item);
    }

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

        val ivCard1: ImageView = itemView.findViewById(R.id.iv_card_1)
        val ivCard2: ImageView = itemView.findViewById(R.id.iv_card_2)
        val ivCard3: ImageView = itemView.findViewById(R.id.iv_card_3)
        val cvCard: CardView = itemView.findViewById(R.id.cv_card_view)
    }

    class ImageViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val ivItemImg: ImageView = itemView.findViewById(R.id.iv_img)
    }
}

1、生成多种 item 所需要得 type 值

private val head: Int = 1000
private val itemPt: Int = 1001
private val cardView: Int = 1002

效果中有 4 种样式，但是只写了 3个标志位，是不是作者有点懵，还真不是，这里类似于 if else ，当然了 Kotlin 内的 when 比 if else 好用多了。

2、getItemViewType 方法

override fun getItemViewType(position: Int): Int = data[position].type

这是个比较关键的问题，当数据 bean 内传来不同的 type 值，根据不同的标志位在RecycleView 中展示不同的 item 也就是这里的 ViewHolder

3、ViewHolder 撰写

class ImageViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val ivItemImg: ImageView = itemView.findViewById(R.id.iv_img)
    }

RecycleView 内需要展示多少种 item 则需要写多少 ViewHolder ，这里只展示一个 ViewHolder 内只做了一个初始化的控件。

4、onCreateViewHolder 方法

   override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder =
        when (viewType) {
            head -> HeadViewHolder(
                LayoutInflater.from(context).inflate(R.layout.item_head, parent, false)
            )
            itemPt -> PtViewHolder(
                LayoutInflater.from(context).inflate(R.layout.item_pt, parent, false)
            )
            cardView -> CardViewHolder(
                LayoutInflater.from(context).inflate(R.layout.item_card_view, parent, false)
            )
            else -> ImageViewHolder(
                LayoutInflater.from(context).inflate(R.layout.item_img, parent, false)
            )
        }

这里需要根据不同的 item 的标志位还初始化不同的 ViewHolder ，这里就展示了 when 关键字的好处了，各种方便尽显，这里也解释了为什么有 4 种 item 而只写了 3 个标志位了。

5、onBindViewHolder 方法

 override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        val bean = data[position]
        when (holder) {
            is HeadViewHolder -> {
                Glide.with(context).load(bean.id1).into(holder.ibHead)
                holder.tvHead.text = bean.text
            }
            is PtViewHolder -> {
                Glide.with(context).load(bean.id1).into(holder.ivItemPt)
                holder.tvItemPt.text = bean.text
            }

            is CardViewHolder -> {
                Glide.with(context).load(bean.id1).into(holder.ivCard1)
                Glide.with(context).load(bean.id2).into(holder.ivCard2)
                Glide.with(context).load(bean.id3).into(holder.ivCard3)
            }

            is ImageViewHolder -> Glide.with(context).load(bean.id1).into(holder.ivItemImg)
        }
    }

这里根据不同的标志位，向各个 ViewHolder 内的不同控件内配置数据。

三、配置数据展示列表

class MainActivity : AppCompatActivity() {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        rv_main.layoutManager = LinearLayoutManager(this)
        val adapter = MyAdapter(this)
        rv_main.adapter = adapter
        
        val list = ArrayList<Bean>()
        list.add(Bean(1000, "韩小呆", R.mipmap.cf))
        list.add(Bean(1001, "设置", R.mipmap.dh))
        list.add(Bean(1001, "客服", R.mipmap.dx))
        list.add(Bean(1001, "升级", R.mipmap.qf))
        list.add(Bean(1001, "修改", R.mipmap.ld))
        list.add(Bean(1002, "", R.mipmap.ld, R.mipmap.dx, R.mipmap.cf))
        list.add(Bean(1003, "", R.mipmap.ld))
        list.add(Bean(1002, "", R.mipmap.dh, R.mipmap.lc, R.mipmap.lq))
        list.add(Bean(1002, "", R.mipmap.lc, R.mipmap.lx, R.mipmap.gy))
        list.add(Bean(1002, "", R.mipmap.hl, R.mipmap.hl, R.mipmap.qf))
        list.add(Bean(1003, "", R.mipmap.gy))
        list.add(Bean(1002, "", R.mipmap.cf, R.mipmap.lx, R.mipmap.gy))
        list.add(Bean(1003, "", R.mipmap.ld))
        adapter.setData(list)
        adapter.notifyDataSetChanged()
    }
}

这里和之前配置是一样的，下面也写一下 bean 类

class Bean(
    var type: Int = 1000,
    var text: String = "",
    var id1: Int = R.mipmap.dh,
    var id2: Int = R.mipmap.dh,
    var id3: Int = R.mipmap.dh
)

这里为每一个参数配置了初始化值。

附赠源码

欢迎关注码虫韩小呆