RecyclerView更全解析之 - 基本使用和分割线解析

1.概述

昨天跟自己群里的人唠嗑的时候发现还有人在用Eclipse，我相信可能还是有很多人在用ListView，这里介绍一个已经出来的n年了的控件RecyclerView，实现ListView,GridView,瀑布流的效果。还可以轻松的实现一些复杂的功能，如QQ的拖动排序，侧滑删除等等。

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

这里写图片描述

2．概述

最终我们肯定要用到项目中，因为我觉得所有写的东西都必须封装好下次开发可以直接用到项目中。但是首先得要熟悉该控件才行。可以选择去google官方了解RecyclerView，但要翻墙。

据官方的介绍，该控件用于在有限的窗口中展示大量数据集，其实这样功能的控件我们并不陌生，例如：ListView、GridView。

那么有了ListView、GridView为什么还需要RecyclerView这样的控件呢？整体上看RecyclerView架构，提供了一种插拔式的体验，高度的解耦，异常的灵活，通过设置它提供的不同LayoutManager，ItemDecoration , ItemAnimator实现令人瞠目的效果。

1.你想要控制其显示的方式，请通过布局管理器LayoutManager，ListView–>GridView–>瀑布流　只需要一行代码；
2.你想要控制Item间的间隔（可绘制），请通过ItemDecoration（这个比较蛋疼） ；
3.你想要控制Item增删的动画，请通过ItemAnimator；
4.你想要控制点击、长按事件，请自己写（擦，这点尼玛）。

3．基本使用

首先我们需要添加RecyclerView的依赖包，在build.gradle中添加依赖：

compile 'com.android.support:recyclerview-v7:24.0.0' 

和ListView一样通过设置Adapter()给他绑定数据源，但在这之前必须设置setLayoutManager()这个方法是用来设置显示效果的（这样我们就可以通过设置布局管理显示不同的效果：ListView、GridView、瀑布流等等）。

1 // 设置recyclerView的布局管理  
2    // LinearLayoutManager -> ListView风格
3    // GridLayoutManager -> GridView风格
4    // StaggeredGridLayoutManager -> 瀑布流风格
5    LinearLayoutManager linearLayoutManager = new 
6          LinearLayoutManager(this);
7    mRecyclerView.setLayoutManager(linearLayoutManager); 

3.1 Adapter编写

接下来我们先去后台服务器请求数据，然后我们来编写Adapter，我们直接使用Okhttp获取服务器数据，在这里就不多说了，我们主要看Adapter怎么写。在ListView和GridView中我们可以不用ViewHolder，反正没人打我，只是数据特别多可能会崩溃而已；但是在RecyclerView中就不一样了它强制我们使用ViewHolder：

