Android RecycleView的使用方法（小白也能懂，手把手教学，超详细）

忘是亡心i 2023-02-20 12:30 211阅读 0赞

# 1. 成品快速一览 #

**项目源码已经上传到Gitee码云了（国内的GitHub，访问与下载速度极快，无需龟速等待），戳[这里][Link 1]。**

成品做成了瀑布流的形式，一行代码就可以搞定一列显示几行，类似于淘宝京东的商品显示，随心切换。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70]

# 2.项目前准备 #

做软件和做菜是一样的，先准备好一些材料，这样做菜的时候随手就能下锅。

### 2.1 新鲜的菜——最最最最新版本的Android Studio （2020年6月 目前是3.6，如有更新请下载最新版） ###

最新版本的Android Studio摒弃了老旧杂乱的各种包，一个**AndroidX**一把梭，什么AndroidV4、V7都不用了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 1]

### 2.2 美味调料——美观的图片与Icon ###

![在这里插入图片描述][20200627112057961.png]![在这里插入图片描述][20200627112102132.png] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 2]

# 3. 项目开始 #

### 3.1 起锅烧油——新建一个空项目 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 4]

### 3.2 下料翻炒——新建一个Layout布局文件，下载RecycleView组件 ###

因为RecycleView不是默认就存在的基本组件，我们需要在layout布局文件中下载，无需代码，点点鼠标就行了  
![在这里插入图片描述][20200627112736423.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 5]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 6]  
RecycleView旁边会有一个向下的箭头，**点击确认下载**就可以直接用了。

布局代码activity\_main.xml

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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="match_parent"
        tools:context=".MainActivity">
    
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        />
    
    </RelativeLayout>

### 3.3 捞起再放入新的料——item布局 ###

item从名字来看，就知道是RecycleView中显示的项目了，我们预期的布局应该是长这个样子的，如下图：  
![在这里插入图片描述][20200627113147792.png]  
item布局代码：看似有点多，其实就是简单的图片搭配文字，设计一些间距，其实很简单，你也可以根据自己的喜好搭配。

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_margin="10dp">
        <ImageView
            android:id="@+id/food1"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/food1"
            />
    
        <TextView
            android:id="@+id/text1"
            android:layout_below="@id/food1"
            android:lines="2"
            android:ellipsize="end"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:gravity="center"
            android:text="奥尔良鸡腿，美味鲜香烤制"
            />
        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/profile"
            android:layout_below="@id/text1"
            android:id="@+id/profile"
            />
    
        <TextView
            android:id="@+id/author"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/profile"
            android:text="乐乐爱吃饭"
            android:layout_marginLeft="10dp"
            android:layout_below="@id/text1"/>
        <ImageView
            android:id="@+id/love"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/love"
            android:layout_below="@id/text1"
            android:layout_toLeftOf="@id/loveNum"
            />
        <TextView
            android:id="@+id/loveNum"
            android:layout_below="@id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="7K"
            android:layout_alignParentRight="true"
            />
    
    </RelativeLayout>

布局的细节大家可以自己掌控，比如超出2行的字体就设置为省略号，代码与图见下方。

android:lines="2"
            android:ellipsize="end"

![在这里插入图片描述][20200627113359718.png]

### 3.3.下入主食——MainActivity.java代码（注释在下方） ###

package com.example.test1;
    
    import androidx.annotation.NonNull;
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.recyclerview.widget.DefaultItemAnimator;
    import androidx.recyclerview.widget.DividerItemDecoration;
    import androidx.recyclerview.widget.LinearLayoutManager;
    import androidx.recyclerview.widget.OrientationHelper;
    import androidx.recyclerview.widget.RecyclerView;
    import androidx.recyclerview.widget.StaggeredGridLayoutManager;
    
    import android.content.Intent;
    import android.os.Bundle;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.LinearLayout;
    import android.widget.TextView;
    import android.widget.Toast;
    
    import java.text.ParseException;
    import java.text.SimpleDateFormat;
    import java.util.ArrayList;
    import java.util.List;
    
    public class MainActivity extends AppCompatActivity {
        
        private RecyclerView recyclerView;
        private List<String> list;
        private RecycleAdapterDome adapterDome;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            recyclerView = findViewById(R.id.recycler_view);
            list = new ArrayList<>();
            for (int i = 0; i < 100; i++) {
        
                list.add("奥尔良鸡腿"+i+"，美味鲜香，快来试试！便宜实惠又健康，还在等待什么呢！！！！");
            }
            adapterDome = new RecycleAdapterDome(this,list);
            LinearLayoutManager manager = new LinearLayoutManager(this);
            StaggeredGridLayoutManager stagger = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
            recyclerView.setLayoutManager(stagger);
            recyclerView.setAdapter(adapterDome);
        }
        }

