Android 實現(xiàn)多種樣式 item 列表

寫了幾年的代碼了，真心體會到了制市，代碼得一天一天的寫抬旺，飯得一天一天的吃，一口氣吃個胖子的天才也不是沒有祥楣，但是自己吃幾碗飯开财，自己還是清楚的，想一想很久之前误褪，自己寫多樣式列表還是直接用別人的框架责鳍，套進去了，然后出一個盼著別出 bug 的列表兽间，最近有時間历葛，自己擼一個簡單的 Kotlin 版本的多種樣式 item 的列表。效果如下

效果

一嘀略、創(chuàng)建多個樣式的 item

這里可以創(chuàng)建多種樣式的 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

這里算是要點了咒程，重要的事情都是在這里了，創(chuàng)建個繼承自 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)
        }
    }

    /**
     * 返回 數(shù)據(jù) 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

這是個比較關鍵的問題刺洒，當數(shù)據(jù) bean 內傳來不同的 type 值，根據(jù)不同的標志位在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)
            )
        }

這里需要根據(jù)不同的 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)
        }
    }

這里根據(jù)不同的標志位，向各個 ViewHolder 內的不同控件內配置數(shù)據(jù)澳眷。

三胡嘿、配置數(shù)據(jù) 展示列表

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
)

這里為每一個參數(shù) 配置了初始化值钳踊。

附贈源碼

歡迎關注碼蟲韓小呆