RecyclerView之ItemDecoration的学习

最近在项目项目中要做个类似于美团城市列表选择的页面,也就是我们常说的带索引并且粘性头部的列表。

如下图是最终效果
2017-09-25 14_27_54.gif

大家能直观的看出:每个字母开头相同的城市分为了一组,并且滚动的时候那个头部都是是固定在其顶部,以此替换。

在这之前的一个项目,做过手机联系人的目录和这个需求很类似,本想把之前的东西直接套过来。但发现当时的做法有点不够优雅而且item 的效率很低,实现方式:

每个item 都设有灰色头部的索引,只不过是 当只在每组的第一个位置可见其他时候隐藏。这样就把整个列表进行了分类处理,至于那个粘性头部,是在父布局外加了一个头部View固定在顶部并做滚动的处理。

后来在网上查看到一种很不错的做法,通过给recyclerview添加ItemDecoration装饰的效果。网上关于这个知识的文章很多,也有很多现成的代码。但是作为一个合格的程序猿一定不是复制粘贴,要明白其所以然,并运用到自己实际需求当中。那我们就通过代码一起学习ItemDecoration的使用吧。

通过继承ItemDecoration实现三个很重要的方法

/**
 * 对itemview矩形区域进行的装饰, Rect的上下左右,类似padding的效果
 * @param outRect
 * @param view
 * @param parent
 * @param state
 */
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    super.getItemOffsets(outRect, view, parent, state);

}

/**
 * 就像自定义View中onDraw绘制作用 只不过是在ItemView的指定位置绘制指定的内容
 *  当然要和onDrawOver有个细微的区分,它绘制的范围在itemview的下面
 *  比如:所绘制的区域和itemView有重叠的则会被遮挡。而在onDrawOver中绘制的范围则相反
 * @param c
 * @param parent
 * @param state
 */
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
    super.onDraw(c, parent, state);
}

/**
 * @param c
 * @param parent
 * @param state
 */
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
    super.onDrawOver(c, parent, state);

}

那我们就通过具体的实现看看到底有效果

recyclerview.addItemDecoration(new CustomItemDecoration(this));

然后在自定义的Decoration中简单的添加的做一下处理,注意:

    outRect.bottom = dividerHeight;
    outRect.right = dividerHeight;
    outRect.left = dividerHeight;

给每个item的是三个方向添加个类似10dp高的padding

public class CustomItemDecoration extends RecyclerView.ItemDecoration {

private final int dividerHeight;
private final int dividerColor;
private final Paint dividerPaint;
private final Paint dividerPaintL;
private final Paint dividerPaintR;

public CustomItemDecoration(Context context) {
    dividerPaint =new Paint();
    dividerPaintL = new Paint();
    dividerPaintR = new Paint();
    dividerHeight =context.getResources().getDimensionPixelOffset(R.dimen.divider_height);
    dividerColor = context.getResources().getColor(R.color.colorPrimary);
    dividerPaint.setColor(dividerColor);
    dividerPaintL.setColor(context.getResources().getColor(R.color.colorAccent));
    dividerPaintR.setColor(context.getResources().getColor(R.color.colorAccent));

}
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
    super.onDrawOver(c, parent, state);
}

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    super.getItemOffsets(outRect, view, parent, state);
    outRect.bottom = dividerHeight;
    outRect.right = dividerHeight;
    outRect.left = dividerHeight;
}

@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
    super.onDraw(c, parent, state);
    int childCount = parent.getChildCount();
    int left = parent.getPaddingLeft()+dividerHeight;
    int right = parent.getWidth() - parent.getPaddingRight()+parent.getPaddingLeft()-dividerHeight;

    int lLeft=parent.getPaddingLeft() ;
    int lRight = lLeft + dividerHeight;


    for (int i = 0; i < childCount; i++) {
        View view = parent.getChildAt(i);
        float top = view.getBottom();
        float bottom = view.getBottom() + dividerHeight;
        float lTop = view.getTop();
        float lBottom = view.getBottom();


        int left1 = view.getRight();
        int right1 = left1 + dividerHeight;
        int top1 = view.getTop();
        int bottom1 = view.getBottom();
        //底部
        c.drawRect(left, top, right, bottom, dividerPaint);
        //左侧
        c.drawRect(lLeft, lTop, lRight, lBottom, dividerPaintL);
        //右侧
        c.drawRect(left1, top1, right1, bottom1, dividerPaintR);

    }
}

}

