一种优雅的方式实现RecyclerView条目多类型

Posted 周文凯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一种优雅的方式实现RecyclerView条目多类型相关的知识,希望对你有一定的参考价值。

转载请标明出处:
http://blog.csdn.net/xuehuayous/article/details/80021325;
本文出自:【Kevin.zhou的博客】

下面以一个故事来讲来说明这中方式是怎么实现的。

放弃vlayout

大家都了解一般首页是非常复杂的,去年初项目引入vlayout来解决首页复杂布局的问题,后来对vlayout和databinding结合进行了封装,使用起来更方便简单,不仅首页使用,很多页面都在用,还封装了单纯列表样式的Activity,刷新加载的Activity,这样很开心的过了很久。由于vlayout项目一直比较活跃,在满足各种各样的需求上一直在打补丁,我也是一直在把它更新为最新版本,直到又一次更新我的的列表不显示内容了,经过一上午的排查,找到了问题。是在合并一个同学的PR时引入的,当时我还提了个issue 升级后出现onBindViewHolder未分发的问题,并给作者提了建议,加强Code Review,其实这时候我就没有那么happy了。

在一次需求中,PM提出了可以删除列表中某一条目的需求,在之前封装的基础上很简单就实现了。这时想加一个移除的动画吧,让APP活泼点,不是那么生硬。这可难住了我,一上午硬是没搞出来,在别的同学的issue 怎么正确的使用notifyItemRemoved,正是这个问题,使得我有了放弃使用vlayout的想法。不禁问自己,我为什么要使用它,没错就是为了使复杂布局更方便管理,现在看来有悖于初衷。也许vlayout有删除动画的简单实现方式,而我没有找到,但是我决定不再使用它。

寻找轮子

放弃之后面临的另一个问题是需求还是要做,项目还是要按时上线,冒出了第一个想法是找找其他的轮子吧,MultiItem github上的介绍是一个优雅的实现多类型的RecyclerView类库,窃喜,这不正是我想要的。他的思想是给BaseItemAdapter(设置给RecyclerView)注册一系列的Adapter,然后根据需要处理的类来区分是要选择哪个被代理的Adapter。

// 初始化adapter
BaseItemAdapter adapter = new BaseItemAdapter();
// 为TextBean数据源注册ViewHolderManager管理类
adapter.register(TextBean.class, new TextViewManager());
// 为更多数据源注册ViewHolderManager管理类
adapter.register(ImageTextBean.class, new ImageAndTextManager());
adapter.register(ImageBean.class, new ImageViewManager());
// 为RecyclerView设置Adapter
recyclerView.setAdapter(adapter);

我要做的就是快速拿它匹配下我的场景,能不能满足我的需求。

  1. 是否支持多种类型条目?废话肯定支持;
  2. 是否支持不同条目不同数据类型?人家就是很久需要处理的数据类型来进行选择的,肯定没问题;
  3. 能不能支持一个数据类型对应多个样式?我看作者也是支持的,即通过数据实体中的标志来判断使用哪个Adapter;
  4. 能不能支持一个数据实体对应多个样式?由于是基于数据的类型进行选择代理Adapter的,这看来是无法实现。

我的微笑还没收场,就尴尬的定住了,5秒钟后,晃过神来,为什么我不按照这种思想自己封装一个。说实话我对作者的代理Adapter的管理还是不太满意的,这种思想很好,还是忍不住给作者点赞,那就自己来撸个轮子吧。

需求迭代

简单列表

PM在一次迭代过程中提出了要加一个新闻列表的需求,很简单,就是左边一个图片,右边一个标题、来源、发布时间,点击可以查看详情。

你一看,心中默念so easy,三下五除二,你就用RecyclerView很快实现了。

activity xml layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.kevin.myapplication.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

实体对象

public class News 
    public String imgUrl = "";
    public String content = "";
    public String source = "";
    public String time = "";
    public String link = "";

adapter

