概述
RecyclerView可以高效地显示大量数据,并且可以自定义每个列表项的外观。接下来,我们会使用RecyclerView来创建一个列表,用作展示一个商品的序列号、名称和价格。运行效果如下图:
实现步骤
定义Product类
列表中需要展示商品的名称、价格。首先,我们需要定义一个Product
类,用作UI的数据呈现。
新创建一个名为data的packge(如果新增了和数据相关的类,都放到这个packge下面),再创建一个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>
为列表中每个元素的外观
1、创建一个名为cell.xml
的布局文件
2、在cell布局文件中,加入3个TextView控件,分别用作展示序号、产品名称、产品价格,对应id为:index
、name
、price
<?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的使用可以参考:在Android中使用ViewBinding
Java代码实现
自定义Adapter和ViewHolder类
ViewHolder
是列表项布局(即cell.xml
)的 View
容器。Adapter
会根据需要创建ViewHolder 对象
,还会为这些视图设置数据。将视图与其数据相关联的过程称为“绑定”。
新创建一个名为ui的packge(如果新增了和UI相关的类,都放到这个packge下面),再创建一个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;
}
运行效果如下: