Android開發使用RecyclerView新增點選事件範例詳解

2022-08-24 18:03:01

引言

RecyclerView是在Android5.0版本作為support-v7的一個元件出現，高效替代了最初的ListView等列表元件。

使用上實現了檢視程式碼解耦，功能上具備強大的item複用機制，並且提供預設多種LayoutMananger用來處理多種佈局，本篇介紹給RecyclerView基本使用和新增點選事件。

新增RecyclerView依賴

implementation 'androidx.recyclerview:recyclerview:1.1.0'

一、RecyclerView基本使用

1. 新增介面卡Adapter

class NewsAdapter(private val newsList: List<NewsInfo>, ): RecyclerView.Adapter<NewsAdapter.ViewHolder>() {
    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        // ViewHolder
    }
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_layout, parent, false)
        return ViewHolder(view)
    }
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        // 繫結資料
    }
    override fun getItemCount(): Int {
        return myList.size
    }
}

2. 建立列表的每個項的item_layout.xml檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_marginHorizontal="10dp"
    android:layout_marginTop="10dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:text="title"
        android:textSize="16sp"
        android:textColor="#000000" />
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="200dp" />
    <View
        android:layout_width="match_parent"
        android:layout_height="0.1dp"
        android:layout_marginTop="10dp"
        android:background="#d3d3d3" />
</LinearLayout>

3. 在activity中使用

    // 設定LayoutManager，這裡選用LinearLayoutManager線性佈局作為範例
    recyclerView.layoutManager = LinearLayoutManager(MyApplication.context)
    // 建立介面卡
    val newsAdapter = NewsAdapter(newsList)
    // 設定介面卡
    recyclerView.adapter = newsAdapter

二、RecyclerView點選事件詳細步驟

1. 在RecyclerView對應的Adapter類裡面新建介面

    //建立OnItemClickListener介面
    interface OnItemClickListener {
        fun onItemClick(position: Int)
    }

2. 在Adapter類裡建立setOnItemClickListener方法

    //宣告一個mItemClickListener介面
    private var mOnItemClickListener: OnItemClickListener? = null
    //新增setOnItemClickListener方法
    fun setOnItemClickListener(listener: OnItemClickListener?) {
        mOnItemClickListener = listener
    }

3. 在Adapter類的onBindViewHolder裡給每個item設定回撥

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        ......
        //給每個Item的點選事件設定回撥
        holder.itemView.setOnClickListener {
            mOnItemClickListener?.onItemClick(position)
        }
    }

4. 在RecyclerView對應的Activity裡新增點選事件

    val adapter = YourAdapter(YourData)  //介面卡
    adapter.setOnItemClickListener(object : YourAdapter.OnItemClickListener {
        override fun onItemClick(position: Int) {
            Toast.makeText(this@YourActivity, "You clicked No.${position} item.", Toast.LENGTH_SHORT).show()
        }
    })