public class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.ViewHolder> 

    private List<News> dataItems = new ArrayList<>();

    public void setDataItems(List<News> dataItems) 
        this.dataItems = dataItems;
        notifyDataSetChanged();
    

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) 
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_news, parent, false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) 
        News news = dataItems.get(position);
        holder.tvContent.setText(news.content);
        holder.tvSource.setText(news.source);
        holder.tvTime.setText(news.time);
        Glide.with(holder.itemView.getContext()).load(news.imgUrl).into(holder.ivPic);
    

    @Override
    public int getItemCount() 
        return dataItems.size();
    

    static class ViewHolder extends RecyclerView.ViewHolder 
        ImageView ivPic;
        TextView tvContent;
        TextView tvSource;
        TextView tvTime;

        public ViewHolder(View view) 
            super(view);
            ivPic = view.findViewById(R.id.iv_pic);
            tvContent = view.findViewById(R.id.tv_content);
            tvSource = view.findViewById(R.id.tv_source);
            tvTime = view.findViewById(R.id.tv_time);
        
    

adapter item layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="10dp">

    <ImageView
        android:id="@+id/iv_pic"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:scaleType="centerCrop"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_content"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:ellipsize="end"
        android:maxLines="2"
        android:textColor="#333333"
        android:textSize="18sp"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@+id/iv_pic"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="这是一条新闻,这是一条新闻,这是一条新闻" />

    <TextView
        android:id="@+id/tv_source"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:textColor="#888888"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@+id/iv_pic"
        app:layout_constraintLeft_toRightOf="@+id/iv_pic"
        tools:text="澎湃新闻" />

    <TextView
        android:id="@+id/tv_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:textColor="#888888"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@+id/iv_pic"
        app:layout_constraintLeft_toRightOf="@+id/tv_source"
        tools:text="07:33" />

    <View
        android:layout_width="0dp"
        android:layout_height="1px"
        android:layout_margin="10dp"
        android:background="#EEEEEE"
        app:layout_constraintTop_toBottomOf="@id/iv_pic" />

</android.support.constraint.ConstraintLayout>

看一下实现,还不错的样子。

扩充样式

某天产品经理找到你说,只有一张图片的看着太单调了,能不能扩充出另外一种样式,一张图片的时候还是原来的样子,如果三张图片的时候上面是标题,下面是图片。你觉得没什么,也比较好实现,就没有做任何反抗去做了。

应该是这样,在之前一个图片的ViewHolder基础上扩展一个三个图片的ViewHoder,通过实体对象的图片数量进行区分是选择哪一个ViewHolder,不同的ViewHolder绑定不同的数据。

修改实体对象

把原来的String类型的图片数据改为List<String>的集合。

public class News 
    public List<String> imgUrls = null;
    public String content = "";
    public String source = "";
    public String time = "";
    public String link = "";

新样式的xml layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="10dp">

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="2"
        android:textColor="#333333"
        android:textSize="18sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="这是一条新闻,这是一条新闻,这是一条新闻" />

    <ImageView
        android:id="@+id/iv_pic1"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:layout_marginTop="10dp"
        android:scaleType="centerCrop"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/iv_pic2"
        app:layout_constraintTop_toBottomOf="@+id/tv_content"
        tools:src="@mipmap/ic_launcher" />

    <ImageView
        android:id="@+id/iv_pic2"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:layout_marginLeft="4dp"
        android:layout_marginTop="10dp"
        android:scaleType="centerCrop"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/iv_pic1"
        app:layout_constraintRight_toLeftOf="@+id/iv_pic3"
        app:layout_constraintTop_toBottomOf="@+id/tv_content"
        tools:src="@mipmap/ic_launcher" />

    <ImageView
        android:id="@+id/iv_pic3"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:layout_marginLeft="4dp"
        android:layout_marginTop="10dp"
        android:scaleType="centerCrop"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/iv_pic2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_content"
        tools:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tv_source"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:textColor="#888888"
        android:textSize="12sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv_pic1"
        tools:text="澎湃新闻" />

    <TextView
        android:id="@+id/tv_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:textColor="#888888"
        android:textSize="12sp"
        app:layout_constraintLeft_toRightOf="@+id/tv_source"
        app:layout_constraintTop_toTopOf="@+id/tv_source"
        tools:text="07:33" />

    <View
        android:layout_width="0dp"
        android:layout_height="1px"
        android:layout_margin="10dp"
        android:background="#EEEEEE"
        app:layout_constraintTop_toBottomOf="@id/tv_source" />

</android.support.constraint.ConstraintLayout>

Adapter改造

