Android教程2020 - RecyclerView顯示多種item

Android教程2020 - 系列總覽

本文鏈接

前面我們的列表中顯示的都是同類數據。如果要在一個列表中顯示不同類別的數據，該怎么做呢？
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示例 - 實際使用