CodeArena

RecyclerView 是一个容器，它用于显示列表形式 (list) 或者网格形式 (grid) 的数据，比如文本或者照片。

当列表滑动的时候，实际上只有少量邻近的视图会显示在屏幕上。当视图滑出屏幕时，RecyclerView 会复用它并且填充新的数据。由于它是通过回收已有的结构而不是持续创建新的列表项，所以它可以有效提高应用的时间效率和空间效率

本篇文章将展示一个RecyclerView demo，来实践一下如何使用RecyclerView来渲染列表。

布局xml文件

activity_action_list.xml

1
<?xml version="1.0" encoding="utf-8"?>
2
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3
    xmlns:app="http://schemas.android.com/apk/res-auto"
4
    xmlns:tools="http://schemas.android.com/tools"
5
    android:layout_width="match_parent"
6
    android:layout_height="wrap_content"
7
    android:gravity="center"
8
    tools:context=".DataCollectActivity">
9

10
    <androidx.recyclerview.widget.RecyclerView
11
        android:id="@+id/actionList"
12
        android:layout_width="match_parent"
13
        android:layout_height="match_parent"/>
14

15
</LinearLayout>

action_item.xml

1
<?xml version="1.0" encoding="utf-8"?>
2
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3
    android:id="@+id/card"
4
    android:layout_width="match_parent"
5
    android:layout_height="wrap_content"
6
    android:gravity="center"
7
    android:layout_gravity="center_horizontal"
8
    android:orientation="vertical">
9

10
    <ImageView
11
        android:id="@+id/img"
12
        android:layout_width="150dp"
13
        android:layout_height="150dp"
14
        android:src="@drawable/action1" />
15

13 collapsed lines
16
    <TextView
17
        android:id="@+id/title"
18
        android:layout_width="match_parent"
19
        android:layout_height="wrap_content"
20
        android:gravity="center"
21
        android:text="action1" />
22

23
    <Button
24
        android:layout_width="120dp"
25
        android:layout_height="40dp"
26
        android:backgroundTint="@color/teal_700"
27
        android:text="开始录制" />
28
</LinearLayout>

注意这里如果需要使子项水平居中，需要使用线性布局LinearLayout，并且android:layout_width="match_parent"是不可或缺的

Adapter

1
package com.wit.example;
2

3
import android.view.LayoutInflater;
4
import android.view.View;
5
import android.view.ViewGroup;
6
import android.widget.ImageView;
7
import android.widget.LinearLayout;
8
import android.widget.TextView;
9

10
import androidx.annotation.NonNull;
11
import androidx.recyclerview.widget.RecyclerView;
12

13
import com.wit.example.bean.ActionBean;
14

15
import java.util.List;
41 collapsed lines
16

17
public class ActionListAdapter extends RecyclerView.Adapter<ActionListAdapter.MyViewHolder> {
18

19
    private List<ActionBean> data;
20

21
    public ActionListAdapter(List<ActionBean> data) {
22
        this.data = data;
23
    }
24

25
    @NonNull
26
    @Override
27
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
28
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.action_item, parent, false);
29
        return new MyViewHolder(view);
30
    }
31

32
    @Override
33
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
34
        ActionBean card = data.get(position);
35
        holder.img.setImageResource(card.getImg());
36
        holder.title.setText(card.getTitle());
37
    }
38

39
    @Override
40
    public int getItemCount() {
41
        return data.size();
42
    }
43

44
    static class MyViewHolder extends RecyclerView.ViewHolder {
45
        LinearLayout card;
46
        ImageView img;
47

48
        TextView title;
49
        public MyViewHolder(@NonNull View itemView) {
50
            super(itemView);
51
            card = itemView.findViewById(R.id.card);
52
            img = itemView.findViewById(R.id.img);
53
            title = itemView.findViewById(R.id.title);
54
        }
55
    }
56
}

列表项bean

1
package com.wit.example.bean;
2

3
public class ActionBean {
4
    private Integer img;
5
    private String title;
6

7
    public ActionBean(Integer img, String title) {
8
        this.img = img;
9
        this.title = title;
10
    }
11

12
    ...get&set
13
}

Activity

在页面初始化时进行渲染：

1
@Override
2
protected void onCreate(Bundle savedInstanceState) {
3
  super.onCreate(savedInstanceState);
4
  setContentView(R.layout.activity_data_collect);
5

6
  RecyclerView recyclerView = findViewById(R.id.actionList);
7
  GridLayoutManager layoutManager = new GridLayoutManager(this, 2);
8
  // 设置纵向滚动
9
  layoutManager.setOrientation(RecyclerView.VERTICAL);
10
  recyclerView.setLayoutManager(layoutManager);
11

12
  List<ActionBean> ActionBeans = Arrays.asList(
13
    new ActionBean(R.drawable.action1, "标题1"),
14
    new ActionBean(R.drawable.action2, "标题2"),
15
    new ActionBean(R.drawable.action3, "标题3"),
6 collapsed lines
16
    new ActionBean(R.drawable.action4, "标题4")
17
  );
18

19
  ActionListAdapter adapter = new ActionListAdapter(ActionBeans);
20
  recyclerView.setAdapter(adapter);
21
}

如何展示gif

Adapter：

1
@Override
2
public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
3
  ActionBean card = data.get(position);
4
  holder.img.setImageResource(card.getImg());
5
  Drawable drawable = holder.img.getDrawable();
6
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
7
    if(drawable instanceof AnimatedImageDrawable) {
8
      ((AnimatedImageDrawable) drawable).registerAnimationCallback(new Animatable2.AnimationCallback() {
9
        @Override
10
        public void onAnimationStart(Drawable drawable) {
11
          super.onAnimationStart(drawable);
12
        }
13
        @Override
14
        public void onAnimationEnd(Drawable drawable) {
15
          super.onAnimationEnd(drawable);
9 collapsed lines
16
        }
17
      });
18

19
      // ((AnimatedImageDrawable) drawable).setRepeatCount(2);
20
      ((AnimatedImageDrawable) drawable).start();
21
    }
22
  }
23
  holder.title.setText(card.getTitle());
24
}