复写getItemViewType方法,通过判断图片的个数是不是3个来区分样式。如果是则ViewType为1,如果不是则ViewType为0。

@Override
public int getItemViewType(int position) 
    News news = dataItems.get(position);
    boolean isThreePic = news.imgUrls.size() == 3;
    int viewType = isThreePic ? 1 : 0;
    return viewType;

增加三张图片样式的ViewHolder

static class ThreePicViewHolder extends RecyclerView.ViewHolder 
    ImageView ivPic1;
    ImageView ivPic2;
    ImageView ivPic3;
    TextView tvContent;
    TextView tvSource;
    TextView tvTime;

    public ThreePicViewHolder(View view) 
        super(view);
        ivPic1 = view.findViewById(R.id.iv_pic1);
        ivPic2 = view.findViewById(R.id.iv_pic2);
        ivPic3 = view.findViewById(R.id.iv_pic3);
        tvContent = view.findViewById(R.id.tv_content);
        tvSource = view.findViewById(R.id.tv_source);
        tvTime = view.findViewById(R.id.tv_time);
    

在onCreateViewHolder中,通过判断ViewType的类型,创建对应的ViewHolder。

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) 
    if (viewType == 0) 
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_news, parent, false);
        OnePicViewHolder holder = new OnePicViewHolder(view);
        return holder;
     else 
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_news_extend, parent, false);
        ThreePicViewHolder holder = new ThreePicViewHolder(view);
        return holder;
    

在onBindingViewHolder中,通过判断ViewType的类型,绑定对应的数据到控件。

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) 
    int viewType = holder.getItemViewType();
    if (viewType == 0) 
        OnePicViewHolder viewHolder = (OnePicViewHolder) holder;
        News news = dataItems.get(position);
        viewHolder.tvContent.setText(news.content);
        viewHolder.tvSource.setText(news.source);
        viewHolder.tvTime.setText(news.time);
        Glide.with(holder.itemView.getContext()).load(news.imgUrls.get(0)).into(viewHolder.ivPic);
     else 
        ThreePicViewHolder viewHolder = (ThreePicViewHolder) holder;
        News news = dataItems.get(position);
        viewHolder.tvContent.setText(news.content);
        viewHolder.tvSource.setText(news.source);
        viewHolder.tvTime.setText(news.time);
        Glide.with(holder.itemView.getContext()).load(news.imgUrls.get(0)).into(viewHolder.ivPic1);
        Glide.with(holder.itemView.getContext()).load(news.imgUrls.get(1)).into(viewHolder.ivPic2);
        Glide.with(holder.itemView.getContext()).load(news.imgUrls.get(2)).into(viewHolder.ivPic3);
    

OK,很快就完成了,这次的需求,看了下效果,还可以。但是没有第一次那么开心了,隐隐感觉这里的代码有点恶心。

又扩充样式

过了一段时间,产品又找到你,说想增加一种图集类型的样式,上面是标题,下面是一张大图,点开是可以左右滑动翻页的图集。说完一张呆萌脸问你是不是很简单,你想到又要加一种类型的ViewHolder,而之前的实现已经让你不爽。你说:倒是不复杂,但是你也不能无限制的加啊。抱怨完了,还是要做的。

添加xml布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="10dp">

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="2"
        android:textColor="#333333"
        android:textSize="18sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="这是一条新闻,这是一条新闻,这是一条新闻" />

    <ImageView
        android:id="@+id/iv_pic"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="10dp"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="5:3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_content"
        tools:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tv_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@mipmap/icon_img"
        android:drawablePadding="8dp"
        android:paddingBottom="6dp"
        android:paddingRight="10dp"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="@+id/iv_pic"
        app:layout_constraintRight_toRightOf="@+id/iv_pic"
        tools:text="图3" />

    <TextView
        android:id="@+id/tv_source"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:textColor="#888888"
        android:textSize="12sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv_pic"
        tools:text="澎湃新闻" />

    <TextView
        android:id="@+id/tv_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:textColor="#888888"
        android:textSize="12sp"
        app:layout_constraintLeft_toRightOf="@+id/tv_source"
        app:layout_constraintTop_toTopOf="@+id/tv_source"
        tools:text="07:33" />

    <View
        android:layout_width="0dp"
        android:layout_height="1px"
        android:layout_margin="10dp"
        android:background="#EEEEEE"
        app:layout_constraintTop_toBottomOf="@id/tv_source" />

