用RecyclerView展現錯誤和空白界面附加詳情界面實踐-MultiItem進階 | 掘金技術徵文

時間 2019-12-01

標籤 recyclerview 展現錯誤空白界面附加詳情實踐 multiitem 進階技術徵文简体版

原文原文鏈接

前言

本文是MultiItem系列的進階文章，講解如何展現空白、錯誤等狀態頁，這個功能比較經常使用，實現的思路也有不少，本文的思路是把狀態頁當成一個填充滿RecyclerView的Item，不須要事先定義到佈局中，而後利用庫中封裝的一個狀態頁輔助類進行管理，方便簡潔，而且作到了用時再去初始化，減小資源浪費。另外會附加講一下，對於展現業務中詳情頁的實踐，因爲這個實踐目前比較簡單，因此就不單拿出來寫一篇文章了。MultiItem特色：php

直接使用業務中的實體類爲RecyclerView Adapter設置數據源，不須要作任何封裝
RecyclerView Adapter零編碼，解放了複雜的Adapter類
支持DataBinding，讓你清爽的編寫列表代碼
支持Form表單錄入，懶加載易複用，支持DataBinding、隱藏域、輸入內容驗證及是否變化
支持業務詳情頁展現
支持空白、錯誤等狀態頁的展現

源碼地址

Github地址：github.com/free46000/M…，請你們多多關注。java

系列文章

效果截圖

用法

開啓數據綁定

因爲用到了數據綁定的技術，首先須要在build.gradle開啓DataBinding：android

dataBinding {
    enabled = true
}複製代碼

狀態頁使用方法

狀態頁就是空白錯誤等頁面，首先初始化列表和輔助類，爲列表設置點擊監聽，處理狀態頁的展現。讓每一個狀態對應一個實例，使用起來更清晰。git

protected void initViews() {
    //初始化adapter
    BaseItemAdapter adapter = new BaseItemAdapter();
    //爲XXBean數據源註冊XXManager管理類
    adapter.register(TextBean.class, new TextViewManager());
    recyclerView.setAdapter(adapter);
    adapter.addDataItem(new TextBean("展現空白頁"));
    adapter.addDataItem(new TextBean("展現錯誤頁"));
    //設置點擊監聽，再點擊Item的時候展現空白或者錯誤頁面
    setOnItemClickListener(adapter);
    //初始化空白頁輔助類
    emptyViewHelper = newStateViewHelper("列表數據爲空");
    //初始化錯誤頁輔助類
    errorViewHelper = newStateViewHelper("數據加載錯誤");
}

/** * 建立新的狀態頁輔助類 * * @param message 狀態頁展現的信息 * @return StateViewHelper */
private StateViewHelper newStateViewHelper(String message) {
    //初始化狀態Item
    BaseItemState stateItem = new ItemEmptyAndError(message);
    //初始化輔助類，須要一個BaseItemState
    StateViewHelper stateViewHelper = new StateViewHelper(recyclerView, stateItem);
    //設置狀態頁按鈕的點擊事件監聽，處理狀態頁隱藏
    stateItem.setOnStateClickListener(() -> errorViewHelper.hide());
    return stateViewHelper;
}

/** * 設置點擊監聽，再點擊Item的時候展現空白或者錯誤頁面 */
private void setOnItemClickListener(BaseItemAdapter adapter) {
    adapter.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(BaseViewHolder viewHolder) {
            switch (viewHolder.getItemPosition()) {
                case 0:
                    //展現空白頁
                    emptyViewHelper.show();
                    break;
                case 1:
                    //展現錯誤頁
                    errorViewHelper.show();
                    break;
            }
        }
    });
}複製代碼

由上面代碼能夠看出咱們須要一個BaseItemState的類，Demo中自定義了一個ItemEmptyAndError的子類，使用了DataBinding的技術，因爲自己並無承載太多的業務，只是對一些屬性進行存儲，邏輯基本都在xml佈局中，下面咱們看下佈局的主要代碼：github

<?xml version="1.0" encoding="utf-8"?>
<layout ... >

    <data>
        <variable name="itemData" type="com.freelib.multiitem.demo.state.ItemEmptyAndError"/>
    </data>

    <android.support.constraint.ConstraintLayout ... >

        <TextView //文本綁定 android:text="@{itemData.message}" ... />

        <Button //點擊監聽 android:onClick="@{() -> itemData.onStateClickListener.onStateClick()}" //文本綁定 android:text="@{itemData.btnText}" ... />
    </android.support.constraint.ConstraintLayout>
</layout>複製代碼

詳情頁相關實踐

Demo中介紹了展現用戶詳情頁，並無複雜的界面，首先咱們爲每一條用戶信息項聲明一個ItemInfo實體，Demo裏爲了簡單，只實現了這一種類型，你們使用的時候視具體業務而定（例如：文章詳情功能：就須要，標題、內容、回覆等至少三種Item...）。
下面咱們來看看相關實現代碼，組裝用戶展現項，並添加到列表中：ide

protected void initViews() {
    UserBean userBean = getUserBean();

    recyclerView.setLayoutManager(new LinearLayoutManager(this));
    //初始化adapter
    BaseItemAdapter adapter = new BaseItemAdapter();
    //爲UserBean數據源註冊數據綁定View Holder Manager管理類
    adapter.register(ItemInfo.class, new DataBindViewHolderManager<>(
            R.layout.item_info, BR.itemData));
    recyclerView.setAdapter(adapter);

    //構建用戶信息須要展現的ItemInfo的集合，每一個ItemInfo表明頁面中的一行
    List<ItemInfo> list = new ArrayList<>(5);
    list.add(new ItemInfo("名字", userBean.getName()));
    list.add(new ItemInfo("性別", userBean.getSex()));
    list.add(new ItemInfo("年齡", userBean.getAge()));
    list.add(new ItemInfo("城市", userBean.getAddr()));
    list.add(new ItemInfo("介紹", userBean.getInfo()));
    adapter.setDataItems(list);
}複製代碼

而後咱們看下ItemInfo實體類，其實很是簡單：佈局

public class ItemInfo {
    private String name;
    private String value;

    public ItemInfo(String name, String value) {
        this.name = name;
        this.value = value;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }
}複製代碼