Combined with viewBinding to implement scrolling list display of RecyclerView component

RecyclerView is a list display tool that can display content in a list. In this article, we will combine viewBinding to implement data binding.
1. Define the entity class
data class Robot(val imageId:Int,val title:String,val message:String)

2. Define the layout of single-item data.
The layout of single-item data item_robot.xml is embedded in CardView. The code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tool"

    android:id="@+id/cardView"
    android:layout_margin="5dp"
    app:cardBackgroundColor="@android:color/holo_blue_bright"
    app:cardCornerRadius="5dp"
    app:cardElevation="3dp"
    app:contentPadding="4dp"

    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@android:mipmap/sym_def_app_icon" />
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:id="@+id/nameTxt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Robot"
                android:textSize="20sp" />
            <TextView
                android:id="@+id/descTxt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="安卓机器人"
                android:textSize="24sp" />
        </LinearLayout>

    </LinearLayout>

</androidx.cardview.widget.CardView>

3. Define the adapter.
The adapter implements the binding of data and views.

class RobotAdapter(val robots:List<Robot>):
    RecyclerView.Adapter<RobotAdapter.ViewHolder>() {
    
    
        inner class ViewHolder(val binding: ItemRobotBinding):
            RecyclerView.ViewHolder(binding.root){
    
    
            fun bindData(robot:Robot){
    
    
                binding.imageView.setImageResource(robot.imageId)
                binding.nameTxt.text = robot.title
                binding.descTxt.text = robot.message
                binding.imageView.setOnClickListener {
    
    
                    Snackbar.make(binding.root,"显示${robot.toString()}",Snackbar.LENGTH_LONG).show()
                }
             
            }
        }
    /**创建视图*/
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    
    
        val binding = ItemRobotBinding.inflate(LayoutInflater.from(parent.context),
            parent,
            false)//视图绑定item_robot.xml
        return ViewHolder(binding)
    }

    /**绑定数据*/
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    
    
        val robot = robots[position]
        holder.bindData(robot)
    
    }

    override fun getItemCount(): Int=robots.size
}

4. Load RecyclerView in the fragment FirstFragment
and modify the content of FirstFragment in the previous article "Fragment Switching"
(1) The layout fragment_first.xml corresponding to FirstFragment

<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView
    android:background="@android:color/holo_green_light"
    android:id="@+id/recyclerView"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".AboutFragment"/>

(2) FirstFragment displays the processing of scrolling list

object FirstFragment : Fragment() {
    
    
    lateinit var binding:FragmentAboutBinding
    lateinit var robots:ArrayList<Robot>

    override fun onCreate(savedInstanceState: Bundle?) {
    
    
        super.onCreate(savedInstanceState)
        robots = ArrayList<Robot>()
   
        for(i in 0..10){
    
    
            robots.add(Robot(R.mipmap.ic_launcher,"机器人","编号：${i+1}"))
        }
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
    
    
        binding = FragmentAboutBinding.inflate(inflater,container,false)
        val adapter = RobotAdapter(robots)
        binding.recyclerView.layoutManager =
            StaggeredGridLayoutManager(1,StaggeredGridLayoutManager.VERTICAL)//瀑布布局显示
        binding.recyclerView.adapter = adapter

        return binding.root
    }
}

The running results are as follows

References
"Android Mobile Application Development (Micro Course Edition)" Chen Yi Tsinghua University Press　
　ISBN: 978-7-302-59734-6