</android.support.constraint.ConstraintLayout>

又改造Adapter

复写getItemViewType方法,通过判断图片的个数区分样式。

@Override
public int getItemViewType(int position) 
    News news = dataItems.get(position);
    int imgSize = news.imgUrls.size();
    if (imgSize < 3) 
        return 0;
     else if (imgSize == 3) 
        return 2;
     else 
        return 3;
    

增加图集样式的ViewHolder

static class MorePicViewHolder extends RecyclerView.ViewHolder 
    ImageView ivPic;
    TextView tvContent;
    TextView tvCount;
    TextView tvSource;
    TextView tvTime;

    public MorePicViewHolder(View view) 
        super(view);
        ivPic = view.findViewById(R.id.iv_pic);
        tvContent = view.findViewById(R.id.tv_content);
        tvCount = view.findViewById(R.id.tv_count);
        tvSource = view.findViewById(R.id.tv_source);
        tvTime = view.findViewById(R.id.tv_time);
    

在onCreateViewHolder中,通过判断ViewType的类型,创建对应的ViewHolder。

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) 
    if (viewType == 0) 
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_news_one_pic, parent, false);
        OnePicViewHolder holder = new OnePicViewHolder(view);
        return holder;
     else if (viewType == 2) 
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_news_three_pic, parent, false);
        ThreePicViewHolder holder = new ThreePicViewHolder(view);
        return holder;
     else if (viewType == 3) 
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_news_more_pic, parent, false);
        MorePicViewHolder holder = new MorePicViewHolder(view);
        return holder;
     else 
        // Can't reach;
        return null;
    

在onBindingViewHolder中,通过判断ViewType的类型,绑定对应的数据到控件。

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) 
    int viewType = holder.getItemViewType();
    if (viewType == 0) 
        OnePicViewHolder viewHolder = (OnePicViewHolder) holder;
        News news = dataItems.get(position);
        viewHolder.tvContent.setText(news.content);
        viewHolder.tvSource.setText(news.source);
        viewHolder.tvTime.setText(news.time);
        Glide.with(holder.itemView.getContext()).load(news.imgUrls.get(0)).into(viewHolder.ivPic);
     else if (viewType == 2) 
        ThreePicViewHolder viewHolder = (ThreePicViewHolder) holder;
        News news = dataItems.get(position);
        viewHolder.tvContent.setText(news.content);
        viewHolder.tvSource.setText(news.source);
        viewHolder.tvTime.setText(news.time);
        Glide.with(holder.itemView.getContext()).load(news.imgUrls.get(0)).into(viewHolder.ivPic1);
        Glide.with(holder.itemView.getContext()).load(news.imgUrls.get(1)).into(viewHolder.ivPic2);
        Glide.with(holder.itemView.getContext()).load(news.imgUrls.get(2)).into(viewHolder.ivPic3);
     else if (viewType == 3) 
        MorePicViewHolder viewHolder = (MorePicViewHolder) holder;
        News news = dataItems.get(position);
        viewHolder.tvContent.setText(news.content);
        viewHolder.tvSource.setText(news.source);
        viewHolder.tvTime.setText(news.time);
        viewHolder.tvCount.setText(news.count + " 图");
        Glide.with(holder.itemView.getContext()).load(news.imgUrls.get(0)).into(viewHolder.ivPic);
    

OK,很快又改完了,这次你的心情不太愉快,之前的太不利于扩展了,每次添加一种新的都要把Adapter改一遍。

反思

在上次需求上线之后,你开始反思,为什么我这么反感产品扩充样式,而不是我的代码有一定的业务兼容性,而是把自己搞的这么被动。算了,下楼喝杯咖啡冷静冷静。你顺便叫了下旁边的哥们,他说:“我比较忙,你给我带杯吧。”,“带什么?”你问,“摩卡小杯”。你心想,本来叫你一块儿去的,你小子这么懒叫我给你带。唉,对啊,我的Adapter不就可以这样嘛,自己不做处理,委托给其他的Adapter去做。

