[Android开发]从Android官方Demo谈RecyclerView的用法

RecyclerView是Android5.0中出现的新控件，官方API解释就一句话：

A flexible view for providing a limited window into a large data set

整体架构如下图：

RecyclerView的灵活性体现在6个方面：

• 可以控制显示方式，包括三个内置的不觉管理器，也可以定制
• LinearLayoutManager 以垂直或水平滚动列表方式显示项目
• GridLayoutManager 在网格中显示项目
• StaggeredGridLayoutManager 瀑布了流中显示项目
• 默认情况下显示增加删除的动画，也扩RecyclerView.ItemAnimator定制
• 默认情况无分割线，可以扩展ItemDecoration定制

参考资料

官方API
官方Training：创建列表与卡片
深入理解 RecyclerView 系列之一：ItemDecoration
Android RecyclerView 使用完全解析 体验艺术般的控件

官方Demo效果

官方提供了一个Demo(github地址)的运行效果是这样的:

代码比较简单，重要的内容包括RecyclerView的初始化和其对应的Adapter的构造。

引申需求

设置分割线

分割线官方并没有提供默认的类型，默认也并没有分隔线。要提供分隔线必须自己实现RecyclerView.ItemDecoration。

/** * An ItemDecoration allows the application to add a special drawing and layout offset * to specific item views from the adapter's data set. This can be useful for drawing dividers * between items, highlights, visual grouping boundaries and more. * * <p>All ItemDecorations are drawn in the order they were added, before the item * views (in {@link ItemDecoration#onDraw(Canvas, RecyclerView, RecyclerView.State) onDraw()} * and after the items (in {@link ItemDecoration#onDrawOver(Canvas, RecyclerView, * RecyclerView.State)}.</p> */public static abstract class ItemDecoration {    /**     * Draw any appropriate decorations into the Canvas supplied to the RecyclerView.     * Any content drawn by this method will be drawn before the item views are drawn,     * and will thus appear underneath the views.     *     * @param c Canvas to draw into     * @param parent RecyclerView this ItemDecoration is drawing into     * @param state The current state of RecyclerView     */    public void onDraw(Canvas c, RecyclerView parent, State state) {        onDraw(c, parent);    }    /**     * @deprecated     * Override {@link #onDraw(Canvas, RecyclerView, RecyclerView.State)}     */    @Deprecated    public void onDraw(Canvas c, RecyclerView parent) {    }    /**     * Draw any appropriate decorations into the Canvas supplied to the RecyclerView.     * Any content drawn by this method will be drawn after the item views are drawn     * and will thus appear over the views.     *     * @param c Canvas to draw into     * @param parent RecyclerView this ItemDecoration is drawing into     * @param state The current state of RecyclerView.     */    public void onDrawOver(Canvas c, RecyclerView parent, State state) {        onDrawOver(c, parent);    }    /**     * @deprecated     * Override {@link #onDrawOver(Canvas, RecyclerView, RecyclerView.State)}     */    @Deprecated    public void onDrawOver(Canvas c, RecyclerView parent) {    }    /**     * @deprecated     * Use {@link #getItemOffsets(Rect, View, RecyclerView, State)}     */    @Deprecated    public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {        outRect.set(0, 0, 0, 0);    }    /**     * Retrieve any offsets for the given item. Each field of <code>outRect</code> specifies     * the number of pixels that the item view should be inset by, similar to padding or margin.     * The default implementation sets the bounds of outRect to 0 and returns.     *     * <p>     * If this ItemDecoration does not affect the positioning of item views, it should set     * all four fields of <code>outRect</code> (left, top, right, bottom) to zero     * before returning.     *     * <p>     * If you need to access Adapter for additional data, you can call     * {@link RecyclerView#getChildAdapterPosition(View)} to get the adapter position of the     * View.     *     * @param outRect Rect to receive the output.     * @param view    The child view to decorate     * @param parent  RecyclerView this ItemDecoration is decorating     * @param state   The current state of RecyclerView.     */    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state) {        getItemOffsets(outRect, ((LayoutParams) view.getLayoutParams()).getViewLayoutPosition(),                parent);    }}

这里参考深入理解 RecyclerView 系列之一：ItemDecoration（http://www.tuicool.com/articles/fIbuYfI）来实现该接口。

import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Rect;import android.graphics.drawable.Drawable;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.view.View;/** * 参考：https://android.googlesource.com/platform/development/+/master/samples/Support7Demos/src * /com/example/android/supportv7/widget/decorator/DividerItemDecoration.java#101 */public class DividerItemDecoration extends RecyclerView.ItemDecoration {    private static final int[] ATTRS = new int[]{            android.R.attr.listDivider    };    public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;    public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;    private Drawable mDivider;    private int mOrientation;    public DividerItemDecoration(Context context, int orientation) {        final TypedArray a = context.obtainStyledAttributes(ATTRS);        mDivider = a.getDrawable(0);        a.recycle();        setOrientation(orientation);    }    public void setOrientation(int orientation) {        if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {            throw new IllegalArgumentException("invalid orientation");        }        mOrientation = orientation;    }    @Override    public void onDraw(Canvas c, RecyclerView parent) {        if (mOrientation == VERTICAL_LIST) {            drawVertical(c, parent);        } else {            drawHorizontal(c, parent);        }    }    public void drawVertical(Canvas c, RecyclerView parent) {        final int left = parent.getPaddingLeft();        final int right = parent.getWidth() - parent.getPaddingRight();        final int childCount = parent.getChildCount();        for (int i = 0; i < childCount; i++) {            final View child = parent.getChildAt(i);            android.support.v7.widget.RecyclerView v = new android.support.v7.widget.RecyclerView(parent.getContext());            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child                    .getLayoutParams();            final int top = child.getBottom() + params.bottomMargin;            final int bottom = top + mDivider.getIntrinsicHeight();            mDivider.setBounds(left, top, right, bottom);            mDivider.draw(c);        }    }    public void drawHorizontal(Canvas c, RecyclerView parent) {        final int top = parent.getPaddingTop();        final int bottom = parent.getHeight() - parent.getPaddingBottom();        final int childCount = parent.getChildCount();        for (int i = 0; i < childCount; i++) {            final View child = parent.getChildAt(i);            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child                    .getLayoutParams();            final int left = child.getRight() + params.rightMargin;            final int right = left + mDivider.getIntrinsicHeight();            mDivider.setBounds(left, top, right, bottom);            mDivider.draw(c);        }    }    /**     * outRect是用来设置left、top、right、bottom的padding值的     * */    @Override    public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {        if (mOrientation == VERTICAL_LIST) {            outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());        } else {            outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);        }    }}

