RecyclerView基本用法

发表时间 | 分类于 |

Learning By Doing

一个Demo掌握RecyclerView基本用法

前言

由于RecyclerView已经出来很久了，关于RecyclerView的文章网上也有很多，所以这篇文章只是作为一个基本用法的总结 + 常见功能的参考链接，可以理解为一篇查阅/总结的文章。

首先总结一下最基本的用法。

RecyclerView使用

使用RecyclerView的步骤

  • 添加RecyclerView依赖库（gradle build file）
  • 定义Model类
  • 在XML添加RecyclerView
  • 创建XML布局文件，用于展示item
  • 创建RecyclerView.Adapter和ViewHolder
  • 绑定adapter和数据到RecyclerView

添加RecyclerView依赖库

在build.gradle中加入依赖：

1
implementation'com.android.support:recyclerview-v7:27.0.2'

定义Model类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/**
 * author : BlueLzy
 * e-mail : bluehobert@gmail.com
 * date   : 2018/09/10 22:11
 * desc   :
 */
public class Contact {
    private String mName;
    private boolean mOnline;

    public Contact(String name, boolean online) {
        mName = name;
        mOnline = online;
    }

    public String getName() {
        return mName;
    }

    public boolean isOnline() {
        return mOnline;
    }

    private static int lastContactId = 0;

    public static ArrayList<Contact> createContactsList(int numContacts) {
        ArrayList<Contact> contacts = new ArrayList<Contact>();

        for (int i = 1; i <= numContacts; i++) {
            contacts.add(new Contact("Person " + ++lastContactId, i <= numContacts / 2));
        }
        return contacts;
    }
}

在activity添加RecyclerView

我们新建一个layout文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvContacts"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</android.support.constraint.ConstraintLayout>

创建XML布局文件，用于展示item

再创建一个layout文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    >

    <TextView
        android:id="@+id/contact_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        />

    <Button
        android:id="@+id/message_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:textSize="10sp"
        />
</LinearLayout>

创建adapter和viewholder

创建ContactsAdapter类：

onCreateViewHolder:一般用于初始化布局文件和viewholder

onBindViewHolder：一般用于初始化item布局中的控件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/**
 * author : BlueLzy
 * e-mail : bluehobert@gmail.com
 * date   : 2018/09/10 22:16
 * desc   :
 */
public class ContactsAdapter extends RecyclerView.Adapter<ContactsAdapter.ViewHolder> {

    private List<Contact> contacts;

    public ContactsAdapter(List<Contact> contacts){
        this.contacts = contacts;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        Context context = parent.getContext();
        LayoutInflater inflater = LayoutInflater.from(context);

        View contactView = inflater.inflate(R.layout.item_recyclerview, parent, false);

        ViewHolder viewHolder = new ViewHolder(contactView);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Contact contact = contacts.get(position);

        TextView textView = holder.name;
        textView.setText(contact.getName());
        Button button = holder.message;
        button.setText(contact.isOnline() ? "Message" : "Offline");
        button.setEnabled(contact.isOnline());
    }

在activity绑定adapter和data

在activity的onCreate()中加入以下代码：

1
2
3
4
5
6
7
8
9
RecyclerView rvContacts = findViewById(R.id.rvContacts);

       contacts = Contact.createContactsList(20);
       ContactsAdapter adapter = new ContactsAdapter(contacts);
       rvContacts.setLayoutManager(new LinearLayoutManager(this));
       rvContacts.setAdapter(adapter);

       SnapHelper snapHelper = new LinearSnapHelper();
       snapHelper.attachToRecyclerView(rvContacts);

compile & run project

运行程序，看一下我们的成果：

Sep-10-201823-30-03.gif

可以看到，根据Contact.createContactsList(20)方法，创建了20个item，并且成功的按照item的布局展示出来，这就是RecylerView最基本的用法了。over~

步骤其实特别简单：

添加依赖，XML加入RecyclerView，编写item布局，编写Adapter和ViewHolder，创建RecyclerView，绑定Adapter

最后别忘了 运行程序

over~

第三方库

由于RecyclerView还有许多有用的特性，我们可以利用它来做很多有趣的事情，所以我也收集了一些资料，供大家参考。

文章/博客

中文：

英文：

基本上常见的用法和原理的解析都在这里面了，有特定需求的可以上Github找一下第三方库，看一下里面的源码，了解原理之后，其实自己也能实现各种炫酷的效果~

20181010更新

评论里有朋友问怎么添加分割线，其实Android官方已经提供了默认实现。只需要一行代码即可：

1
recyclerView.addItemDecoration(new DividerItemDecoration(context,DividerItemDecoration.VERTICAL));

效果如图：

Snip20181005_2.png

如果对默认的效果不满意，也可以使用其他的实现方式：

自定义Drawable文件

1
2
recyclerView.addItemDecoration(new RecycleViewDivider(
    context, DividerItemDecoration.VERTICAL, R.drawable.divider_mileage));

OR

自定义分割线高度和颜色

1
2
recyclerView.addItemDecoration(new RecycleViewDivider(
    context, DividerItemDecoration.VERTICAL, 10, getResources().getColor(R.color.divide_gray_color)));
本文结束啦感谢您的阅读