一开始的时候注册三个的委托Adapter对象,A委托Adapter可以处理一张图片的样式,B委托Adapter可以处理三张图片的样式,C委托可以处理多张图片的样式。根据数据里面图片的数量选择对应的委托Adapter去处理就可以啦。

委托

所有的委托都有相同的方法,为了方便定义一个接口。

public interface IDelegateAdapter 

    // 查找委托时调用的方法,返回自己能处理的类型即可。
    boolean isForViewType(News news);

    // 用于委托Adapter的onCreateViewHolder方法
    RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType);

    // 用于委托Adapter的onBindViewHolder方法
    void onBindViewHolder(RecyclerView.ViewHolder holder, int position, News news);

然后是三个委托

public class OnePicDelegateAdapter implements IDelegateAdapter 

    @Override
    public boolean isForViewType(News news) 
        // 我能处理一张图片
        return news.imgUrls.size() == 1;
    

    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) 
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_news_one_pic, parent, false);
        OnePicViewHolder holder = new OnePicViewHolder(view);
        return holder;
    

    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position, News news) 
        OnePicViewHolder viewHolder = (OnePicViewHolder) holder;
        viewHolder.tvContent.setText(news.content);
        viewHolder.tvSource.setText(news.source);
        viewHolder.tvTime.setText(news.time);
        Glide.with(holder.itemView.getContext()).load(news.imgUrls.get(0)).into(viewHolder.ivPic);
    

    static class OnePicViewHolder extends RecyclerView.ViewHolder 
        ImageView ivPic;
        TextView tvContent;
        TextView tvSource;
        TextView tvTime;

        public OnePicViewHolder(View view) 
            super(view);
            ivPic = view.findViewById(R.id.iv_pic);
            tvContent = view.findViewById(R.id.tv_content);
            tvSource = view.findViewById(R.id.tv_source);
            tvTime = view.findViewById(R.id.tv_time);
        
    
public class ThreePicDelegateAdapter implements IDelegateAdapter 

    @Override
    public boolean isForViewType(News news) 
        // 我能处理三张图片
        return news.imgUrls.size() == 3;
    

    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) 
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_news_three_pic, parent, false);
        ThreePicViewHolder holder = new ThreePicViewHolder(view);
        return holder;
    

    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position, News news) 
        ThreePicViewHolder viewHolder = (ThreePicViewHolder) holder;
        viewHolder.tvContent.setText(news.content);
        viewHolder.tvSource.setText(news.source);
        viewHolder.tvTime.setText(news.time);
        Glide.with(holder.itemView.getContext()).load(news.imgUrls.get(0)).into(viewHolder.ivPic1);
        Glide.with(holder.itemView.getContext()).load(news.imgUrls.get(1)).into(viewHolder.ivPic2);
        Glide.with(holder.itemView.getContext()).load(news.imgUrls.get(2)).into(viewHolder.ivPic3);
    

    static class ThreePicViewHolder extends RecyclerView.ViewHolder 
        ImageView ivPic1;
        ImageView ivPic2;
        ImageView ivPic3;
        TextView tvContent;
        TextView tvSource;
        TextView tvTime;

        public ThreePicViewHolder(View view) 
            super(view);
            ivPic1 = view.findViewById(R.id.iv_pic1);
            ivPic2 = view.findViewById(R.id.iv_pic2);
            ivPic3 = view.findViewById(R.id.iv_pic3);
            tvContent = view.findViewById(R.id.tv_content);
            tvSource = view.findViewById(R.id.tv_source);
            tvTime = view.findViewById(R.id.tv_time);
        
    

public class MorePicDelegateAdapter implements IDelegateAdapter 

    @Override
    public boolean isForViewType(News news) 
        // 我能处理多张图片
        return news.imgUrls.size() > 3;
    

    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) 
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_news_more_pic, parent, false);
        MorePicViewHolder holder = new MorePicViewHolder(view);
        return holder;
    

    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position, News news) 
        MorePicViewHolder viewHolder = (MorePicViewHolder) holder;
        viewHolder.tvContent.setText(news.content);
        viewHolder.tvSource.setText(news.source);
        viewHolder.tvTime.setText(news.time);
        viewHolder.tvCount.setText(news.count + " 图");
        Glide.with(holder.itemView.getContext()).load(news.imgUrls.get(0)).into(viewHolder.ivPic);
    

    static class MorePicViewHolder extends RecyclerView.ViewHolder 
        ImageView ivPic;
        TextView tvContent;
        TextView tvCount;
        TextView tvSource;
        TextView tvTime;

        public MorePicViewHolder(View view) 
            super(view);
            ivPic = view.findViewById(R.id.iv_pic);
            tvContent = view.findViewById(R.id.tv_content);
            tvCount = view.findViewById(R.id.tv_count);
            tvSource = view.findViewById(R.id.tv_source);
            tvTime = view.findViewById(R.id.tv_time);
        
    