1/**
2 * Created by Darren on 2016/12/27.
3 * Email: 240336124@qq.com
4 * Description: 热吧订阅列表的Adapter
5 */
6public class CategoryListAdapter extends RecyclerView.Adapter<CategoryListAdapter.ViewHolder> {
7
8    private List<ChannelListResult.DataBean.CategoriesBean.CategoryListBean> mList;
9    private Context mContext;
10    private LayoutInflater mInflater;
11
12    public CategoryListAdapter(Context context, List<ChannelListResult.DataBean.CategoriesBean.CategoryListBean> list) {
13        this.mContext = context;
14        this.mList = list;
15        this.mInflater = LayoutInflater.from(mContext);
16    }
17
18    /**
19     * 创建条目ViewHolder
20     *
21     * @param parent   RecyclerView
22     * @param viewType view的类型可以用来显示多列表布局等等
23     * @return
24     */
25    @Override
26    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
27        // 创建条目
28        View itemView = mInflater.inflate(R.layout.channel_list_item, parent, false);
29        // 创建ViewHolder
30        ViewHolder viewHolder = new ViewHolder(itemView);
31        return viewHolder;
32    }
33
34    /**
35     * 绑定ViewHolder设置数据
36     *
37     * @param holder
38     * @param position 当前位置
39     */
40    @Override
41    public void onBindViewHolder(ViewHolder holder, int position) {
42        // 设置绑定数据
43        ChannelListResult.DataBean.CategoriesBean.CategoryListBean item = mList.get(position);
44        holder.nameTv.setText(item.getName());
45        holder.channelTopicTv.setText(item.getIntro());
46        String str = item.getSubscribe_count() + " 订阅 | " +
47                "总帖数 <font color='#FF678D'>" + item.getTotal_updates() + "</font>";
48        holder.channelUpdateInfo.setText(Html.fromHtml(str));
49        // 是否是最新
50        if (item.isIs_recommend()) {
51            holder.recommendLabel.setVisibility(View.VISIBLE);
52        } else {
53            holder.recommendLabel.setVisibility(View.GONE);
54        }
55        // 加载图片
56        Glide.with(mContext).load(item.getIcon_url()).centerCrop().into(holder.channelIconIv);
57    }
58
59    /**
60     * 总共有多少条数据
61     */
62    @Override
63    public int getItemCount() {
64        return mList.size();
65    }
66
67    /**
68     * RecyclerView的Adapter需要一个ViewHolder必须要extends RecyclerView.ViewHolder
69     */
70    public static class ViewHolder extends RecyclerView.ViewHolder {
71        public TextView nameTv;
72        public TextView channelTopicTv;
73        public TextView channelUpdateInfo;
74        public View recommendLabel;
75        public ImageView channelIconIv;
76
77        public ViewHolder(View itemView) {
78            super(itemView);
79            // 在创建的时候利用传递过来的View去findViewById
80            nameTv = (TextView) itemView.findViewById(R.id.channel_text);
81            channelTopicTv = (TextView) itemView.findViewById(R.id.channel_topic);
82            channelUpdateInfo = (TextView) itemView.findViewById(R.id.channel_update_info);
83            recommendLabel = itemView.findViewById(R.id.recommend_label);
84            channelIconIv = (ImageView) itemView.findViewById(R.id.channel_icon);
85        }
86    }
87} 

3.2 分隔线定制

对于分隔线这个也比较蛋疼，你会发现RecyclerView并没有支持divider这样的属性。那么怎么办，你可以在创建item布局的时候直接写在布局中，当然了这种方式不够优雅，我们早就说了可以自由的去定制它。
　　既然比较麻烦那么我们可以去github上面下载一个：DividerItemDecoration来参考一下。我这里就直接来写一个效果，大家也可以找找别人的博客看看。
　　分割线我们利用RecyclerView的addItemDecoration(ItemDecoration fromHtml) 新建一个类来看看到底是什么：

1/**
2 * Created by Darren on 2016/12/27.
3 * Email: 240336124@qq.com
4 * Description: RecyclerView 分割线定制
5 */
6public class CategoryItemDecoration extends RecyclerView.ItemDecoration {
7    @Override
8    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
9
10    }
11
12    @Override
13    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
14        
15    }
16} 

有两个方法getItemOffsets()这里我一般指定偏移量就可以了，就是分割线占多少高度，或者说是画在什么位置，你总的给我留出位置来；onDraw()我们可以直接去绘制，绘制什么都可以因为有Canvas ，但一般都是绘制Drawable，这里不多说具体看视频吧。

1/**
2 * Created by Darren on 2016/12/27.
3 * Email: 240336124@qq.com
4 * Description: RecyclerView 分割线定制
5 */
6public class CategoryItemDecoration extends RecyclerView.ItemDecoration {
7    private Paint mPaint;
8
9    public CategoryItemDecoration(int color) {
10        // 直接绘制颜色  只是用来测试
11        mPaint = new Paint();
12        mPaint.setColor(color);
13        mPaint.setAntiAlias(true);
14    }
15
16    @Override
17    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
18        int childCount = parent.getChildCount();
19        // 获取需要绘制的区域
20        Rect rect = new Rect();
21        rect.left = parent.getPaddingLeft();
22        rect.right = parent.getWidth() - parent.getPaddingRight();
23        for (int i = 0; i < childCount; i++) {
24            View childView = parent.getChildAt(i);
25            rect.top = childView.getBottom();
26            rect.bottom = rect.top + 20;
27            // 直接利用Canvas去绘制一个矩形 在留出来的地方
28            c.drawRect(rect, mPaint);
29        }
30    }
31
32    @Override
33    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
34        // 在每个子View的下面留出20px来画分割线
35        outRect.bottom += 20;
36    }
37} 