点击事件

RecyclerView本身不提供单击和长按事件，需要自己实现。分为几个步骤。
第一步，需要在CustomAdapter中自己定义回调接口。

    /**     * 点击事件接口     * */    public interface OnItemClickListener{        void onItemClick(View view,int position);        void onItemLongClick(View view,int position);    }    private OnItemClickListener onItemClickListener;    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {        this.onItemClickListener = onItemClickListener;    }

第二步，在CustomAdapter中的onBindViewHolder(ViewHolder viewHolder, final int position)中调用接口函数。

    @Override    public void onBindViewHolder(ViewHolder viewHolder, final int position) {        Log.d(TAG, "Element " + position + " set.");        // Get element from your dataset at this position and replace the contents of the view        // with that element        viewHolder.getTextView().setText(mDataSet[position]);        viewHolder.setColor(position);        if (onItemClickListener!=null){            //可以获得每个item的包装类itemView            viewHolder.itemView.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    onItemClickListener.onItemClick(v,position);                }            });            viewHolder.itemView.setOnLongClickListener(new View.OnLongClickListener() {                @Override                public boolean onLongClick(View v) {                    onItemClickListener.onItemLongClick(v,position);                    return true;                }            });        }    }

第三步，在CustomAdapter初始化的地方传入该接口实例。

 mAdapter.setOnItemClickListener(new CustomAdapter.OnItemClickListener() {            @Override            public void onItemClick(View view, int position) {               ××××单击事件××××××            }            @Override            public void onItemLongClick(View view, int position) {              ××××长按事件××××××            }        });

多选模式

多选模式可以采用ActionMode来进行UI设计，本质上是通过长按进入ActionMode模式，可以点击按钮取消多选模式。
这里配合上面的点击事件，仅仅模拟了多选的操作，而没有添加ActionMode。

mAdapter.setOnItemClickListener(new CustomAdapter.OnItemClickListener() {    @Override    public void onItemClick(View view, int position) {        if (isOnLonCliked){            addOrRemove(position);            Log.i(TAG, position+"OnLonCliked");        }else {            Toast.makeText(getActivity(),position+" clicked",Toast.LENGTH_LONG).show();        }    }    @Override    public void onItemLongClick(View view, int position) {        isOnLonCliked=true;        Log.i(TAG, position+"OnLonCliked");    }});

其中，addOrRemove(int position)多选的逻辑。

** * 模拟多选情况 * */private void  addOrRemove(int position){    if(mAdapter.positionSet.contains(position)){        mAdapter.positionSet.remove(position);    }else {        mAdapter.positionSet.add(position);    }    if (mAdapter.positionSet.size()==0){        isOnLonCliked=false;    }    mAdapter.notifyDataSetChanged();}

CustomAdapter中有一个集合在记录多选模式下已经点选的位置，点击时判断该集合是否包含了该位置，如果已经包含，就取消颜色，否则改变颜色。

/** * Provide views to RecyclerView with data from mDataSet. */     ××××××省略无关代码××××××××××××××    public static Set<Integer> positionSet = new HashSet<>();    // BEGIN_INCLUDE(recyclerViewSampleViewHolder)    /**     * Provide a reference to the type of views that you are using (custom ViewHolder)     */    public static class ViewHolder extends RecyclerView.ViewHolder {        public final TextView textView;        public ViewHolder(View v) {            super(v);            // Define click listener for the ViewHolder's View.            v.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    Log.d(TAG, "Element " + getAdapterPosition() + " clicked.");                }            });            textView = (TextView) v.findViewById(R.id.textView);            Log.d(TAG, "ViewHolder ");        }        public TextView getTextView() {            return textView;        }        public void setColor(int position){            if (positionSet.contains(position)){                textView.setTextColor(Color.GREEN);            }else {                textView.setTextColor(Color.BLACK);            }        }    }××××××省略无关代码××××××××××××××

最后达成的效果是

• 长按RecyclerView中的某一项，会进入到多选模式

• 如果点击的项已经在CustomAdapter中的集合中，则去除这些项，如果集合清空，则退出多选模式

• 多选模式下再点击某些项，这些项会记录到CustomAdapter中的集合中
  

GitHub地址

本文的工程地址为：
https://github.com/caoyanfeng/GoogleSamples
如果觉得写得不错，请给我的GitHub点star哦～