RecyclerView实现多type页面

8次阅读

共计 8077 个字符，预计需要花费 21 分钟才能阅读完成。

01. 先看看实际需求
02.adapter 实现多个 type
03. 这样写的弊端
04. 如何优雅实现 adapter 封装

博客笔记大汇总【16 年 3 月到至今】，包括 Java 基础及深入知识点，Android 技术博客，Python 学习笔记等等，还包括平时开发中遇到的 bug 汇总，当然也在工作之余收集了大量的面试题，长期更新维护并且修正，持续完善……开源的文件是 markdown 格式的！同时也开源了生活博客，从 12 年起，积累共计 N 篇 [近 100 万字，陆续搬到网上]，转载请注明出处，谢谢！
链接地址：https://github.com/yangchong2…
如果觉得好，可以 star 一下，谢谢！当然也欢迎提出建议，万事起于忽微，量变引起质变！

比如一个 APP 的首页，包含 Banner 区、广告区、文本内容、图片内容、新闻内容等等。
RecyclerView 可以用 ViewType 来区分不同的 item, 也可以满足需求，但还是存在一些问题，比如：
- 1，在 item 过多逻辑复杂列表界面，Adapter 里面的代码量庞大，逻辑复杂，后期难以维护。
- 2，每次增加一个列表都需要增加一个 Adapter，重复搬砖，效率低下。
- 3，无法复用 adapter，假如有多个页面有多个 type，那么就要写多个 adapter。
- 4，要是有局部刷新，那么就比较麻烦了，比如广告区也是一个九宫格的 RecyclerView，点击局部刷新当前数据，比较麻烦。

通常写一个多 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);
            // 绑定控件
        }
    }
}

上面那样写的弊端
- 类型检查与类型转型，由于在 onCreateViewHolder 根据不同类型创建了不同的 ViewHolder，所以在 onBindViewHolder 需要针对不同类型的 ViewHolder 进行数据绑定与逻辑处理，这导致需要通过 instanceof 对 ViewHolder 进行类型检查与类型转型。
- 不利于扩展，目前的需求是列表中存在 5 种布局类类型，那么如果需求变动，极端一点的情况就是数据源是从服务器获取的，数据中的 model 决定列表中的布局类型。这种情况下，每当 model 改变或 model 类型增加，我们都要去改变 adapter 中很多的代码，同时 Adapter 还必须知道特定的 model 在列表中的位置（position）除非跟服务端约定好，model（位置）不变，很显然，这是不现实的。
- 不利于维护，这点应该是上一点的延伸，随着列表中布局类型的增加与变更，getItemViewType、onCreateViewHolder、onBindViewHolder 中的代码都需要变更或增加，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

 */
@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，相互之间互不干扰，代码简洁，维护成本低。

1. 技术博客汇总
2. 开源项目汇总
3. 生活博客汇总
4. 喜马拉雅音频汇总
5. 其他汇总

我的个人站点：www.yczbj.org，www.ycbjie.cn
github：https://github.com/yangchong211
知乎：https://www.zhihu.com/people/…
简书：http://www.jianshu.com/u/b7b2…
csdn：http://my.csdn.net/m0_37700275
喜马拉雅听书：http://www.ximalaya.com/zhubo…
开源中国：https://my.oschina.net/zbj161…
泡在网上的日子：http://www.jcodecraeer.com/me…
邮箱：yangchong211@163.com
阿里云博客：https://yq.aliyun.com/users/a… 239.headeruserinfo.3.dT4bcV
segmentfault 头条：https://segmentfault.com/u/xi…
掘金：https://juejin.im/user/593943…

项目案例地址：https://github.com/yangchong2…

正文完

发表至： java

2019-06-04

0

leetcode刷题记录26-Remove-Duplicates-from-Sorted-Array

关于java:秒杀系统设计

SpringCloud2

关于java:hystrix系列

不改代码也能全面-Serverless-化阿里中间件如何破解这一难题

RecyclerView实现多type页面

目录介绍

好消息

01. 先看看实际需求

02.adapter 实现多个 type

03. 这样写的弊端

04. 如何优雅实现 adapter 封装

其他介绍

01. 关于博客汇总链接

02. 关于我的博客

项目案例地址：https://github.com/yangchong2…

站内搜索