看一下效果

这里写图片描述

这只是用来测试一下，并不是我们所需要的效果，只是说一下这两个方法都可以干什么就是你想怎么弄分割线就怎么弄。我们一般会使用Drawable去画，所以我们必须调整成我们最终的效果，代码其实基本一致。

1/**
2 * Created by Darren on 2016/12/27.
3 * Email: 240336124@qq.com
4 * Description: RecyclerView 分割线定制
5 */
6public class CategoryItemDecoration extends RecyclerView.ItemDecoration {
7    private Drawable mDivider;
8
9    public CategoryItemDecoration(Drawable divider) {
10        // 利用Drawable绘制分割线
11        mDivider = divider;
12    }
13
14    @Override
15    public void onDraw(Canvas canvas, RecyclerView parent, RecyclerView.State state) {
16        int childCount = parent.getChildCount();
17        // 计算需要绘制的区域
18        Rect rect = new Rect();
19        rect.left = parent.getPaddingLeft();
20        rect.right = parent.getWidth() - parent.getPaddingRight();
21        for (int i = 0; i < childCount; i++) {
22            View childView = parent.getChildAt(i);
23            rect.top = childView.getBottom();
24            rect.bottom = rect.top + mDivider.getIntrinsicHeight();
25            // 直接利用Canvas去绘制
26            mDivider.draw(canvas);
27        }
28    }
29
30    @Override
31    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
32        // 在每个子View的下面留出来画分割线
33        outRect.bottom += mDivider.getIntrinsicHeight();
34    }
35} 

接下来我们就可以在drawable，下面新建一个xxx.xml的分割线文件了

1<?xml version="1.0" encoding="utf-8"?>
2<shape xmlns:android="http://schemas.android.com/apk/res/android">
3    <size android:height="0.5dp"   />
4    <solid android:color="@color/list_item_divider" />
5</shape> 

这里写图片描述

基本没什么效果因为分割线比较小0.5dp,仔细看还是看得出来的，最后声明一下因为整个项目涉及到一键更换皮肤，那么恭喜恭喜这样做并没什么卵用，我们还是得直接写在item布局中，而不是用代码设置分割线。

3.3 RecyclerView分割线源码解析
　　
　　估计很大一部分的哥们在开发的时候都是使用的第三方的分割线，基本上都类似，一般都是利用系统自带的一个属性 android.R.attrs.listDriver我们直接获取这个属性的Drawable去绘制，那么这里我们分析一下源码去了解一些RecyclerView到底是怎样添加分割线的。
　　一万一千多行代码我们就只挑关键的方法：measureChild()，onDraw() , soeasy()

