RecyclerView實現多type頁面

時間 2019-12-05

標籤 recyclerview 實現 type 頁面简体版

原文原文鏈接

目錄介紹

01.先看看實際需求
02.adapter實現多個type
03.這樣寫的弊端
04.如何優雅實現adapter封裝

好消息

博客筆記大彙總【16年3月到至今】，包括Java基礎及深刻知識點，Android技術博客，Python學習筆記等等，還包括平時開發中遇到的bug彙總，固然也在工做之餘收集了大量的面試題，長期更新維護而且修正，持續完善……開源的文件是markdown格式的！同時也開源了生活博客，從12年起，積累共計N篇[近100萬字，陸續搬到網上]，轉載請註明出處，謝謝！
連接地址：https://github.com/yangchong211/YCBlogs
若是以爲好，能夠star一下，謝謝！固然也歡迎提出建議，萬事起於忽微，量變引發質變！

01.先看看實際需求

好比一個APP的首頁，包含Banner區、廣告區、文本內容、圖片內容、新聞內容等等。
RecyclerView 能夠用ViewType來區分不一樣的item,也能夠知足需求，但仍是存在一些問題，好比：
- 1，在item過多邏輯複雜列表界面，Adapter裏面的代碼量龐大，邏輯複雜，後期難以維護。
- 2，每次增長一個列表都須要增長一個Adapter，重複搬磚，效率低下。
- 3，沒法複用adapter，假若有多個頁面有多個type，那麼就要寫多個adapter。
- 4，要是有局部刷新，那麼就比較麻煩了，好比廣告區也是一個九宮格的RecyclerView，點擊局部刷新當前數據，比較麻煩。

02.adapter實現多個type

一般寫一個多Item列表的方法
- 根據不一樣的ViewType 處理不一樣的item，若是邏輯複雜，這個類的代碼量是很龐大的。若是版本迭代添加新的需求，修改代碼很麻煩，後期維護困難。
主要操做步驟
- 在onCreateViewHolder中根據viewType參數，也就是getItemViewType的返回值來判斷須要建立的ViewHolder類型
- 在onBindViewHolder方法中對ViewHolder的具體類型進行判斷，分別爲不一樣類型的ViewHolder進行綁定數據與邏輯處理

代碼以下所示

public class HomePageAdapter extends RecyclerView.Adapter {
    public static final int TYPE_BANNER = 0;
    public static final int TYPE_AD = 1;
public static final int TYPE_TEXT = 2;
    public static final int TYPE_IMAGE = 3;
    public static final int TYPE_NEW = 4;
    private List<HomePageEntry> mData;

    public void setData(List<HomePageEntry> data) {
        mData = data;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        switch (viewType){
            case TYPE_BANNER:
                return new BannerViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.home_banner_layout,null));
            case TYPE_AD:
                return new BannerViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.home_ad_item_layout,null));
            case TYPE_TEXT:
                return new BannerViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.home_text_item_layout,null));
            case TYPE_IMAGE:
                return new BannerViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.home_image_item_layout,null));
            case TYPE_NEW:
                return new BannerViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.home_news_item_layout,null));
        }
        return null;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        int type = getItemViewType(position);
        switch (type){
            case TYPE_BANNER:
                // banner 邏輯處理
                break;
            case TYPE_AD:
                // 廣告邏輯處理
                break;
            case TYPE_TEXT:
                // 文本邏輯處理
                break;
            case TYPE_IMAGE:
               //圖片邏輯處理
                break;
            case TYPE_NEW:
                //視頻邏輯處理
                break;
            // ... 此處省去N行代碼
        }
    }

    @Override
    public int getItemViewType(int position) {
        if(position == 0){
            return TYPE_BANNER;//banner在開頭
        }else {
            return mData.get(position).type;//type 的值爲TYPE_AD，TYPE_IMAGE，TYPE_AD，等其中一個
        }

    }

    @Override
    public int getItemCount() {
        return mData == null ? 0:mData.size();
    }



    public static class BannerViewHolder extends RecyclerView.ViewHolder{

        public BannerViewHolder(View itemView) {
            super(itemView);
            //綁定控件
        }
    }

    public static class NewViewHolder extends RecyclerView.ViewHolder{

        public VideoViewHolder(View itemView) {
            super(itemView);
            //綁定控件
        }
    }
    public static class AdViewHolder extends RecyclerView.ViewHolder{

        public AdViewHolder(View itemView) {
            super(itemView);
            //綁定控件
        }
    }
    public static class TextViewHolder extends RecyclerView.ViewHolder{

        public TextViewHolder(View itemView) {
            super(itemView);
            //綁定控件
        }
    }
    public static class ImageViewHolder extends RecyclerView.ViewHolder{

        public ImageViewHolder(View itemView) {
            super(itemView);
            //綁定控件
        }
    }
}

03.這樣寫的弊端

上面那樣寫的弊端
- 類型檢查與類型轉型，因爲在onCreateViewHolder根據不一樣類型建立了不一樣的ViewHolder，因此在onBindViewHolder須要針對不一樣類型的ViewHolder進行數據綁定與邏輯處理，這致使須要經過instanceof對ViewHolder進行類型檢查與類型轉型。
- 不利於擴展，目前的需求是列表中存在5種佈局類類型，那麼若是需求變更，極端一點的狀況就是數據源是從服務器獲取的，數據中的model決定列表中的佈局類型。這種狀況下，每當model改變或model類型增長，咱們都要去改變adapter中不少的代碼，同時Adapter還必須知道特定的model在列表中的位置（position）除非跟服務端約定好，model（位置）不變，很顯然，這是不現實的。
- 不利於維護，這點應該是上一點的延伸，隨着列表中佈局類型的增長與變動，getItemViewType、onCreateViewHolder、onBindViewHolder中的代碼都須要變動或增長，Adapter 中的代碼會變得臃腫與混亂，增長了代碼的維護成本。

