滚动列表。

一、使用步骤

2 个布局文件(容器布局+列表项布局),3 个java类(列表项实体类+适配器类+加载适配器的活动类)。

1. 添加依赖项

打开 app/build.gradle,添加 RecyclerView 依赖项,之后点击编辑器右上角 Sync Now 同步更新依赖。

  1. dependencies {
  2. ....
  3. implementation 'com.android.support:recyclerview-v7:28.0.0'
  4. ....
  5. }

2. 添加子控件

在布局文件中添加 RecyclerView 控件,需要写全包名。

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent">
  4. <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"/>
  7. </LinearLayout>

3. 列表项布局文件

RecyclerView 控件相当于类表最外层的容器,内部每个项还需要单独布局,在 layout 目录下新建单个项的布局文件 list_novel_item.xml。

  1. <LinearLayout android:layout_width="match_parent"
  2. android:layout_height="wrap_content"
  3. xmlns:android="http://schemas.android.com/apk/res/android">
  4. <ImageView android:id="@+id/novel_cover"
  5. android:layout_height="wrap_content"
  6. android:layout_width="0dp"
  7. android:layout_marginLeft="10dp"
  8. android:layout_weight="1"/>
  9. <TextView android:id="@+id/novel_book"
  10. android:layout_width="0dp"
  11. android:layout_gravity="center"
  12. android:gravity="center_horizontal"
  13. android:layout_height="wrap_content"
  14. android:layout_weight="2"/>
  15. <TextView android:id="@+id/novel_author"
  16. android:layout_width="0dp"
  17. android:layout_gravity="center"
  18. android:gravity="center_horizontal"
  19. android:layout_height="wrap_content"
  20. android:layout_weight="2"/>
  21. </LinearLayout>

4. 实体类

列表项需要个实体类:Novel.java。

  1. public class Novel {
  2. private int id;
  3. private String authorName;
  4. private String bookName;
  5. private String url;
  6. public Novel(int id, String authorName, String bookName, String url) {
  7. this.id = id;
  8. this.authorName = authorName;
  9. this.bookName = bookName;
  10. this.url = url;
  11. }
  12. public int getId() {
  13. return id;
  14. }
  15. public String getAuthorName() {
  16. return authorName;
  17. }
  18. public String getBookName() {
  19. return bookName;
  20. }
  21. public String getUrl() {
  22. return url;
  23. }
  24. }

5. 适配器

布局文件整好还不行,还需要有适配器类把列表项布局跟列表关联起来。在 java 目录下新建适配器文件 NovelAdapter.java。适配器需要继承 RecyclerView.Adapter 类,并实现它的三个方法:

  • onCreateViewHolder 创建控件,这个方法里关联 列表项 布局文件;

  • onBindViewHolder 绑定数据;

  • getItemCount 列表总数目。

  1. import android.support.annotation.NonNull;
  2. import android.support.v7.widget.RecyclerView;
  3. import android.view.LayoutInflater;
  4. import android.view.View;
  5. import android.view.ViewGroup;
  6. import android.widget.ImageView;
  7. import android.widget.TextView;
  8. import android.widget.Toast;
  9. import java.util.List;
  10. public class NovelAdapter extends RecyclerView.Adapter<NovelAdapter.ViewHolder> {
  11. private List<Novel> novelList;
  12. static class ViewHolder extends RecyclerView.ViewHolder {
  13. View novelView;
  14. ImageView novelCover;
  15. TextView novelAuthorName;
  16. TextView novelBookName;
  17. public ViewHolder(View view) {
  18. super(view);
  19. novelView = view;
  20. this.novelCover = view.findViewById(R.id.novel_cover);
  21. this.novelAuthorName = view.findViewById(R.id.novel_author);
  22. this.novelBookName = view.findViewById(R.id.novel_book);
  23. }
  24. }
  25. public NovelAdapter(List<Novel> novelList) {
  26. this.novelList = novelList;
  27. }
  28. @NonNull
  29. @Override
  30. public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
  31. View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.novel_item,
  32. viewGroup, false);
  33. final ViewHolder holder = new ViewHolder(view);
  34. // 给整个 view 绑定事件
  35. holder.novelCover.setOnClickListener(new View.OnClickListener() {
  36. @Override
  37. public void onClick(View view) {
  38. int position = holder.getAdapterPosition();
  39. Novel novel = novelList.get(position);
  40. Toast.makeText(view.getContext(), "You click view " + novel.getBookName(),
  41. Toast.LENGTH_SHORT).show();
  42. }
  43. });
  44. return holder;
  45. }
  46. @Override
  47. public void onBindViewHolder(ViewHolder holder, int position) {
  48. Novel novel = novelList.get(position);
  49. holder.novelCover.setImageResource(R.drawable.cover);
  50. holder.novelAuthorName.setText(novel.getAuthorName());
  51. holder.novelBookName.setText(novel.getBookName());
  52. }
  53. @Override
  54. public int getItemCount() {
  55. return novelList.size();
  56. }
  57. }

6. 在活动中引用

  1. public class MainActivity extends AppCompatActivity {
  2. private List<Novel> novelList = new ArrayList<Novel>();
  3. @Override
  4. protected void onCreate(Bundle savedInstanceState) {
  5. super.onCreate(savedInstanceState);
  6. setContentView(R.layout.activity_main);
  7. initNovel();
  8. RecyclerView recyclerView = findViewById(R.id.recycler_view);
  9. LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
  10. recyclerView.setLayoutManager(linearLayoutManager);
  11. NovelAdapter novelAdapter = new NovelAdapter(novelList);
  12. recyclerView.setAdapter(novelAdapter);
  13. }
  14. // 模拟列表数据,真实情况为请求服务端数据
  15. private void initNovel () {
  16. for (int i = 0; i < 30; i++) {
  17. Novel novel1 = new Novel(12, "净无痕"+i, "太古神王"+i, "https://www.biquge5200.cc/2_2157/");
  18. novelList.add(novel1);
  19. }
  20. }
  21. }

二、横向滚动列表

修改列表项布局 list_novel_item.xml,给每一项固定宽度。如下修改 LinearLayout 控件宽度。

  1. <LinearLayout android:layout_width="100dp"
  2. android:layout_height="wrap_content"
  3. android:orientation="vertical"
  4. xmlns:android="http://schemas.android.com/apk/res/android">
  5. <ImageView android:id="@+id/novel_cover"
  6. android:layout_height="wrap_content"
  7. android:layout_width="wrap_content"
  8. android:layout_marginLeft="10dp"
  9. android:layout_gravity="center_horizontal"/>
  10. ......
  11. </LinearLayout>

修改活动类中代码。

  1. ...
  2. LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
  3. linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL); // 新增代码
  4. recyclerView.setLayoutManager(linearLayoutManager);
  5. ...

三、瀑布流滚动列表

使用 StaggeredGridLayoutManager 类管理 RecyclerView 的布局,第一个参数表示有几列,第二个参数表示垂直滚动还是水平滚动。

  1. StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(3,
  2. StaggeredGridLayoutManager.VERTICAL);
  3. recyclerView.setLayoutManager(layoutManager);

四、网格滚动列表

使用 GridLayoutManager 类管理 RecyclerView 的布局,和 StaggeredGridLayoutManager 布局很相似,默认只能垂直滚动,第一个参数是当前活动,第二个参数设置有几列。

  1. GridLayoutManager layoutManager = new GridLayoutManager(this, 2);
  2. recyclerView.setLayoutManager(layoutManager);