1 // 只挑关键代码 一万一千多行太多了
2    /**
3    * Measure a child view using standard measurement policy, taking the padding
4    * of the parent RecyclerView and any added item decorations into account.
5    *
6    * <p>If the RecyclerView can be scrolled in either dimension the caller may
7    * pass 0 as the widthUsed or heightUsed parameters as they will be irrelevant.</p>
8    *
9    * @param child Child view to measure
10    * @param widthUsed Width in pixels currently consumed by other views, if relevant
11    * @param heightUsed Height in pixels currently consumed by other views, if relevant
12    */
13    public void measureChild(View child, int widthUsed, int heightUsed) {
14        final LayoutParams lp = (LayoutParams) child.getLayoutParams();
15        // 关键看这个方法 --> getItemDecorInsetsForChild
16        final Rect insets = mRecyclerView.getItemDecorInsetsForChild(child);
17        widthUsed += insets.left + insets.right;
18        heightUsed += insets.top + insets.bottom;
19        // 考虑分割线返回的Rect
20        final int widthSpec = getChildMeasureSpec(getWidth(), getWidthMode(),
21            getPaddingLeft() + getPaddingRight() + widthUsed, lp.width,
22            canScrollHorizontally());
23        final int heightSpec = getChildMeasureSpec(getHeight(), getHeightMode(),
24            getPaddingTop() + getPaddingBottom() + heightUsed, lp.height,
25            canScrollVertically());
26        if (shouldMeasureChild(child, widthSpec, heightSpec, lp)) {
27            child.measure(widthSpec, heightSpec);
28        }
29    }
30
31    /**
32    *  获取分割线装饰的Rect
33    **/
34    Rect getItemDecorInsetsForChild(View child) {
35        final LayoutParams lp = (LayoutParams) child.getLayoutParams();
36        if (!lp.mInsetsDirty) {
37            return lp.mDecorInsets;
38        }
39
40        if (mState.isPreLayout() && (lp.isItemChanged() || lp.isViewInvalid())) {
41            // changed/invalid items should not be updated until they are rebound.
42            return lp.mDecorInsets;
43        }
44        final Rect insets = lp.mDecorInsets;
45        insets.set(0, 0, 0, 0);
46        final int decorCount = mItemDecorations.size();
47        for (int i = 0; i < decorCount; i++) {
48            mTempRect.set(0, 0, 0, 0);
49            // getItemOffsets()还是比较熟悉，获取分割线返回的占用位置
50            mItemDecorations.get(i).getItemOffsets(mTempRect, child, this, mState);
51            // 开始累加占用位置
52            insets.left += mTempRect.left;
53            insets.top += mTempRect.top;
54            insets.right += mTempRect.right;
55            insets.bottom += mTempRect.bottom;
56        }
57        lp.mInsetsDirty = false;
58        // 返回分割线的Rect
59        return insets;
60    }
61
62    // onDraw()方法异常简单，自己体会一下吧
63    @Override
64    public void onDraw(Canvas c) {
65        super.onDraw(c);
66
67        final int count = mItemDecorations.size();
68        for (int i = 0; i < count; i++) {
69            // 回调出去直接在getItemOffsets留出分割线位置的基础上直接绘制
70            mItemDecorations.get(i).onDraw(c, this, mState);
71        }
72    } 

3.4 长按和点击事件
　　
　　这个是第二坑，第一坑就是上面的，后面还会有第三坑，RecyclerView并没有方法可以setOnItemClickListener()。我们只能在Adapter里面去写接口了，但是想想我们会有很多Adapter的每个都单独的去写会不会很麻烦。这个不用担心后面我们会写万能的Adapter，后面也会去自定义RecyclerView，目前只能这么弄了，修改修改Adapter：

1/**
2 * Created by Darren on 2016/12/27.
3 * Email: 240336124@qq.com
4 * Description: 热吧订阅列表的Adapter
5 */
6public class CategoryListAdapter extends RecyclerView.Adapter<CategoryListAdapter.ViewHolder> {
7
8    // 省略之前的代码 ......
9
10    /**
11     * 绑定ViewHolder设置数据
12     *
13     * @param holder
14     * @param position 当前位置
15     */
16    @Override
17    public void onBindViewHolder(ViewHolder holder, final int position) {
18        // 省略之前的代码 ......
19
20        // 设置点击和长按事件
21        if (mItemClickListener != null) {
22            holder.itemView.setOnClickListener(new View.OnClickListener() {
23                @Override
24                public void onClick(View v) {
25                    mItemClickListener.onItemClick(position);
26                }
27            });
28        }
29        if (mLongClickListener != null) {
30            holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
31                @Override
32                public boolean onLongClick(View v) {
33                    return mLongClickListener.onLongClick(position);
34                }
35            });
36        }
37    }
38    
39    // 省略之前的代码 ......
40
41
42    /***************
43     * 给条目设置点击和长按事件
44     *********************/
45    public OnItemClickListener mItemClickListener;
46    public OnLongClickListener mLongClickListener;
47
48    public void setOnItemClickListener(OnItemClickListener itemClickListener) {
49        this.mItemClickListener = itemClickListener;
50    }
51
52    public void setOnLongClickListener(OnLongClickListener longClickListener) {
53        this.mLongClickListener = longClickListener;
54    }
55
56    public interface OnItemClickListener {
57        public void onItemClick(int position);
58    }
59
60    public interface OnLongClickListener {
61        public boolean onLongClick(int position);
62    }
63} 

估计有些不想接触新事物的哥们会觉得，哪里好用。他们都说好我觉得也好用着用着就好了因为公司的人都在用我不用也没办法。下一期我们还是解析RecyclerView可能会要更好用一些.

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