再看下之前冗余的Adapter,现在已经非常清瘦了

public class NewsAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> 

    private List<News> dataItems = new ArrayList<>();

    public void setDataItems(List<News> dataItems) 
        this.dataItems = dataItems;
        notifyDataSetChanged();
    

    List<IDelegateAdapter> delegateAdapters = new ArrayList<>();

    public void addDelegate(IDelegateAdapter delegateAdapter) 
        delegateAdapters.add(delegateAdapter);
    

    @Override
    public int getItemViewType(int position) 

    

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) 

    

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) 

    

    @Override
    public int getItemCount() 
        return dataItems.size();
    

有三个方法需要我们去填空,在之前的图中我们说过,getItemViewType通过委托在集合中的index去标识。

@Override
public int getItemViewType(int position) 
    // 找到当前位置的数据
    News news = dataItems.get(position);

    // 遍历所有的代理,问下他们谁能处理
    for (IDelegateAdapter delegateAdapter : delegateAdapters) 
        if (delegateAdapter.isForViewType(news)) 
            // 谁能处理返回他的index
            return delegateAdapters.indexOf(delegateAdapter);
        
    

    throw new RuntimeException("没有找到可以处理的委托Adapter");

然后是onCreateViewHolder,既然是通过委托Adapter的在集合中的index去标记的ViewType,那么在onCreateViewHolder中就非常简单了。

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) 
    // 找到对应的委托Adapter
    IDelegateAdapter delegateAdapter = delegateAdapters.get(viewType);
    // 把onCreateViewHolder交给委托Adapter去处理
    RecyclerView.ViewHolder viewHolder = delegateAdapter.onCreateViewHolder(parent, viewType);
    return viewHolder;

接下来是onBindViewHolder,类似onCreateViewHolder,这里也是找到委托Adapter,交给他去处理。

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) 
    // 找到当前ViewHolder的ViewType,也就是委托Adapter在集合中的index
    int viewType = holder.getItemViewType();
    // 找到对应的委托Adapter
    IDelegateAdapter delegateAdapter = delegateAdapters.get(viewType);
    // 把onBindViewHolder交给委托Adapter去处理
    delegateAdapter.onBindViewHolder(holder, position, dataItems.get(position));

使用的时候也非常简单,在之前的基础上注册委托Adapter就可以了。

RecyclerView recyclerView = findViewById(R.id.recycler_view);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
NewsAdapter mAdapter = new NewsAdapter();
// 添加委托Adapter
mAdapter.addDelegate(new OnePicDelegateAdapter());
mAdapter.addDelegate(new ThreePicDelegateAdapter());
mAdapter.addDelegate(new MorePicDelegateAdapter());

recyclerView.setAdapter(mAdapter);

双扩充样式

产品经理又来了,说又要添加一种视频类型的样式。你爽快地说:“没问题”。

之前一直是通过图片的个数来判断是那种形式,但这次明显不能这么干了,修改原来的实体,添加一个type来标识是那种类型。

public class News 
    public int type = 0; // 0:一张图片;1:三张图片;2:多张图片;3:视频类型
    public List<String> imgUrls = null;
    public String content = "";
    public String count = "";
    public String duration = "";
    public String source = "";
    public String time = "";
    public String link = "";