上述代码，先获取布局文件中的RecycleView：

recyclerView = findViewById(R.id.recycler_view);

设置RecycleView显示为2列，垂直显示：

StaggeredGridLayoutManager stagger = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);

RecycleView是用来显示数据的，我们来自定义一个数据集（正常情况下是从数据库或者服务器上获取的，这里为了方便演示简单自做一个数据集）

list = new ArrayList<>();
    for (int i = 0; i < 100; i++) {
        
    list.add("奥尔良鸡腿"+i+"，美味鲜香，快来试试！便宜实惠又健康，还在等待什么呢！！！！");
            }

有了RecycleView、数据集，还缺什么呢？当然是数据适配器（Adapter)

recyclerView.setAdapter(adapterDome);

# 3.4 加入佐料——自定义数据适配器 #

RecycleAdapterDemo.java：

package com.example.test1;
    
    import android.content.Context;
    import android.content.Intent;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.AdapterView;
    import android.widget.TextView;
    import android.widget.Toast;
    
    import androidx.annotation.NonNull;
    import androidx.recyclerview.widget.RecyclerView;
    
    import java.util.List;
    
    public class RecycleAdapterDome extends RecyclerView.Adapter<RecycleAdapterDome.MyViewHolder> {
        
        private Context context;
        private List<String> list;
        private View inflater;
    
        class MyViewHolder extends RecyclerView.ViewHolder{
        
            TextView textView;
            public MyViewHolder(View itemView) {
        
                super(itemView);
                textView = (TextView) itemView.findViewById(R.id.text1);
            }
        }
    
        //构造方法，传入数据
        public RecycleAdapterDome(Context context, List<String> list){
        
            this.context = context;
            this.list = list;
        }
    
        @NonNull
        @Override
        public RecycleAdapterDome.MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        
            //创建ViewHolder，返回每一项的布局
            inflater = LayoutInflater.from(context).inflate(R.layout.item1,parent,false);
            MyViewHolder myViewHolder = new MyViewHolder(inflater);
            return myViewHolder;
        }
    
        @Override
        public void onBindViewHolder(@NonNull RecycleAdapterDome.MyViewHolder holder, int position) {
        
            //将数据和控件绑定
            holder.textView.setText(list.get(position));
        }
    
        @Override
        public int getItemCount() {
        
            return list.size();
        }
    
    }

RecycleView的数据适配器有点讲究，需要继承自 RecyclerView.Adapter，而且还要填入泛型数据——ViewHolder的名字

public class RecycleAdapterDome extends RecyclerView.Adapter<RecycleAdapterDome.MyViewHolder> {
        }

创建内部类ViewHolder负责对控件进行处理，布局中的控件都在这里进行初始化和管理：

class MyViewHolder extends RecyclerView.ViewHolder{
        
            TextView textView;
            public MyViewHolder(View itemView) {
        
                super(itemView);
                textView = (TextView) itemView.findViewById(R.id.text1);
            }
        }

继承自 RecyclerView.Adapter的类需要重写3个方法，分别是：

**1.初始化创建视图处理器**

public RecycleAdapterDome onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        }

若指定了ViewHolder的名字，改动如下：

public RecycleAdapterDome.MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        }

在视图处理器中，绑定要显示的item的布局文件，这样数据就会在屏幕上显示出来了

inflater = LayoutInflater.from(context).inflate(R.layout.item1,parent,false);

**2.绑定内部控件，控件的具体操作都在这里面管理**

public void onBindViewHolder(@NonNull RecycleAdapterDome.MyViewHolder holder, int position) {
        }

**3.获取item的总数目**

public int getItemCount() {
        }

[Link 1]: https://gitee.com/oushile/using_android_recycleview_demo
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200627110449421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200627111837883.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4,size_16,color_FFFFFF,t_70
[20200627112057961.png]: https://img-blog.csdnimg.cn/20200627112057961.png
[20200627112102132.png]: https://img-blog.csdnimg.cn/20200627112102132.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200627112236520.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200627112418483.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200627112429302.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4,size_16,color_FFFFFF,t_70
[20200627112736423.png]: https://img-blog.csdnimg.cn/20200627112736423.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200627112808248.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200627112819834.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4,size_16,color_FFFFFF,t_70
[20200627113147792.png]: https://img-blog.csdnimg.cn/20200627113147792.png
[20200627113359718.png]: https://img-blog.csdnimg.cn/20200627113359718.png