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

free46000發表於2017-04-24
View

前言

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

  • 直接使用業務中的實體類為RecyclerView Adapter設定資料來源，不需要做任何封裝
  • RecyclerView Adapter零編碼，解放了複雜的Adapter類
  • 支援DataBinding，讓你清爽的編寫列表程式碼
  • 支援Form表單錄入，懶載入易複用，支援DataBinding、隱藏域、輸入內容驗證及是否變化
  • 支援業務詳情頁展示
  • 支援空白、錯誤等狀態頁的展示

原始碼地址

Github地址：github.com/free46000/M…，請大家多多關注。

系列文章

效果截圖

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

用RecyclerView展示錯誤和空白介面 附加詳情介面實踐-MultiItem進階 | 掘金技術徵文
詳情頁效果

用法

開啟資料繫結

由於用到了資料繫結的技術，首先需要在build.gradle開啟DataBinding：

dataBinding {
    enabled = true
}複製程式碼

狀態頁使用方法

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

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佈局中，下面我們看下佈局的主要程式碼：

<?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...）。
下面我們來看看相關實現程式碼，組裝使用者展示項，並新增到列表中：

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;
    }
}複製程式碼

可以看出上面的程式碼中除了宣告瞭新的ItemInfo實體類以外，其餘全部使用了已有的方法並且是MultiItem庫中已經定義好的基礎類。所以用起來還是很輕的，希望大家多多嘗試。

總結

狀態介面採用輔助類的方式實現，沒有侵入原有的業務程式碼，並且對於每種狀態會生成對應的例項去管理，使用起來更靈活，更簡潔。詳情介面是對已有功能的一個實踐，可能使用者詳情這個例子並不是特別適合，但是前面提到的文章詳情介面應該更有說服力。期待大家多多挖掘實用的功能，歡迎大家多多交流。

相關文章