添加xml布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="10dp">

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="2"
        android:textColor="#333333"
        android:textSize="18sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="这是一条新闻,这是一条新闻,这是一条新闻" />

    <ImageView
        android:id="@+id/iv_pic"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="10dp"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="5:3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_content"
        tools:src="@mipmap/ic_launcher" />

    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@mipmap/play90"
        app:layout_constraintBottom_toBottomOf="@+id/iv_pic"
        app:layout_constraintLeft_toLeftOf="@+id/iv_pic"
        app:layout_constraintRight_toRightOf="@+id/iv_pic"
        app:layout_constraintTop_toTopOf="@+id/iv_pic" />

    <TextView
        android:id="@+id/tv_duration"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="6dp"
        android:paddingRight="10dp"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="@+id/iv_pic"
        app:layout_constraintRight_toRightOf="@+id/iv_pic"
        tools:text="12:34" />

    <TextView
        android:id="@+id/tv_source"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:textColor="#888888"
        android:textSize="12sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv_pic"
        tools:text="澎湃新闻" />

    <TextView
        android:id="@+id/tv_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:textColor="#888888"
        android:textSize="12sp"
        app:layout_constraintLeft_toRightOf="@+id/tv_source"
        app:layout_constraintTop_toTopOf="@+id/tv_source"
        tools:text="07:33" />

    <View
        android:layout_width="0dp"
        android:layout_height="1px"
        android:layout_margin="10dp"
        android:background="#EEEEEE"
        app:layout_constraintTop_toBottomOf="@id/tv_source" />

</android.support.constraint.ConstraintLayout>

添加委托Adapter

public class VideoDelegateAdapter implements IDelegateAdapter 

    @Override
    public boolean isForViewType(News news) 
        // 我能处理视频类型
        return news.type == 3;
    

    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) 
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_news_video, parent, false);
        VideoViewHolder holder = new VideoViewHolder(view);
        return holder;
    

    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position, News news) 
        VideoViewHolder viewHolder = (VideoViewHolder) holder;
        viewHolder.tvContent.setText(news.content);
        viewHolder.tvSource.setText(news.source);
        viewHolder.tvTime.setText(news.time);
        viewHolder.tvDuration.setText(news.duration);
        Glide.with(holder.itemView.getContext()).load(news.imgUrls.get(0)).into(viewHolder.ivPic);
    

    static class VideoViewHolder extends RecyclerView.ViewHolder 
        ImageView ivPic;
        TextView tvContent;
        TextView tvDuration;
        TextView tvSource;
        TextView tvTime;

        public VideoViewHolder(View view) 
            super(view);
            ivPic = view.findViewById(R.id.iv_pic);
            tvContent = view.findViewById(R.id.tv_content);
            tvDuration = view.findViewById(R.id.tv_duration);
            tvSource = view.findViewById(R.id.tv_source);
            tvTime = view.findViewById(R.id.tv_time);
        
    

添加注册委托代理

// 添加委托Adapter
mAdapter.addDelegate(new OnePicDelegateAdapter());
mAdapter.addDelegate(new ThreePicDelegateAdapter());
mAdapter.addDelegate(new MorePicDelegateAdapter());
mAdapter.addDelegate(new VideoDelegateAdapter()); // 新添加的视频类型

经过非常简单的三步之后,就很清爽地完成了这次需求,大家都很开心。

叒扩充样式

产品经理再一次找到你,说我们的新闻很火爆,希望加入广告。每10条加入一个广告,是不是很好做。你心想,卧槽,这他么不是坑我么。没办法,产品经理的性子你也知道,这个肯定是要做的。

这么看来之前的封装还是不能满足的,之前的是要求所有的数据都有相同的类型。那能不能加入不同数据类型的支持呢?

看下之前的是通过一个List来保存托管Adapter的,这样是无法保存不同的类型信息的。

List<IDelegateAdapter> delegateAdapters = new ArrayList<>();

那就再增加一个保存类型信息的List吧,为了便于查找,这里使用Android提供的SparseArrayCompat。两个集合定义如下:

// 用于保存委托Adapter
private SparseArrayCompat<AdapterDelegate<Object>> delegates = new SparseArrayCompat();
// 用于保存委托Adapter能处理的类型
private SparseArray<String> dataTypes = new SparseArray<>();
public AdapterDelegatesManager addDelegate(AdapterDelegate<Object, VH> delegate) 
    Type superclass = delegate.getClass().getGenericSuperclass();
    if (superclass instanceof ParameterizedType) 
        Class<?> clazz = (Class<?>) ((ParameterizedType) superclass).getActualTypeArguments()[0];
        String typeWithTag = clazz.getName();

        int viewType = delegates.size();
        // Save the delegate to the collection;
        delegates.put(viewType, delegate);
        // Save the index of the delegate to the collection;
        dataTypes.put(viewType, typeWithTag);
     else 
        // Has no generics.
        throw new IllegalArgumentException(
                String.format("Please set the correct generic parameters on %s.", delegate.getClass().getName()));
    
    return this;

