『Android基础入门』RecyclerView列表组件的简单使用

StarAndroid
282 阅读5分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

👨‍🎓作者简介：一位喜欢写作，计科专业的大二菜鸟

🏡个人主页：starry陆离

🕒首发日期：2022年6月21日星期二

🌌上期文章：『Android开源控件』Glide图片加载库

📚订阅专栏：『Android基础入门』 如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦

​

​

『Android基础入门』RecyclerView列表组件的简单使用

注意：不是教程只是笔记，如有错误欢迎批评指正

1.简介

使用 RecyclerView 创建动态列表 | Android 开发者 | Android Developers (google.cn)

RecyclerView是Android推出的列表组件，例如QQ的消息列表，备忘录的条目列表等等都是可以使用RecyclerView来实现

2.创建RecyclerView

新建一个Module，取名为recyclerview

image-20220425202435849

在xml文件下，可以看到常用的组件里就有RecyclerView组件

image-20220425202944858

直接拖动一个RecyclerView组件到布局上并设置好约束，可以看到它布满了整个屏幕而且上面有一些小的条目

image-20220425203318445

image-20220425203427107

3.创建一个Item.xml布局

我们分析一下如何使用RecyclerView，因为它是一个列表组件，那么列表里的每一项条目的布局都是类似的，只有内容有差异，比如备忘录的布局，那么我们需要为列表的条目设置一个布局，然后将这个布局复制n份，动态添加在RecyclerView中

那么我就以备忘录为例，建立RecyclerView

备忘录

创建一个item_chat.xml的布局文件

image-20220425204306175

新建的item_chat.xml布局文件，啥也没有，一贫如洗，而且这个布局文件的约束布局是布满整个页面的；这里需要调整一下，因为我们要在这个布局文件里创建好一个条目的布局，它是不需要这么大的，所以item_chat页面的约束布局高度需要自己灵活设置（这一点很重要） ，这里我设置成100dp，并在上面创建好一个备忘录条目的必要组件

Snipaste_2022-04-25_21-22-59

item_chat.xml的关键代码

 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="100dp">
 ​
 ​
     <TextView
         android:id="@+id/textView"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginStart="32dp"
         android:layout_marginTop="16dp"
         android:text="TextView"
         android:textSize="20sp"
         android:textColor="@color/black"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 ​
     <TextView
         android:id="@+id/textView2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="TextView"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="@+id/textView"
         app:layout_constraintTop_toBottomOf="@+id/textView" />
 ​
     <TextView
         android:id="@+id/textView3"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginStart="21dp"
         android:text="TextView"
         app:layout_constraintBaseline_toBaselineOf="@+id/textView2"
         app:layout_constraintStart_toEndOf="@+id/textView2" />
 </androidx.constraintlayout.widget.ConstraintLayout>

4.创建实体类chat

因为这里我在一个条目创建了三个文本组件，分别对应便签的标题，创建时间和内容，为了实现动态添加和更新这些数据，需要创建一个实体类chat（怎么创建一个java文件这个之前有记录过，并不是创建一个Activity）

image-20220425213143073

image-20220425213331134

5.创建ViewHolder类获取组件

那么在主Activity中如何获取到item布局里的组件呢？我们需要在主activity中创建一个内部类，继承RecyclerView.ViewHolder，重写其中的MyViewHolder(@NonNull View itemView)方法，其中有一个参数itemView，通过itemView我们可以获取到item_chat.xml布局里的组件，以及整个布局，不过同样要给约束布局设置好id，才能拿到它，这里我的item_chat.xml里的约束布局的id名为rootView

image-20220425214719639

MainActivity关键代码

 public class MainActivity extends AppCompatActivity {
 ​
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
     }
 ​
 ​
     /*如何获取到item里的内容？？？
      *
      * 1. 在Activity中创建一个内部类*/
     /*创建一个内部类，用于获取item_chat.xml中的组件*/
     public class MyViewHolder extends RecyclerView.ViewHolder{
 ​
         TextView textView1;
         TextView textView2;
         TextView textView3;
         ConstraintLayout constraintLayout;
         public MyViewHolder(@NonNull View itemView) {
             super(itemView);
             /*并不是直接使用findViewById,而是通过调用itemView
              * 如果直接使用findViewById，默认是在MainActivity中查找*/
             textView1 = itemView.findViewById(R.id.textView);
             textView2 = itemView.findViewById(R.id.textView2);
             textView3 = itemView.findViewById(R.id.textView3);
             constraintLayout=itemView.findViewById(R.id.rootView);
         }
     }
 ​
 }

6.创建Adapter类设置RecyclerView中的内容

获取到了item_chat里布局的内容，我们只需要将其复制n份，设置在RecyclerView组件中就实现了列表组件，我们需要用到Adapter类，RecyclerView.Adapter<MyViewHolder>，并且将我们刚刚创建的MyViewHolder类作为泛型传入，然后重写RecyclerView.Adapter<>里的三个方法，它们的功能分别如下图所示：

image-20220425225745197

这里扩展学了一点RecyclerView.Adapter和RecyclerView.ViewHolder的知识

确定布局后，需要实现 Adapter 和 ViewHolder。这两个类配合使用，共同定义数据的显示方式。ViewHolder 是包含列表中各列表项的布局的 View 的封装容器。Adapter 会根据需要创建 ViewHolder 对象，还会为这些视图设置数据。将视图与其数据相关联的过程称为“绑定”。

