上部残卷效果如下:两个ItemDecoration,一个实现悬停头部分组列表功能,一个实现分割线(官方demo)
网上关于实现带悬停分组头部的列表的方法有很多,像我看过有主席的自定义ExpandListView实现的,也看过有人用一个额外的父布局里面套 RecyclerView/ListView+一个头部View(位置固定在父布局上方)实现的。
对于以上解决方案,有以下几点个人觉得不好的地方:
1. 现在RecyclerView是主流
2. 在RecyclerView外套一个父布局总归是增加布局层级,容易overdraw,显得不够优雅。
3. item布局实现带这种分类头部的方法有两种,一种是把分类头部当做一种itemViewtype(麻烦),另一种是每个Item布局都包含了分类头部的布局,代码里根据postion等信息动态Visible,Gone头部(布局冗余,item效率降低)。
况且Google为我们提供了ItemDecoration,它本身就是用来修饰RecyclerView里的Item的,它的getItemOffsets() onDraw()方法用于为Item分类头部留出空间和绘制(解决缺点3),它的onDrawOver()方法用于绘制悬停的头部View(解决缺点2)。
而且更重要的是,ItemDecoration出来这么久了,你还不用它?
本文就利用ItemDecoration 打造 分组列表,并配有悬停头部功能。
亮点预览:添加多个ItemDecoration、它们的执行顺序、ItemDecoration方法执行顺序、ItemDecoration和RecyclerView的绘制顺序
二 使用ItemDecoration
用法:为RecyclerViewPool添加一个或多个ItemDecoration
//如果add多个,那么按照先后顺序,依次渲染。 mRv.addItemDecoration(mDecoration = new TitleItemDecoration(this, mDatas)); mRv.addItemDecoration(new TitleItemDecoration2(this,mDatas)); mRv.addItemDecoration(new DividerItemDecoration(MainActivity.this,DividerItemDecoration.VERTICAL_LIST));为RecyclerView添加ItemDecoration只要这么一句addItemDecoration(),
public void addItemDecoration(ItemDecoration decor) { addItemDecoration(decor, -1); } public void addItemDecoration(ItemDecoration decor, int index) { if (mLayout != null) {mLayout.assertNotInLayoutOrScroll("Cannot add item decoration during a scroll or" + " layout"); } if (mItemDecorations.isEmpty()) {setWillNotDraw(false); } if (index < 0) {mItemDecorations.add(decor); } else {mItemDecorations.add(index, decor); } markItemDecorInsetsDirty(); requestLayout(); }老套路:我们最常用的单参数方法 内部调用了双参数方法,并把index 传入-1。
/** * Created by zhangxutong . * Date: 16/08/28 */public class CityBean { private String tag;//所属的分类(城市的汉语拼音首字母) private String city; public CityBean(String tag, String city) { this.tag = tag; this.city = city; } public String getTag() { return tag; } public void setTag(String tag) { this.tag = tag; } public String getCity() { return city; } public void setCity(String city) { this.city = city; }}getItemOffsets方法 如下:
@Override public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { super.getItemOffsets(outRect, view, parent, state); int position = ((RecyclerView.LayoutParams) view.getLayoutParams()).getViewLayoutPosition(); //我记得Rv的item position在重置时可能为-1.保险点判断一下吧 if (position > -1) {if (position == 0) {//等于0肯定要有title的outRect.set(0, mTitleHeight, 0, 0);} else {//其他的通过判断if (null != mDatas.get(position).getTag() && !mDatas.get(position).getTag().equals(mDatas.get(position - 1).getTag())) { outRect.set(0, mTitleHeight, 0, 0);//不为空 且跟前一个tag不一样了,说明是新的分类,也要title} else { outRect.set(0, 0, 0, 0);}} } }--------------------------------------------------------------------------------
@Override public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) { super.onDraw(c, parent, state); 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);final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child .getLayoutParams();int position = params.getViewLayoutPosition();//我记得Rv的item position在重置时可能为-1.保险点判断一下吧if (position > -1) {if (position == 0) {//等于0肯定要有title的 drawTitleArea(c, left, right, child, params, position);} else {//其他的通过判断 if (null != mDatas.get(position).getTag() && !mDatas.get(position).getTag().equals(mDatas.get(position - 1).getTag())) { //不为空 且跟前一个tag不一样了,说明是新的分类,也要title drawTitleArea(c, left, right, child, params, position); } else { //none }}} } } /** * 绘制Title区域背景和文字的方法 * * @param c * @param left * @param right * @param child * @param params * @param position */ private void drawTitleArea(Canvas c, int left, int right, View child, RecyclerView.LayoutParams params, int position) {//最先调用,绘制在最下层 mPaint.setColor(COLOR_TITLE_BG); c.drawRect(left, child.getTop() - params.topMargin - mTitleHeight, right, child.getTop() - params.topMargin, mPaint); mPaint.setColor(COLOR_TITLE_FONT); mPaint.getTextBounds(mDatas.get(position).getTag(), 0, mDatas.get(position).getTag().length(), mBounds); c.drawText(mDatas.get(position).getTag(), child.getPaddingLeft(), child.getTop() - params.topMargin - (mTitleHeight / 2 - mBounds.height() / 2), mPaint); }写完 12 方法,就已经完成了分类列表title的绘制,方法3实现顶部悬停title效果:GO
@Override public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {//最后调用 绘制在最上层 int pos = ((LinearLayoutManager)(parent.getLayoutManager())).findFirstVisibleItemPosition(); String tag = mDatas.get(pos).getTag(); View child = parent.getChildAt(pos); mPaint.setColor(COLOR_TITLE_BG); c.drawRect(parent.getPaddingLeft(), parent.getPaddingTop(), parent.getRight() - parent.getPaddingRight(), parent.getPaddingTop() + mTitleHeight, mPaint); mPaint.setColor(COLOR_TITLE_FONT); mPaint.getTextBounds(tag, 0, tag.length(), mBounds); c.drawText(tag, child.getPaddingLeft(),parent.getPaddingTop() + mTitleHeight - (mTitleHeight / 2 - mBounds.height() / 2),mPaint); }至此,我们的 带悬停头部的分组列表的ItemDecoration就编写完毕了,完整代码如下:
/** * 有分类title的 ItemDecoration * Created by zhangxutong . * Date: 16/08/28 */public class TitleItemDecoration extends RecyclerView.ItemDecoration { private List<CityBean> mDatas; private Paint mPaint; private Rect mBounds;//用于存放测量文字Rect private int mTitleHeight;//title的高 private static int COLOR_TITLE_BG = Color.parseColor("#FFDFDFDF"); private static int COLOR_TITLE_FONT = Color.parseColor("#FF000000"); private static int mTitleFontSize;//title字体大小 public TitleItemDecoration(Context context, List<CityBean> datas) { super(); mDatas = datas; mPaint = new Paint(); mBounds = new Rect(); mTitleHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 30, context.getResources().getDisplayMetrics()); mTitleFontSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, context.getResources().getDisplayMetrics()); mPaint.setTextSize(mTitleFontSize); mPaint.setAntiAlias(true); } @Override public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) { super.onDraw(c, parent, state); 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);final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child .getLayoutParams();int position = params.getViewLayoutPosition();//我记得Rv的item position在重置时可能为-1.保险点判断一下吧if (position > -1) {if (position == 0) {//等于0肯定要有title的 drawTitleArea(c, left, right, child, params, position);} else {//其他的通过判断 if (null != mDatas.get(position).getTag() && !mDatas.get(position).getTag().equals(mDatas.get(position - 1).getTag())) { //不为空 且跟前一个tag不一样了,说明是新的分类,也要title drawTitleArea(c, left, right, child, params, position); } else { //none }}} } } /** * 绘制Title区域背景和文字的方法 * * @param c * @param left * @param right * @param child * @param params * @param position */ private void drawTitleArea(Canvas c, int left, int right, View child, RecyclerView.LayoutParams params, int position) {//最先调用,绘制在最下层 mPaint.setColor(COLOR_TITLE_BG); c.drawRect(left, child.getTop() - params.topMargin - mTitleHeight, right, child.getTop() - params.topMargin, mPaint); mPaint.setColor(COLOR_TITLE_FONT);/* Paint.FontMetricsInt fontMetrics = mPaint.getFontMetricsInt(); int baseline = (getMeasuredHeight() - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;*/ mPaint.getTextBounds(mDatas.get(position).getTag(), 0, mDatas.get(position).getTag().length(), mBounds); c.drawText(mDatas.get(position).getTag(), child.getPaddingLeft(), child.getTop() - params.topMargin - (mTitleHeight / 2 - mBounds.height() / 2), mPaint); } @Override public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {//最后调用 绘制在最上层 int pos = ((LinearLayoutManager)(parent.getLayoutManager())).findFirstVisibleItemPosition(); String tag = mDatas.get(pos).getTag(); View child = parent.getChildAt(pos); mPaint.setColor(COLOR_TITLE_BG); c.drawRect(parent.getPaddingLeft(), parent.getPaddingTop(), parent.getRight() - parent.getPaddingRight(), parent.getPaddingTop() + mTitleHeight, mPaint); mPaint.setColor(COLOR_TITLE_FONT); mPaint.getTextBounds(tag, 0, tag.length(), mBounds); c.drawText(tag, child.getPaddingLeft(),parent.getPaddingTop() + mTitleHeight - (mTitleHeight / 2 - mBounds.height() / 2),mPaint); } @Override public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { super.getItemOffsets(outRect, view, parent, state); int position = ((RecyclerView.LayoutParams) view.getLayoutParams()).getViewLayoutPosition(); //我记得Rv的item position在重置时可能为-1.保险点判断一下吧 if (position > -1) {if (position == 0) {//等于0肯定要有title的outRect.set(0, mTitleHeight, 0, 0);} else {//其他的通过判断if (null != mDatas.get(position).getTag() && !mDatas.get(position).getTag().equals(mDatas.get(position - 1).getTag())) { outRect.set(0, mTitleHeight, 0, 0);//不为空 且跟前一个tag不一样了,说明是新的分类,也要title} else { outRect.set(0, 0, 0, 0);}} } }}/** * 有分类title的 ItemDecoration * Created by zhangxutong . * Date: 16/08/28 */public class TitleItemDecoration extends RecyclerView.ItemDecoration { private List<CityBean> mDatas; private Paint mPaint; private Rect mBounds;//用于存放测量文字Rect private int mTitleHeight;//title的高 private static int COLOR_TITLE_BG = Color.parseColor("#FFDFDFDF"); private static int COLOR_TITLE_FONT = Color.parseColor("#FF000000"); private static int mTitleFontSize;//title字体大小 public TitleItemDecoration(Context context, List<CityBean> datas) { super(); mDatas = datas; mPaint = new Paint(); mBounds = new Rect(); mTitleHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 30, context.getResources().getDisplayMetrics()); mTitleFontSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, context.getResources().getDisplayMetrics()); mPaint.setTextSize(mTitleFontSize); mPaint.setAntiAlias(true); } @Override public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) { super.onDraw(c, parent, state); 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);final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child .getLayoutParams();int position = params.getViewLayoutPosition();//我记得Rv的item position在重置时可能为-1.保险点判断一下吧if (position > -1) {if (position == 0) {//等于0肯定要有title的 drawTitleArea(c, left, right, child, params, position);} else {//其他的通过判断 if (null != mDatas.get(position).getTag() && !mDatas.get(position).getTag().equals(mDatas.get(position - 1).getTag())) { //不为空 且跟前一个tag不一样了,说明是新的分类,也要title drawTitleArea(c, left, right, child, params, position); } else { //none }}} } } /** * 绘制Title区域背景和文字的方法 * * @param c * @param left * @param right * @param child * @param params * @param position */ private void drawTitleArea(Canvas c, int left, int right, View child, RecyclerView.LayoutParams params, int position) {//最先调用,绘制在最下层 mPaint.setColor(COLOR_TITLE_BG); c.drawRect(left, child.getTop() - params.topMargin - mTitleHeight, right, child.getTop() - params.topMargin, mPaint); mPaint.setColor(COLOR_TITLE_FONT);/* Paint.FontMetricsInt fontMetrics = mPaint.getFontMetricsInt(); int baseline = (getMeasuredHeight() - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;*/ mPaint.getTextBounds(mDatas.get(position).getTag(), 0, mDatas.get(position).getTag().length(), mBounds); c.drawText(mDatas.get(position).getTag(), child.getPaddingLeft(), child.getTop() - params.topMargin - (mTitleHeight / 2 - mBounds.height() / 2), mPaint); } @Override public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {//最后调用 绘制在最上层 int pos = ((LinearLayoutManager)(parent.getLayoutManager())).findFirstVisibleItemPosition(); String tag = mDatas.get(pos).getTag(); View child = parent.getChildAt(pos); mPaint.setColor(COLOR_TITLE_BG); c.drawRect(parent.getPaddingLeft(), parent.getPaddingTop(), parent.getRight() - parent.getPaddingRight(), parent.getPaddingTop() + mTitleHeight, mPaint); mPaint.setColor(COLOR_TITLE_FONT); mPaint.getTextBounds(tag, 0, tag.length(), mBounds); c.drawText(tag, child.getPaddingLeft(),parent.getPaddingTop() + mTitleHeight - (mTitleHeight / 2 - mBounds.height() / 2),mPaint); } @Override public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { super.getItemOffsets(outRect, view, parent, state); int position = ((RecyclerView.LayoutParams) view.getLayoutParams()).getViewLayoutPosition(); //我记得Rv的item position在重置时可能为-1.保险点判断一下吧 if (position > -1) {if (position == 0) {//等于0肯定要有title的outRect.set(0, mTitleHeight, 0, 0);} else {//其他的通过判断if (null != mDatas.get(position).getTag() && !mDatas.get(position).getTag().equals(mDatas.get(position - 1).getTag())) { outRect.set(0, mTitleHeight, 0, 0);//不为空 且跟前一个tag不一样了,说明是新的分类,也要title} else { outRect.set(0, 0, 0, 0);}} } }}五 一些ItemDecoration的相关补充姿势
@Override public void draw(Canvas c) { super.draw(c); final int count = mItemDecorations.size(); for (int i = 0; i < count; i++) {mItemDecorations.get(i).onDrawOver(c, this, mState); } @Override public void onDraw(Canvas c) { super.onDraw(c); final int count = mItemDecorations.size(); for (int i = 0; i < count; i++) {mItemDecorations.get(i).onDraw(c, this, mState); } }2. ItemDecoration和RecyclerView的Item的绘制顺序。
/** * This method is called by ViewGroup.drawChild() to have each child view draw itself. * * This is where the View specializes rendering behavior based on layer type, * and hardware acceleration. */ boolean draw(Canvas canvas, ViewGroup parent, long drawingTime) { ............省略 // Step 3, draw the content if (!dirtyOpaque) onDraw(canvas); // Step 4, draw the children dispatchDraw(canvas);六 完整代码地址