RecyclerView实现多type页面

32次阅读

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

目录介绍

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

好消息

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

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

02. 关于我的博客

  • 我的个人站点: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…

正文完
 0