前面我们已经用 RecyclerView 显示一些数据。也知道如何获取滑动的距离。
前面我们的列表中显示的都是同类数据。如果要在一个列表中显示不同类别的数据,该怎么做呢?
RecyclerView 已经有应对这类场景的能力,本文描述如何用 RecyclerView 显示多种内容(item)。
综述
这个例子中涉及到的类和文件比较多。
放在同一个包里的文件
BaseMultiData.java
BaseVH.java
ItemTypeDef.java
MultiData1.java
MultiData2.java
MultiItemAdapter.java
OneVH.java
ReViewDemoMulti.java
TwoVH.java
layout 资源文件
item_multi_1.xml
item_multi_2.xml
场景描述,数据准备
首先假设场景。假设我们有 2 种数据。第一种数据只有 1 个字符串,第二种数据有 2 个字符串。
那么我们可以先设计出一个数据的抽象类。并且设计枚举类型来区分这 2 种数据。
利用枚举类型来区分数据的类别,ItemTypeDef.java
。
public class ItemTypeDef {
public static final int ITEM_TYPE_ONE_TEXT = 1;
public static final int ITEM_TYPE_2_TEXT = 2;
public enum Type {
ONE_TEXT(ITEM_TYPE_ONE_TEXT),
TWO_TEXT(ITEM_TYPE_2_TEXT);
int code;
Type(int code) {
this.code = code;
}
public int getCode() {
return code;
}
public static Type getItemTypeByCode(int code) {
switch (code) {
case ITEM_TYPE_ONE_TEXT:
return Type.ONE_TEXT;
case ITEM_TYPE_2_TEXT:
return Type.TWO_TEXT;
}
return Type.ONE_TEXT;
}
}
}
枚举类自己带有 ordinal()
方法来表明枚举的顺序值。
但这个例子中我们将枚举包裹在一个类里面,并且强行使用了 int 来标记类别。
数据的抽象类
public abstract class BaseMultiData {
public abstract int typeCode();
}
表示具体数据的 class。
第 1 种数据 class。
public class MultiData1 extends BaseMultiData {
private String str1;
public MultiData1(String str1) {
this.str1 = str1;
}
public String getStr1() {
return str1;
}
@Override
public int typeCode() {
return ItemTypeDef.Type.ONE_TEXT.getCode();
}
}
第 2 种数据 class。
public class MultiData2 extends BaseMultiData {
private String str1;
private String str2;
public MultiData2(String str1, String str2) {
this.str1 = str1;
this.str2 = str2;
}
public String getStr1() {
return str1;
}
public String getStr2() {
return str2;
}
@Override
public int typeCode() {
return ItemTypeDef.Type.TWO_TEXT.getCode();
}
}
可以看到,两种数据类分别持有 1 和 2 个 String。
资源文件
前面设计了 2 种数据,对应的,接下来我们设计 2 种样式。
layout
先准备 2 种 layout。
给第 1 种数据 MultiData1
准备了 item_multi_1.xml
。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#33691E"
android:orientation="horizontal">
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="12dp"
android:textColor="#ffffff" />
</LinearLayout>
给第 2 种数据 MultiData2
准备了 item_multi_2.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#ffffff"
android:orientation="horizontal">
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="12dp"
android:text="tv1"
android:textColor="#33691E" />
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="12dp"
android:text="tv2"
android:textColor="#8BC34A" />
</LinearLayout>
VH
设计对应的 ViewHolder。
首先是抽象类 BaseVH
。它持有一个 ItemTypeDef.Type
来表明自己的类别。
public abstract class BaseVH extends RecyclerView.ViewHolder {
private ItemTypeDef.Type type;
public View root;
public BaseVH(View itemView, ItemTypeDef.Type type) {
super(itemView);
this.root = itemView;
this.type = type;
}
public ItemTypeDef.Type getType() {
return type;
}
}
具体实现类。第 1 种数据的 OneVH
。
public class OneVH extends BaseVH {
public TextView tv1;
public OneVH(View itemView, ItemTypeDef.Type type) {
super(itemView, type);
tv1 = itemView.findViewById(R.id.tv1);
}
}
第 2 种数据的 TwoVH
。
public class TwoVH extends BaseVH {
public TextView tv1;
public TextView tv2;
public TwoVH(View itemView, ItemTypeDef.Type type) {
super(itemView, type);
tv1 = itemView.findViewById(R.id.tv1);
tv2 = itemView.findViewById(R.id.tv2);
}
}
设计适配器
现在 2 种数据的类和资源都准备好了。我们来设计适配器。
RecyclerView.Adapter
中用来区分子项类别的方法是 public int getItemViewType(int position)
。
我们需要复写这个方法,告诉 RecyclerView 当前子项的类别。它返回的是 int。
@Override
public int getItemViewType(int position) {
return dataList.get(position).typeCode();
}
适配器完整代码如下
public class MultiItemAdapter extends RecyclerView.Adapter<BaseVH> {
private List<BaseMultiData> dataList = new ArrayList<>();
public void setDataList(List<BaseMultiData> dataList) {
this.dataList = dataList;
notifyDataSetChanged();
}
@NonNull
@Override
public BaseVH onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
switch (ItemTypeDef.Type.getItemTypeByCode(viewType)) {
case ONE_TEXT:
return new OneVH(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_multi_1, parent, false), ItemTypeDef.Type.ONE_TEXT);
case TWO_TEXT:
return new TwoVH(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_multi_2, parent, false), ItemTypeDef.Type.TWO_TEXT);
}
return null;
}
@Override
public void onBindViewHolder(@NonNull BaseVH holder, int position) {
BaseMultiData data = dataList.get(position);
switch (holder.getType()) {
case ONE_TEXT:
((OneVH) holder).tv1.setText(((MultiData1) data).getStr1());
break;
case TWO_TEXT:
TwoVH twoVH = (TwoVH) holder;
MultiData2 data2 = (MultiData2) data;
twoVH.tv1.setText(data2.getStr1());
twoVH.tv2.setText(data2.getStr2());
break;
}
}
@Override
public int getItemCount() {
return dataList.size();
}
@Override
public int getItemViewType(int position) {
return dataList.get(position).typeCode();
}
}
要显示多种 item,得把它们装在一起。数据列表 dataList
声明装载的是抽象类 BaseMultiData
。
创建 ViewHolder 的 onCreateViewHolder
方法中,根据 viewType
来判断应该创建哪一种 ViewHolder。
装配数据的 onBindViewHolder
方法中,也是根据 holder 的类别来设置相应的数据。这里用到了强制转换。
在 activity 中使用这个适配器
public class ReViewDemoMulti extends AbsActivity {
private MultiItemAdapter mMultiItemAdapter = new MultiItemAdapter();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_recyler_view_demo);
RecyclerView recyclerView = findViewById(R.id.re_view);
recyclerView.setAdapter(mMultiItemAdapter);
recyclerView.setLayoutManager(new LinearLayoutManager(this, RecyclerView.VERTICAL, false));
mMultiItemAdapter.setDataList(genData());
}
private List<BaseMultiData> genData() {
List<BaseMultiData> list = new ArrayList<>();
for (int i = 0; i < 60; i++) {
if (i % 2 == 0) {
list.add(new MultiData1("[Data1] " + i));
} else {
list.add(new MultiData2("[Data2] " + i, "Type2"));
}
}
return list;
}
}
运行起来即可看到效果。
这是一个简单的例子 🌰,工作中的开发需求会更复杂或繁杂。可以本文介绍的方法为基础,实现具体的开发需求。
工程放这里: https://github.com/AnRFDev/Tutorial2020
相关阅读
RecyclerView - 使用入门
RecyclerView 点击事件 - 如何设置点击事件
RecyclerView 示例 - 实际使用
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于