那我们来看效果

AirMore_Screen_20170925_173922.png

可以看到在每个itemView的左右和下方多出了间隙,并且在onDraw()方法中绘制了不同的颜色,我们能很直观的了解每个方法的作用和它工作的原理。
然后我们运用到需求当中。

  • 只有在同一组中才添加ItemDecoration
  • 滚动的时候固定头部

看下面的代码实现:

public class SectionDecoration extends RecyclerView.ItemDecoration {

private final String TAG = SectionDecoration.class.getName();


private final Paint paint;
private final TextPaint textPaint;
private final Paint.FontMetrics fontMetrics;
private final int topGap;
private DecorationCallback decorationCallback;

public SectionDecoration(Context context, DecorationCallback callback) {

    this.decorationCallback = callback;
    Resources resources = context.getResources();

    paint = new Paint();
    paint.setColor(resources.getColor(R.color.colorf5));

    textPaint = new TextPaint();
    textPaint.setTypeface(Typeface.DEFAULT_BOLD);
    textPaint.setAntiAlias(false);
    textPaint.setTextSize(80);

    textPaint.setColor(Color.BLACK);
    textPaint.setTextAlign(Paint.Align.LEFT);
    fontMetrics = new Paint.FontMetrics();
    textPaint.getFontMetrics(fontMetrics);

    topGap = resources.getDimensionPixelOffset(R.dimen.section_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);
    Log.e(TAG, "getItemOffsets :" + position);

    long groupId = decorationCallback.getGroupId(position);

    if(groupId<0) return;
    if (position == 0 || isFirstInGroup(position)) {//同组的第一个才添加padding
        outRect.top = topGap;
    } 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);
        long groupId = decorationCallback.getGroupId(position);
        if(groupId<0) return;
        String textLine = decorationCallback.getGroupFirstLine(position).toUpperCase();
        if (position == 0 || isFirstInGroup(position)) {
            int top = view.getTop() - topGap;
            int bottom = view.getTop();
            c.drawRect(left,top,right,bottom,paint);//绘制矩形区
            c.drawText(textLine, left, bottom, textPaint);
        }
    }
}

@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
    super.onDrawOver(c, parent, state);
    int itemCount = state.getItemCount();
    int childCount = parent.getChildCount();

    int left = parent.getPaddingLeft();
    int right = parent.getWidth() - parent.getPaddingRight();
    float lineHeight = textPaint.getTextSize() + fontMetrics.descent;

    long preGroupId, groupId = -1;

    for (int i = 0; i < childCount; i++) {
        View view = parent.getChildAt(i);
        int position = parent.getChildAdapterPosition(view);

        preGroupId = groupId;
        groupId = decorationCallback.getGroupId(position);
        if (groupId < 0 || groupId == preGroupId) continue;

        String textLine = decorationCallback.getGroupFirstLine(position).toUpperCase();
        
        if(TextUtils.isEmpty(textLine)) continue;

        int viewBottom = view.getBottom();

        int textY = Math.max(topGap, view.getTop());

        if (position + 1 < itemCount) {
            long nextGroupId = decorationCallback.getGroupId(position + 1);
            if (nextGroupId != groupId && viewBottom < textY) {
                textY = viewBottom;
            }
        }
        c.drawRect(left, textY - topGap, right, textY, paint);
        c.drawText(textLine, left, textY, textPaint);
    }
}

private boolean isFirstInGroup(int position) {
    if (position == 0) {
        return true;
    } else {
        long prevGroupId = decorationCallback.getGroupId(position - 1);
        long groupId = decorationCallback.getGroupId(position);
        return prevGroupId != groupId;
    }
}

}

定义一个回调

public interface DecorationCallback {

  long getGroupId(int position);

  String getGroupFirstLine(int position);
}

这就完成了简单的效果

2017-09-25 18_03_54.gif

说实话刚开始使用itemDecorartion是比较麻烦的,但是当掌握上手以后,用起来真的很爽,避免了很多在代码中逻辑判断,比如有的时候在列表中只需要在某个位置才需要添加灰色的间距,如果不用itemDecoration,则通常的就是整加视图的层级,通过if else判断显示和隐藏。现在既然在RecyclerView中又itemDecorartion这个装饰,没什么不用让你的代码实现的更优雅。

这是写的第一篇博客,也希望自己能坚持这个习惯,记录自己的学习过程


风后面是风,天空上面是天空,而你的生活可以与众不同

推荐阅读更多精彩内容