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

其余介绍

01.关于博客汇总连接

02.关于个人博客

个人我的站点：www.yczbj.org，www.ycbjie.cn
github：https://github.com/yangchong211
知乎：https://www.zhihu.com/people/yczbj/activities
简书：http://www.jianshu.com/u/b7b2c6ed9284
csdn：http://my.csdn.net/m0_37700275
喜马拉雅听书：http://www.ximalaya.com/zhubo/71989305/
开源中国：https://my.oschina.net/zbj1618/blog
泡在网上的日子：http://www.jcodecraeer.com/member/content_list.php?channelid=1
邮箱：yangchong211@163.com
阿里云博客：https://yq.aliyun.com/users/article?spm=5176.100- 239.headeruserinfo.3.dT4bcV
segmentfault头条：https://segmentfault.com/u/xiangjianyu/articles
掘金：https://juejin.im/user/5939433efe88c2006afa0c6e