定义 Adapter 时，需要替换三个关键方法：

  • onCreateViewHolder()每当 RecyclerView 需要创建新的 ViewHolder 时，它都会调用此方法。此方法会创建并初始化 ViewHolder 及其关联的 View，但不会填充视图的内容，因为 ViewHolder 此时尚未绑定到具体数据。
  • [onBindViewHolder()：RecyclerView 调用此方法将 ViewHolder 与数据相关联。此方法会提取适当的数据，并使用该数据填充 ViewHolder 的布局。例如，如果 RecyclerView 显示的是一个名称列表，该方法可能会在列表中查找适当的名称，并填充 ViewHolder 的 TextView widget。
  • getItemCount()：RecyclerView 调用此方法来获取数据集的大小。例如，在通讯簿应用中，这可能是地址总数。RecyclerView 使用此方法来确定什么时候没有更多的列表项可以显示。

MyAdapter类中关键代码

  /*泛型的使用，负责将布局文件复制n次*/
     public class MyAdapter extends RecyclerView.Adapter<MyViewHolder>{
 ​
         /*加载并返回布局文件   java->xml*/
         @NonNull
         @Override
         public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
             View view= LayoutInflater.from(MainActivity.this).inflate(R.layout.item_chat,parent,false);
             MyViewHolder myViewHolder=new MyViewHolder(view);
             return myViewHolder;
         }
         /*填充，修改布局里的控件内容*/
         /*1.可以将数据提前填充到一个数组中
          * 2.通过数组的下标获取到值，填充到控件中*/
         @Override
         public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
 ​
             chat chat=chatList.get(position);
 ​
             holder.textView1.setText(chat.title);
             holder.textView2.setText(chat.time);
             holder.textView3.setText(chat.content);
         }
         /*将布局复制的次数，返回值为item显示的数量*/
         @Override
         public int getItemCount() {
             return chatList.size();
         }
     }
 ​

7.在MainActivity中添加逻辑代码(java完整代码)

 public class MainActivity extends AppCompatActivity {
 ​
     List<chat> chatList=new ArrayList<chat>();
     RecyclerView recyclerView;
     MyAdapter myAdapter;
 ​
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
 ​
         //获取recyclerView
         //这里要通过id获取到activity_main.xml布局文件里的RecyclerView组件
         //前面的笔记里没设置，需要去xml文件里给RecyclerView组件添加一个id属性
         recyclerView=findViewById(R.id.recyclerView);
         //填充一些数据
         for(int i=0;i<10;++i){
             chat chats=new chat();
             chats.title="便签"+i;
             chats.time="12:"+(10+i);
             chats.content="开心的第"+i+"天";
             chatList.add(chats);
         }
 ​
         myAdapter=new MyAdapter();
         //填充布局文件
         recyclerView.setAdapter(myAdapter);
         /*设置布局文件的显示方式*/
         recyclerView.setLayoutManager(new LinearLayoutManager(this));
     }
 ​
     /*泛型的使用，负责将布局文件复制n次*/
     public class MyAdapter extends RecyclerView.Adapter<MyViewHolder>{
 ​
         /*加载并返回布局文件   java->xml*/
         @NonNull
         @Override
         public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
             View view= LayoutInflater.from(MainActivity.this).inflate(R.layout.item_chat,parent,false);
             MyViewHolder myViewHolder=new MyViewHolder(view);
             return myViewHolder;
         }
         /*填充，修改布局里的控件内容*/
         /*1.可以将数据提前填充到一个数组中
          * 2.通过数组的下标获取到值，填充到控件中*/
         @Override
         public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
 ​
             chat chat=chatList.get(position);
 ​
             holder.textView1.setText(chat.title);
             holder.textView2.setText(chat.time);
             holder.textView3.setText(chat.content);
         }
         /*将布局复制的次数，返回值为item显示的数量*/
         @Override
         public int getItemCount() {
             return chatList.size();
         }
     }
 ​
 ​
     /*如何获取到item里的内容？？？
      *
      * 1. 在Activity中创建一个内部类*/
     /*创建一个内部类，用于获取item_chat.xml中的组件*/
     public class MyViewHolder extends RecyclerView.ViewHolder{
 ​
         TextView textView1;
         TextView textView2;
         TextView textView3;
         ConstraintLayout constraintLayout;
         public MyViewHolder(@NonNull View itemView) {
             super(itemView);
             /*并不是直接使用findViewById,而是通过调用itemView
              * 如果直接使用findViewById，默认是在MainActivity中查找*/
             textView1 = itemView.findViewById(R.id.textView);
             textView2 = itemView.findViewById(R.id.textView2);
             textView3 = itemView.findViewById(R.id.textView3);
             constraintLayout=itemView.findViewById(R.id.rootView);
         }
     }
 ​
 }

recyclerView演示1

8.给列表组件添加响应

实现了基本的界面，需要点击进去查看便签内容啊，如何实现RecyclerView中的item的事件监听呢？

创建一个新的Activity，在它的布局中添加一个文本组件以示区分

image-20220426195351298

回到主Activity中，事件监听在onBindViewHolder()中实现

image-20220426195715322 在这里插入图片描述

avatar
文章
阅读
粉丝