RecyclerView学习(四)----ItemDecoration实现的城市导航列表(下)-白红宇

之前用RecyclerView实现了写过一篇城市导航列表:

关于自定义的导航条，滑动监听，汉字转拼音等零碎知识，大家可以查看我之前那篇博客。

今天主要说的是悬停列表的实现，之前的实现方式是每一个RecyclerView的item的布局里面都包含一个头部布局，然后判断当前item和上一个item的头部布局里的索引字母是否相同，来决定是否展示item的头部布局。这种实现方式显得布局冗余，效率降低，而且不够优雅。今天这里我用ItemDecoration来实现城市列表的头部悬停。

ItemDecoration是用来修饰RecyclerView里的Item，ItemDecoration类主要有三个方法：

public void onDraw(Canvas c, RecyclerView parent, State state)public void onDrawOver(Canvas c, RecyclerView parent, State state)public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state)

这三个方法作用依次是：

onDraw()：可以实现类似绘制背景的效果，item的内容在上面

onDrawOver()：可以绘制在内容的上面，覆盖item的内容

getItemOffsets()：可以实现类似padding的效果

onDraw()的绘制会先于子ItemView的绘制，如果你在onDraw()方法中绘制的东西在子ItemView边界内，就会被ItemView盖住，所以我们一般先调用getItemOffsets()创造空间。而onDrawOver()会在子ItemView绘制之后再绘制，绘制的内容会覆盖在子ItemView上。

执行顺序是先执行ItemDecoration的onDraw()、再执行子ItemView的onDraw()、再执行ItemDecoration的onDrawOver()。

下面我们通过改造这个例子来分析这三个方法：

1.getItemOffsets()

我移除了之前项目里用到的悬停，侧边导航栏与滑动监听还保留，看下现在的效果：

这里写图片描述

ok，现在我们来自定义一个ItemDecoration：

public class StickyDecoration extends RecyclerView.ItemDecoration {
         private int topHeight;    public StickyDecoration(Context context) {        Resources res = context.getResources();        topHeight = res.getDimensionPixelSize(R.dimen.top);    }    @Override    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {        super.getItemOffsets(outRect, view, parent, state);        int position = parent.getChildAdapterPosition(view);        if (isFirstInGroup(position)) {            outRect.top = topHeight;        } else {            outRect.top = 0;        }    }    private boolean isFirstInGroup(int position) {        boolean isFirst;        if (position == 0) {            isFirst = true;        } else {            if (CityActivity.cityList.get(position).getFirstPinYin().                    equals(CityActivity.cityList.get(position - 1).getFirstPinYin())) {                isFirst = false;            } else {                isFirst = true;            }        }        return isFirst;    }}

继承自RecyclerView.ItemDecoration，然后重写构造方法，并且重写getItemOffsets()方法。进行判断，该item如果是第一次出现该字母，就给这个item的上方绘制一个40dp的高度，否则就不处理。Activity中使用：

recyclerView.addItemDecoration(new StickyDecoration(getApplicationContext()));

最后我们看一下效果：

这里写图片描述

可以看到，在每一个字母首次出现的item上，都多了一个40dp的空间，这里用来放我们的索引字母。

2.onDraw()

onDraw()可以实现类似绘制背景的效果，item的内容在上面，我们通过getItemOffsets()创造了空间，然后用onDraw()方法绘制字母索引：

private TextPaint textPaint;    private Paint paint;    private int topHeight;    public StickyDecoration(Context context) {        Resources res = context.getResources();        paint = new Paint();        paint.setColor(res.getColor(R.color.colorAccent));        textPaint = new TextPaint();        textPaint.setAntiAlias(true);        textPaint.setTextSize(60);        textPaint.setColor(Color.WHITE);        topHeight = res.getDimensionPixelSize(R.dimen.top);    }    @Override    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {        super.getItemOffsets(outRect, view, parent, state);        int position = parent.getChildAdapterPosition(view);        if (isFirstInGroup(position)) {            outRect.top = topHeight;        } else {            outRect.top = 0;        }    }    @Override    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {        super.onDraw(c, parent, state);        int left = parent.getPaddingLeft();        int right = parent.getWidth() - parent.getPaddingRight();        int childCount = parent.getChildCount();        for (int i = 0; i < childCount; i++) {            View view = parent.getChildAt(i);            int position = parent.getChildAdapterPosition(view);            String textLine = CityActivity.cityList.get(position).getFirstPinYin();            if (position == 0 || isFirstInGroup(position)) {                float top = view.getTop() - topHeight;                float bottom = view.getTop();                c.drawRect(left, top, right, bottom, paint);//绘制红色矩形                c.drawText(textLine, left + 30, bottom - 30, textPaint);//绘制文本            }        }    }

这里的onDraw()方法与自定义View的onDraw()一样,只不过这里绘制的对象是RecyclerView子item的view。我们看下最后实现的效果：

这里写图片描述

OK，在首次出现该字母的item上都出现了字母索引，接下来就是悬停的实现了。

3.onDrawOver()

onDrawOver()方法会绘制在内容的上面，覆盖item的内容，所以我们拿来做悬停很合适。

@Override    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {        super.onDrawOver(c, parent, state);        int position = ((LinearLayoutManager) (parent.getLayoutManager())).findFirstVisibleItemPosition();        int left = parent.getPaddingLeft();        int right = parent.getWidth() - parent.getPaddingRight();        c.drawRect(left, 0, right, topHeight, paint);//绘制红色矩形        String text = CityActivity.cityList.get(position).getFirstPinYin();        c.drawText(text, 30, topHeight - 30, textPaint);//绘制文本    }

实现的代码其实很简单，拿到RecyclerView可见区域第一个item的position，得到大写字母。依次绘制红色背景与文字即可。最后实现的效果如下：

这里写图片描述

OK，和之前实现的效果还是没什么区别的。

项目完整源码已经上传到我的github上，源码地址：

欢迎Star，fork，提issues，一起进步！