安卓開發入門教程-UI控件_RecyclerView 什麼是RecyclerView 基礎樣例

什麼是RecyclerView

RecyclerView是當前主流用於顯示列表的UI控件.

基礎樣例

效果圖

方案簡要介紹

1. 在app模塊build.gradle文件中增加如下依賴

implementation 'androidx.recyclerview:recyclerview:1.1.0'

2. 在activity對應的佈局文件中增加RecyclerView

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

2. 新增一個Adapter用於展示列表中每一行內容(含對應佈局文件)
   詳見下面完整代碼中的RvAdapter及其佈局文件.
3. 在activity中實例化Adapter,設置數據,並將adapter設置給RecyclerView

private fun initRecyclerView() {
    var dataList = getData()
    val adapter = RvAdapter()
    adapter.setData(dataList)
    recyclerView.adapter = adapter
    recyclerView.layoutManager = LinearLayoutManager(this)
}

private fun getData(): List<String> {
    val dataList = ArrayList<String>()
    for (index in 0 until 100) {
        val text = " 數據$index "
        dataList.add(text)
    }
    return dataList
}

完整代碼

1. activity代碼:MainActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initRecyclerView()
    }

    private fun initRecyclerView() {
        var dataList = getData()
        val adapter = RvAdapter()
        adapter.setData(dataList)
        recyclerView.adapter = adapter
        recyclerView.layoutManager = LinearLayoutManager(this)
    }

    private fun getData(): List<String> {
        val dataList = ArrayList<String>()
        for (index in 0 until 100) {
            val text = " 數據$index "
            dataList.add(text)
        }
        return dataList
    }
}

2. MainActivity對應佈局文件: activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

3. RecyclerView對應Adapter: RvAdapter

class RvAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    private var mDataList = mutableListOf<String>()
    private lateinit var mContext: Context
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        mContext = parent.context
        val view = LayoutInflater.from(mContext).inflate(R.layout.item_layout, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        val data = mDataList[position]
        //更新UI上nameTv展示內容
        holder.itemView.nameTv.text = data
        //設置點擊事件
        holder.itemView.setOnClickListener {
            Toast.makeText(mContext, data, Toast.LENGTH_SHORT).show()
        }
    }

    fun setData(dataList: List<String>) {
        mDataList.clear()
        mDataList.addAll(dataList)
        notifyDataSetChanged()
    }

    override fun getItemCount(): Int = mDataList.size

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
}

4. RvAdapter對應佈局文件: item_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/nameTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        tools:text="姓名" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginStart="15dp"
        android:layout_marginEnd="15dp"
        android:layout_marginTop="5dp"
        android:background="#E7E7E7" />
</LinearLayout>

基礎樣例完整源代碼

https://gitee.com/cxyzy1/recyclerView_Demo