在Android中使用RecyclerView - Part1
2021-03-19 本文已影响0人
伤口不该结疤
概述
RecyclerView可以高效地显示大量数据，并且可以自定义每个列表项的外观。接下来，我们会使用RecyclerView来创建一个列表，用作展示一个商品的序列号、名称和价格。运行效果如下图：
运行效果
实现步骤
定义Product类
列表中需要展示商品的名称、价格。首先，我们需要定义一个Product类，用作UI的数据呈现。
新创建一个名为data的packge(如果新增了和数据相关的类，都放到这个packge下面)，再创建一个Product类。
创建Product类
布局文件修改
加入RecyclerView控件
在activity_main.xml中加入RecyclerView控件，将id设置为recyclerView，代码如下：
<?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="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
activity_main.xml中加入RecyclerView控件
为列表中每个元素的外观
1、创建一个名为cell.xml的布局文件
创建cell.xml
2、在cell布局文件中，加入3个TextView控件，分别用作展示序号、产品名称、产品价格，对应id为：index 、name、price
cell布局
<?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="wrap_content">
<TextView
android:id="@+id/index"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="产品名称"
android:textSize="24sp"
app:layout_constraintBottom_toTopOf="@+id/price"
app:layout_constraintStart_toStartOf="@+id/guideline2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="价格"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="@+id/name"
app:layout_constraintTop_toBottomOf="@+id/name" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.15085158" />
</androidx.constraintlayout.widget.ConstraintLayout>
打开ViewBinding
打开ViewBinding
ViewBinding的使用可以参考：在Android中使用ViewBinding
Java代码实现
自定义Adapter和ViewHolder类
ViewHolder是列表项布局(即cell.xml)的 View容器。Adapter会根据需要创建ViewHolder 对象，还会为这些视图设置数据。将视图与其数据相关联的过程称为“绑定”。
新创建一个名为ui的packge(如果新增了和UI相关的类，都放到这个packge下面)，再创建一个MyAdapter类和内部MyViewHolder类。
自定义MyAdapter和MyViewHolder类
package com.example.recyclerviewdemo.ui;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
@NonNull
@Override
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
return null;
}
@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
}
@Override
public int getItemCount() {
return 0;
}
static class MyViewHolder extends RecyclerView.ViewHolder {
public MyViewHolder(@NonNull View itemView) {
super(itemView);
}
}
}
修改MyViewHolder类
将MyViewHolder和cell布局文件关联起来
static class MyViewHolder extends RecyclerView.ViewHolder {
private CellBinding binding;
public MyViewHolder(@NonNull CellBinding itemView) {
super(itemView.getRoot());
binding = itemView;
}
}
修改MyAdapter
1、 修改onCreateViewHolder
每当RecyclerView需要创建新的ViewHolder 时，它都会调用onCreateViewHolder。此方法会创建并初始化ViewHolder及其关联的View，但不会填充视图的内容，因为ViewHolder此时尚未绑定到具体数据。
在onCreateViewHolder将的cell布局文件的视图加载起来
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
private CellBinding binding;
@NonNull
@Override
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
binding = CellBinding.inflate(LayoutInflater.from(parent.getContext()));
return new MyViewHolder(binding);
}
... ...
}
2、修改onBindViewHolder
RecyclerView调用此方法将ViewHolder与数据相关联。onBindViewHolder会提取适当的数据，并使用该数据填充ViewHolder的布局。
在onBindViewHolder中给cell布局文件中的3个控件赋值。为了方便演示，直接在这个方法中创建了一个Product对象，实际项目中不能这样编写代码，在后续文章中会介绍如何使用ViewModel管理Product的数据。
@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
// TODO: Add for test
Product product = new Product();
product.setName("哇哈哈AD钙奶");
product.setPrice(2);
binding.name.setText(product.getName());
binding.price.setText(product.getPrice() + "¥");
binding.index.setText(String.valueOf(position + 1));
}
3、修改getItemCount
RecyclerView调用getItemCount来获取数据集的大小
为了方便演示，直接返回item的个数为1
@Override
public int getItemCount() {
// TODO: Add for test
return 1;
}
设置LayoutManager和Adpater
最后，在MainActivity中设置RecyclerView的LayoutManager和Adapter，就完成了所有代码的编写
public class MainActivity extends AppCompatActivity {
private ActivityMainBinding binding;
private MyAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
binding = ActivityMainBinding.inflate(getLayoutInflater());
setContentView(binding.getRoot());
binding.recyclerView.setLayoutManager(new LinearLayoutManager(this));
adapter = new MyAdapter();
binding.recyclerView.setAdapter(adapter);
}
}
运行
运行效果如下：
运行效果
我们可以尝试把count改成10
@Override
public int getItemCount() {
// TODO: Add for test
return 10;
}
运行效果如下：
运行效果