04.如何優雅實現adapter封裝

核心目的就是三個
- 避免類的類型檢查與類型轉型
- 加強Adapter的擴展性
- 加強Adapter的可維護性
當列表中類型增長或減小時Adapter中主要改動的就是getItemViewType、onCreateViewHolder、onBindViewHolder這三個方法，所以，咱們就從這三個方法中開始着手。
既然可能存在多個type類型的view，那麼能不能把這些好比banner，廣告，文本，視頻，新聞等當作一個HeaderView來操做。

在getItemViewType方法中。

減小if之類的邏輯判斷簡化代碼，能夠簡單粗暴的用hashCode做爲增長type標識。
經過建立列表的佈局類型，同時返回的再也不是簡單的佈局類型標識，而是佈局的hashCode值

private ArrayList<InterItemView> headers = new ArrayList<>();

public interface InterItemView {

    /**
     * 建立view
     * @param parent            parent
     * @return                  view
     */
    View onCreateView(ViewGroup parent);

    /**
     * 綁定view
     * @param headerView        headerView
     */
    void onBindView(View headerView);
}

/**
 * 獲取類型，主要做用是用來獲取當前項Item(position參數)是哪一種類型的佈局
 * @param position                      索引
 * @return                              int
 */
@Deprecated
@Override
public final int getItemViewType(int position) {
    if (headers.size()!=0){
        if (position<headers.size()) {
            return headers.get(position).hashCode();
        }
    }
    if (footers.size()!=0){
        int i = position - headers.size() - mObjects.size();
        if (i >= 0){
            return footers.get(i).hashCode();
        }
    }
    return getViewType(position-headers.size());
}

onCreateViewHolder

getItemViewType返回的是佈局hashCode值，也就是onCreateViewHolder(ViewGroup parent, int viewType)參數中的viewType

/**
 * 建立viewHolder，主要做用是建立Item視圖，並返回相應的ViewHolder
 * @param parent                        parent
 * @param viewType                      type類型
 * @return                              返回viewHolder
 */
@NonNull
@Override
public final BaseViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    View view = createViewByType(parent, viewType);
    if (view!=null){
        return new BaseViewHolder(view);
    }
    final BaseViewHolder viewHolder = OnCreateViewHolder(parent, viewType);
    setOnClickListener(viewHolder);
    return viewHolder;
}

private View createViewByType(ViewGroup parent, int viewType){
    for (InterItemView headerView : headers){
        if (headerView.hashCode() == viewType){
            View view = headerView.onCreateView(parent);
            StaggeredGridLayoutManager.LayoutParams layoutParams;
            if (view.getLayoutParams()!=null) {
                layoutParams = new StaggeredGridLayoutManager.LayoutParams(view.getLayoutParams());
            } else {
                layoutParams = new StaggeredGridLayoutManager.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            }
            layoutParams.setFullSpan(true);
            view.setLayoutParams(layoutParams);
            return view;
        }
    }
    for (InterItemView footerView : footers){
        if (footerView.hashCode() == viewType){
            View view = footerView.onCreateView(parent);
            StaggeredGridLayoutManager.LayoutParams layoutParams;
            if (view.getLayoutParams()!=null) {
                layoutParams = new StaggeredGridLayoutManager.LayoutParams(view.getLayoutParams());
            } else {
                layoutParams = new StaggeredGridLayoutManager.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            }
            layoutParams.setFullSpan(true);
            view.setLayoutParams(layoutParams);
            return view;
        }
    }
    return null;
}

在onBindViewHolder方法中。能夠看到，在此方法中，添加一種header類型的view，則經過onBindView進行數據綁定。

/**
 * 綁定viewHolder，主要做用是綁定數據到正確的Item視圖上。當視圖從不可見到可見的時候，會調用這個方法。
 * @param holder                        holder
 * @param position                      索引
 */
@Override
public final void onBindViewHolder(BaseViewHolder holder, int position) {
    holder.itemView.setId(position);
    if (headers.size()!=0 && position<headers.size()){
        headers.get(position).onBindView(holder.itemView);
        return ;
    }

    int i = position - headers.size() - mObjects.size();
    if (footers.size()!=0 && i>=0){
        footers.get(i).onBindView(holder.itemView);
        return ;
    }
    OnBindViewHolder(holder,position-headers.size());
}

如何使用，以下所示，這個就是banner類型，能夠說是解耦了以前adapter中複雜的操做

InterItemView interItemView = new InterItemView() {
    @Override
    public View onCreateView(ViewGroup parent) {
        BannerView header = new BannerView(HeaderFooterActivity.this);
        header.setHintView(new ColorPointHintView(HeaderFooterActivity.this,
                Color.YELLOW, Color.GRAY));
        header.setHintPadding(0, 0, 0, (int) AppUtils.convertDpToPixel(
                8, HeaderFooterActivity.this));
        header.setPlayDelay(2000);
        header.setLayoutParams(new RecyclerView.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                (int) AppUtils.convertDpToPixel(200, HeaderFooterActivity.this)));
        header.setAdapter(new BannerAdapter(HeaderFooterActivity.this));
        return header;
    }

    @Override
    public void onBindView(View headerView) {

    }
};
adapter.addHeader(interItemView);

封裝後好處
- 拓展性——Adapter並不關心不一樣的列表類型在列表中的位置，所以對於Adapter來講列表類型能夠隨意增長或減小。十分方便，同時設置類型view的佈局和數據綁定都不須要在adapter中處理。充分解耦。
- 可維護性——不一樣的列表類型由adapter添加headerView處理，哪怕添加多個headerView，相互之間互不干擾，代碼簡潔，維護成本低。