美文网首页安卓 精品收藏RecyclerviewDagger
RecyclerView更全解析之 - 打造通用的万能Adapt

RecyclerView更全解析之 - 打造通用的万能Adapt

作者: 红橙Darren | 来源:发表于2017-01-12 16:57 被阅读3217次

    1.概述


    离春节只有一个月,同时也在准备公司的节目所以每天有一段时间在练习吉他,刚刚群里有人问我什么时候开始分享仿内涵段子整个项目。算一下时间RecyclerView可能有4期左右的分享,自己又只能周末录讲解视频,所有可能会要等过完春节才能全部开始。
      上一篇已经简单的讲解了一下RecyclerView更全解析之 - 基本使用和分割线解析。这一期我们来看一下怎么去打造一个万能的RecyclerView.Adapter。
      
      视频讲解:http://pan.baidu.com/s/1c27ogbY

    相关文章:
      
      RecyclerView更全解析之 - 基本使用和分割线解析
      
      RecyclerView更全解析之 - 打造通用的万能Adapter
      
      RecyclerView更全解析之 - 为它优雅的添加头部和底部
      
      RecyclerView更全解析之 - 打造通用的下拉刷新上拉加载
      
      RecyclerView更全解析之 - 仿支付宝侧滑删除和拖动排序
      
      
      

    这里写图片描述

    2.概述


    我们肯定都用过ListView的万能Adapter,不知道大家有没有看过源码其实写起来也不困难。这里给大家介绍一篇博客大家可以看一下打造万能的ListView GridView 适配器,博主是鸿洋大神牛叉中的牛叉,如果没有思路可以参考这个。
      
      其实我们在这里是想解决上一篇的那些坑,但是千万记得别过度设计一层一层套一层谁也看不懂。大致有:

    • 列表数据绑定有一点复杂代码有点多

    • 每个列表设置条目点击事件和长按事件坑啊

    • 如果是多条目布局,更不知道要写多少代码

    3.基本思路


    新建一个RecyclerView.Adapter什么都不写大概就是这个样子:

    /**
     * Created by Darren on 2016/12/28.
     * Email: 240336124@qq.com
     * Description: 通用的Adapter
     */
    public class CommonRecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    
        protected Context mContext;
        private LayoutInflater mInflater;
        
        // 数据怎么办? 布局怎么办? 绑定怎么办?
        public CommonRecyclerAdapter(Context context) {
            this.mContext = context;
            this.mInflater = LayoutInflater.from(mContext);
        }
    
        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            return null;
        }
    
        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    
        }
    
        @Override
        public int getItemCount() {
            return 0;
        }
    }
    
    /**
     * Created by Darren on 2016/12/28.
     * Email: 240336124@qq.com
     * Description: RecyclerView的ViewHolder
     */
    public class ViewHolder extends RecyclerView.ViewHolder {
        public ViewHolder(View itemView) {
            super(itemView);
        }
    }
    

    既然想做到通用那么现在摆在面前的就三个问题:数据怎么办?布局怎么办? 绑定怎么办?。数据决定采用泛型,布局打算直接构造传第,绑定显示效果肯定就只能回传。
      
    3.1 基本改造
      数据决定采用泛型,布局打算直接构造传递,绑定显示效果回传。

    /**
     * Created by Darren on 2016/12/28.
     * Email: 240336124@qq.com
     * Description: 通用的Adapter
     */
    public abstract class CommonRecyclerAdapter<T> extends RecyclerView.Adapter<ViewHolder> {
    
        protected Context mContext;
        protected LayoutInflater mInflater;
        //数据怎么办?利用泛型
        protected List<T> mDatas;
        // 布局怎么办?直接从构造里面传递
        private int mLayoutId;
    
        public CommonRecyclerAdapter(Context context, List<T> datas, int layoutId) {
            this.mContext = context;
            this.mInflater = LayoutInflater.from(mContext);
            this.mDatas = datas;
            this.mLayoutId = layoutId;
        }
    
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            // 先inflate数据
            View itemView = mInflater.inflate(mLayoutId, parent, false);
            // 返回ViewHolder
            ViewHolder holder = new ViewHolder(itemView);
            return holder;
        }
    
        @Override
        public void onBindViewHolder(ViewHolder holder, int position) {
            // 绑定怎么办?回传出去
            convert(holder, mDatas.get(position));
        }
    
        /**
         * 利用抽象方法回传出去,每个不一样的Adapter去设置
         * @param item 当前的数据
         */
        public abstract void convert(ViewHolder holder, T item);
    
        @Override
        public int getItemCount() {
            return mDatas.size();
        }
    }
    
    

    3.2 实战使用

    接下来我们就把上一期的RecyclerView更全解析之 - 基本使用和分割线解析的Adapter做一下改造,看一看代码能简化多少:

    /**
     * Created by Darren on 2016/12/28.
     * Email: 240336124@qq.com
     * Description: 利用万能通用的Adapter改造后的列表
     */
    public class CategoryListAdapter extends CommonRecyclerAdapter<ChannelListResult.
            DataBean.CategoriesBean.CategoryListBean>{
    
        public CategoryListAdapter(Context context, List<ChannelListResult.DataBean.
                CategoriesBean.CategoryListBean> datas) {
            super(context, datas, R.layout.channel_list_item);
        }
    
        @Override
        public void convert(ViewHolder holder, ChannelListResult.DataBean.CategoriesBean.CategoryListBean item) {
            // 从ViewHolder中去findViewById
            TextView nameTv = (TextView) holder.itemView.findViewById(R.id.channel_text);
            TextView channelTopicTv = (TextView) holder.itemView.findViewById(R.id.channel_topic);
            TextView channelUpdateInfo = (TextView) holder.itemView.findViewById(R.id.channel_update_info);
            View recommendLabel = holder.itemView.findViewById(R.id.recommend_label);
            ImageView channelIconIv = (ImageView) holder.itemView.findViewById(R.id.channel_icon);
    
            // 显示数据
            nameTv.setText(item.getName());
            channelTopicTv.setText(item.getIntro());
            String str = item.getSubscribe_count() + " 订阅 | " +
                    "总帖数 <font color='#FF678D'>" + item.getTotal_updates() + "</font>";
            channelUpdateInfo.setText(Html.fromHtml(str));
            // 是否是最新
            if (item.isIs_recommend()) {
                recommendLabel.setVisibility(View.VISIBLE);
            } else {
                recommendLabel.setVisibility(View.GONE);
            }
            // 加载图片
            Glide.with(mContext).load(item.getIcon_url()).centerCrop().into(channelIconIv);
        }
    }
    
    

    代码少了不知道多少了,反正现在我们只需要关注convert()方法,但是还可以更加简单一点,我们对ViewHolder做一下优化。

    3.3 改造ViewHolder

    /**
     * Created by Darren on 2016/12/28.
     * Email: 240336124@qq.com
     * Description: RecyclerView的ViewHolder
     */
    public class ViewHolder extends RecyclerView.ViewHolder {
    
        // 用来存放子View减少findViewById的次数
        private SparseArray<View> mViews;
    
        public ViewHolder(View itemView) {
            super(itemView);
            mViews = new SparseArray<>();
        }
    
        /**
         * 设置TextView文本
         */
        public ViewHolder setText(int viewId, CharSequence text) {
            TextView tv = getView(viewId);
            tv.setText(text);
            return this;
        }
    
        /**
         * 通过id获取view
         */
        public <T extends View> T getView(int viewId) {
            // 先从缓存中找
            View view = mViews.get(viewId);
            if (view == null) {
                // 直接从ItemView中找
                view = itemView.findViewById(viewId);
                mViews.put(viewId, view);
            }
            return (T) view;
        }
    
        /**
         * 设置View的Visibility
         */
        public ViewHolder setViewVisibility(int viewId, int visibility) {
            getView(viewId).setVisibility(visibility);
            return this;
        }
    
        /**
         * 设置ImageView的资源
         */
        public ViewHolder setImageResource(int viewId, int resourceId) {
            ImageView imageView = getView(viewId);
            imageView.setImageResource(resourceId);
            return this;
        }
    
        /**
         * 设置条目点击事件
         */
        public void setOnIntemClickListener(View.OnClickListener listener) {
            itemView.setOnClickListener(listener);
        }
    
        /**
         * 设置条目长按事件
         */
        public void setOnIntemLongClickListener(View.OnLongClickListener listener) {
            itemView.setOnLongClickListener(listener);
        }
    
        /**
         * 设置图片通过路径,这里稍微处理得复杂一些,因为考虑加载图片的第三方可能不太一样
         * 也可以直接写死
         */
        public ViewHolder setImageByUrl(int viewId, HolderImageLoader imageLoader) {
            ImageView imageView = getView(viewId);
            if (imageLoader == null) {
                throw new NullPointerException("imageLoader is null!");
            }
            imageLoader.displayImage(imageView.getContext(), imageView, imageLoader.getImagePath());
            return this;
        }
    
        /**
         * 图片加载,这里稍微处理得复杂一些,因为考虑加载图片的第三方可能不太一样
         * 也可以不写这个类
         */
        public static abstract class HolderImageLoader {
            private String mImagePath;
    
            public HolderImageLoader(String imagePath) {
                this.mImagePath = imagePath;
            }
    
            public String getImagePath() {
                return mImagePath;
            }
    
            public abstract void displayImage(Context context, ImageView imageView, String imagePath);
        }
    }
    
    

    3.3 再次实战

        @Override
        public void convert(ViewHolder holder, ChannelListResult.DataBean.CategoriesBean.CategoryListBean item) {
            // 显示数据
            String str = item.getSubscribe_count() + " 订阅 | " +
                    "总帖数 <font color='#FF678D'>" + item.getTotal_updates() + "</font>";
            holder.setText(R.id.channel_text, item.getName())
                    .setText(R.id.channel_topic, item.getIntro())
                    .setText(R.id.channel_update_info, Html.fromHtml(str));
    
            // 是否是最新
            if (item.isIs_recommend()) {
                holder.setViewVisibility(R.id.recommend_label, View.VISIBLE);
            } else {
                holder.setViewVisibility(R.id.recommend_label, View.GONE);
            }
            // 加载图片
            holder.setImageByUrl(R.id.channel_icon, new GlideImageLoader(item.getIcon_url()));
        }
    
    这里写图片描述

    3.3 多布局实现

    最后我们考虑一下多布局问题,有的时候我们列表的样式各不相同,随便打个比方,比如聊天的列表样式等等。
      先介绍RecyclerView.Adapter的getItemViewType(int position)这个方法,可以根据当前位置获取一个viewType最终会传到onCreateViewHolder()这个方法中,就是它了。

    /**
     * Created by Darren on 2016/12/28.
     * Email: 240336124@qq.com
     * Description:  多布局支持接口
     */
    public interface MultiTypeSupport<T> {
        // 根据当前位置或者条目数据返回布局
        public int getLayoutId(T item, int position);
    }
    

    最终的Adapter

    /**
     * Created by Darren on 2016/12/28.
     * Email: 240336124@qq.com
     * Description: 通用的Adapter
     */
    public abstract class CommonRecyclerAdapter<T> extends RecyclerView.Adapter<ViewHolder> {
    
        protected Context mContext;
        protected LayoutInflater mInflater;
        //数据怎么办?
        protected List<T> mData;
        // 布局怎么办?
        private int mLayoutId;
    
        // 多布局支持
        private MultiTypeSupport mMultiTypeSupport;
    
        public CommonRecyclerAdapter(Context context, List<T> data, int layoutId) {
            this.mContext = context;
            this.mInflater = LayoutInflater.from(mContext);
            this.mData = data;
            this.mLayoutId = layoutId;
        }
    
        /**
         * 多布局支持
         */
        public CommonRecyclerAdapter(Context context, List<T> data, MultiTypeSupport<T> multiTypeSupport) {
            this(context, data, -1);
            this.mMultiTypeSupport = multiTypeSupport;
        }
    
        /**
         * 根据当前位置获取不同的viewType
         */
        @Override
        public int getItemViewType(int position) {
            // 多布局支持
            if (mMultiTypeSupport != null) {
                return mMultiTypeSupport.getLayoutId(mData.get(position), position);
            }
            return super.getItemViewType(position);
        }
    
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            // 多布局支持
            if (mMultiTypeSupport != null) {
                mLayoutId = viewType;
            }
            // 先inflate数据
            View itemView = mInflater.inflate(mLayoutId, parent, false);
            // 返回ViewHolder
            ViewHolder holder = new ViewHolder(itemView);
    
    
            return holder;
        }
    
        @Override
        public void onBindViewHolder(ViewHolder holder, final int position) {
            // 设置点击和长按事件
            if (mItemClickListener != null) {
                holder.itemView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        mItemClickListener.onItemClick(position);
                    }
                });
            }
            if (mLongClickListener != null) {
                holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
                    @Override
                    public boolean onLongClick(View v) {
                        return mLongClickListener.onLongClick(position);
                    }
                });
            }
    
            // 绑定怎么办?回传出去
            convert(holder, mData.get(position));
        }
    
        /**
         * 利用抽象方法回传出去,每个不一样的Adapter去设置
         *
         * @param item 当前的数据
         */
        public abstract void convert(ViewHolder holder, T item);
    
        @Override
        public int getItemCount() {
            return mData.size();
        }
    
        /***************
         * 设置条目点击和长按事件
         *********************/
        public OnItemClickListener mItemClickListener;
        public OnLongClickListener mLongClickListener;
    
        public void setOnItemClickListener(OnItemClickListener itemClickListener) {
            this.mItemClickListener = itemClickListener;
        }
    
        public void setOnLongClickListener(OnLongClickListener longClickListener) {
            this.mLongClickListener = longClickListener;
        }
    }
    

    多布局测试我就不在这里做过多的写了,如果不行大家可以选择看视频,我会在视频中去测试。

    附视频地址:http://pan.baidu.com/s/1c27ogbY

    相关文章

      网友评论

      • 夏尼采:你好 源码能给一份吗?zhanglibinit@163.com
        或者有github吗?
      • 皮特天:getItemViewType 多布局这个地方,接口并不是很好吧,毕竟项目不一定是根据bean来判断布局文件的吧,
      • NN又回来了:在条目点击事件跟长按事件的时候,那个是自己定义的接口的呢,还使用的api中自带的呢,应该是自己定义的吧。
        NN又回来了:@红橙Darren ok,已搞定,谢谢。
        红橙Darren:@pull2car 自己定义接口
      • OliverBuddy:有出版图书吗😀
        红橙Darren: @OliverBuddy 只有公开视频

      本文标题:RecyclerView更全解析之 - 打造通用的万能Adapt

      本文链接:https://www.haomeiwen.com/subject/qgtjbttx.html