每向delegates中添加一个委托Adapter,则向dataTypes中添加该委托Adapter能处理的类型。比如:向delegates添加一个能处理String类型的委托 AdapterDelegate<String>位置是1,那么向dataType中添加一个java.lang.String位置也是1。那么在处理String类型的数据的时候在dataType中查找到对应的位置为1,就可以去delegate的1位置取对应的委托Adapter就可以啦。

这里就不再贴代码了,github地址DelegationAdapter

叕来需求

经过以上封装,你开心地工作了相当长的一段时间。有一天产品又找到你,我们要做一个账单详情页,很简单,就是显示他的消费信息。

你一看,上面是固定的信息,下面是固定的信息,中间是一个列表。使用ListView的添加头部、尾部会非常简单,但是你又不想使用ListView。能不能使用封装的RecyclerView委托Adapter实现呢?

public class Bill 

    public String title = "";           // 标题
    public String waiter = "";          // 服务员
    public String cashier = "";         // 收银员
    public int ramadhin = 0;            // 桌号
    public int guests = 0;              // 客人数
    public String beginTime = "";       // 开台时间
    public String endTime = "";         // 结账时间
    public String duration = "";        // 用餐时长
    public List<Item> details = null;   // 用餐详情
    public String total = "";           // 合计
    public String discounts = "";       // 优惠
    public String receivable = "";      // 应收
    public String describe = "";        // 描述信息

    public static class Item 
        public String name = "";    // 名称
        public String count = "";   // 数量
        public String price = "";   // 单价
        public String subtotal = "";// 小计
    

通过分析,应该是三个委托Adapter,即上中下三部分。中间部分还好,类型是Bill.Item,但是上下两部分就无法区分了,都是Bill类型。

那怎样才能区分相同数据类型同一数据的委托Adapter呢?能不能给每个委托Adapter打一个Tag,在设置数据的时候也添加Tag,这样就可以通过Tag去区分了。修改设置数据类型标记的部分。

// 用于保存委托Adapter
private SparseArrayCompat<AdapterDelegate<Object, VH>> delegates = new SparseArrayCompat();
// 用于保存委托Adapter能处理的类型
private SparseArray<String> dataTypeWithTags = new SparseArray<>();
public AdapterDelegatesManager addDelegate(AdapterDelegate<Object, VH> delegate, String tag) 
    Type superclass = delegate.getClass().getGenericSuperclass();
    if (superclass instanceof ParameterizedType) 
        Class<?> clazz = (Class<?>) ((ParameterizedType) superclass).getActualTypeArguments()[0];
        String typeWithTag = clazz.getName() + ":" + tag;

        int viewType = delegates.size();
        // Save the delegate to the collection;
        delegates.put(viewType, delegate);
        // Save the index of the delegate to the collection;
        dataTypeWithTags.put(viewType, typeWithTag);
     else 
        // Has no generics.
        throw new IllegalArgumentException(
                String.format("Please set the correct generic parameters on %s.", delegate.getClass().getName()));
    
    return this;

通过一个动画来总结下实现方案,开始注册了四个委托Adapter,其中A、C类型都为String,通过tag标记来区分;添加数据之后,RecyclerView进行布局,首先处理带tag为A的字符串"ABCDEF",那么到委托集合中去找对应的Adapter去进行渲染。接着一个个都完成了渲染。

OK,很轻松就搞定了。剩余代码及详细demo请移步github DelegationAdapter

 

以后终于能开心地撸码了。

以上是关于一种优雅的方式实现RecyclerView条目多类型的主要内容,如果未能解决你的问题,请参考以下文章

android开发学习 ------- RecyclerView多类型实例

实现每日优鲜中RecyclerView多条目背景效果

实现每日优鲜中RecyclerView多条目背景效果

RecyclerView.ViewCacheExtension 使用及踩坑

RecyclerView.ViewCacheExtension 使用及踩坑

Android高级UI:RecyclerView优雅地解决瀑布流的两个神坑