使用ItemDecoration为RecyclerView打造带悬停头部的分组列表
VirOster
7年前
<h2><strong>一 概述</strong></h2> <p>本文是Android导航分组列表系列。</p> <p>完整版效果如下：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/b851e19c5bd2774f3d21eb05d17c977f.gif"></p> <p style="text-align:center">这里写图片描述</p> <p>上部残卷效果如下：</p> <p>两个ItemDecoration，一个实现悬停头部分组列表功能，一个实现分割线（官方demo）</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/a885e3cc4a708c666b7de3047e3512ab.gif"></p> <p style="text-align:center">这里写图片描述</p> <p>网上关于实现带悬停分组头部的列表的方法有很多，像我看过有主席的自定义ExpandListView实现的，也看过有人用一个额外的父布局里面套 RecyclerView/ListView+一个头部View（位置固定在父布局上方）实现的。对于以上解决方案，有以下几点个人觉得不好的地方：</p> <ol> <li>现在RecyclerView是主流</li> <li>在RecyclerView外套一个父布局总归是 <strong>增加布局层级，容易overdraw</strong> ，显得不够优雅。</li> <li>item布局实现带这种分类头部的方法有两种，一种是把分类头部当做一种itemViewtype（麻烦），另一种是每个Item布局都包含了分类头部的布局，代码里根据postion等信息动态Visible，Gone头部（布局冗余，item效率降低）。<br> 况且Google为我们提供了 <strong>ItemDecoration</strong> ，它本身就是用来修饰RecyclerView里的Item的，它的 getItemOffsets() onDraw() 方法用于为Item分类头部留出空间和绘制（解决缺点3），它的 onDrawOver() 方法用于绘制悬停的头部View（解决缺点2）。<br> 而且更重要的是， <strong>ItemDecoration出来这么久了，你还不用它</strong> ？<br> 本文就利用ItemDecoration 打造 分组列表，并配有悬停头部功能。<br> 亮点预览： 添加多个ItemDecoration、它们的执行顺序、ItemDecoration方法执行顺序、ItemDecoration和RecyclerView的绘制顺序</li> </ol> <h2><strong>二 使用ItemDecoration</strong></h2> <h3><strong>用法：为RecyclerViewPool添加一个或多个ItemDecoration</strong></h3> <pre> <code class="language-java">mRv.addItemDecoration(mDecoration = new TitleItemDecoration(this, mDatas)); mRv.addItemDecoration(new TitleItemDecoration2(this,mDatas)); mRv.addItemDecoration(new DividerItemDecoration(MainActivity.this,DividerItemDecoration.VERTICAL_LIST));</code></pre> <p>为RecyclerView添加ItemDecoration只要这么一句 addItemDecoration() ,</p> <p>它有两个同名重载方法：</p> <p>addItemDecoration(ItemDecoration decor) 常用，（按照add顺序，依次渲染ItemDecoration） addItemDecoration(ItemDecoration decor, int index) add一个ItemDecoration，并为它指定顺序</p> <p>上来就高能，别的讲解RecyclerView的文章一般都是对ItemDecoration一笔带过，用的Demo一般也都是官方的DividerItemDecoration类，更别提还添加 <strong>多个ItemDecoration</strong> 了。其实我也是昨天写Demo的时候才发现这个方法，点进去查看了一下源码:</p> <pre> <code class="language-java">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(); }</code></pre> <p>老套路：我们最常用的单参数方法 <strong>内部调用了双参数方法，并把index 传入-1</strong> 。</p> <p>我们add的ItemDecoration 都存储在RecyclerView类的 mItemDecorations 变量里，</p> <p>这个变量就是一个ArrayList，定义如下</p> <pre> <code class="language-java">private final ArrayList<ItemDecoration> mItemDecorations = new ArrayList<>();</code></pre> <h2><strong>三 ItemDecoration方法介绍和编写</strong></h2> <h3><strong>常用（全部）方法：</strong></h3> <p>按照在RecyclerView中它们被调用的顺序排列：</p> <ol> <li>public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state)</li> <li>public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state)</li> <li>public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state)<br> 这个三个方法也是继承一个ItemDecoration必须实现的三个方法。（其实ItemDecoration里除了@Deprecated 的方法 也就它们三了，）</li> </ol> <p>方法一的编写</p> <p>public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) ：</p> <p>我们需要利用 parent和state变量，来获取需要的辅助信息，例如postion， 最终调用outRect.set(int left, int top, int right, int bottom)方法，设置四个方向上 需要为ItemView设置padding的值。</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/9b76f76957cde47ac106b3530b72da8e.png"></p> <p>本文的 实体bean如下编写：</p> <pre> <code class="language-java">/** * 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; } }</code></pre> <p>getItemOffsets方法 如下：</p> <p>通过parent获取postion信息，通过postion拿到数据里的每个bean里的分类，因为数据集已经有序，如果与前一个分类不一样，说明是一个新的分类，则需要绘制头部outRect.set(0, mTitleHeight, 0, 0);，否则不需要outRect.set(0, 0, 0, 0);。</p> <pre> <code class="language-java">@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); } } } }</code></pre> <p>方法二的编写</p> <p>public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) ：</p> <p>我们需要利用 parent和state变量，来获取需要的辅助信息，例如绘制的上下左右，childCount， childView等。。最终利用c调用Canvas的方法来绘制出我们想要的UI。会自定义View就会写本方法~</p> <p>onDraw绘制出的内容是在ItemView下层，虽然它可以绘制超出getItemOffsets()里的Rect区域，但是超出区域最终不会显示，但被ItemView覆盖的区域会产生OverDraw。</p> <p>本文如下编写：通过parent获取绘制UI的 left和right以及childCount， 遍历childView，根据childView的postion，和方法一中的判断方法一样，来决定是否绘制分类Title区域：</p> <p>分类绘制title的方法就是自定义View的套路，根据确定的上下左右范围先drawRect绘制一个背景，然后drawText绘制文字。</p> <p> </p> <pre> <code class="language-java">@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); }</code></pre> <p>写完 12 方法，就已经完成了分类列表title的绘制，方法3实现顶部悬停title效果：GO</p> <p>方法三的编写</p> <p>public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) ：</p> <p>和 onDraw()方法类似， 我们需要利用 parent和state变量，来获取需要的辅助信息，例如绘制的上下左右，position， childView等。。最终利用c调用Canvas的方法来绘制出我们想要的UI。同样是会自定义View就会写本方法~</p> <p>onDrawOver绘制出的内容是在RecyclerView的最上层，会遮挡住ItemView，So天生自带悬停效果，用来绘制悬停View再好不过。</p> <p>本文如下编写：首先通过parent获取LayoutManager（由于悬停分组列表的特殊性，写死了是LinearLayoutManger），然后获取当前第一个可见itemView以及postion，以及它所属的分类title（tag），然后绘制悬停View的背景和文字（tag），可参考方法2里的书写，大同小异。</p> <pre> <code class="language-java">@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); View child = parent.findViewHolderForLayoutPosition(pos).itemView;//出现一个奇怪的bug，有时候child为空，所以将 child = parent.getChildAt(i)。-》 parent.findViewHolderForLayoutPosition(pos).itemView 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); }</code></pre> <p>至此，我们的 <strong>带悬停头部的分组列表</strong> 的ItemDecoration就编写完毕了，完整代码如下：</p> <h2><strong>四 分类title ItemDecoration完整代码：</strong></h2> <pre> <code class="language-java">/** * 有分类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); View child = parent.findViewHolderForLayoutPosition(pos).itemView;//出现一个奇怪的bug，有时候child为空，所以将 child = parent.getChildAt(i)。-》 parent.findViewHolderForLayoutPosition(pos).itemView 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); } } } } }</code></pre> <h2><strong>五 一些ItemDecoration的相关补充姿势：</strong></h2> <p>一. 多个ItemDecoration，以及它们的绘制顺序。</p> <p>就像第二节中的用法提到的，可以为一个RecyclerView添加多个ItemDecoration，那么多个ItemDecoration的绘制顺序是什么呢：我们看看源码吧：</p> <p>第二节中提到，多个ItemDecoration最终是存储在RecyclerView里的mItemDecorations（ArrayList）变量中，那我们就去RecyclerView的 源码里搜一搜，看看哪些地方用到了mItemDecorations。</p> <p>发现 在draw()和onDraw()方法里：按照在mItemDecorations里的postion顺序，依次调用了每个ItemDecoration的onDrawOver和onDraw方法。所以后添加的ItemDecoration，如果和前面的ItemDecoration的绘制区域有重合的地方，会遮盖住前面的ItemDecoration（OverDraw） 。</p> <pre> <code class="language-java">@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); } }</code></pre> <p>二. ItemDecoration和RecyclerView的Item的绘制顺序。</p> <p>在介绍ItemDecoration的三个方法时，我们提到过结论：</p> <p>ItemDecoration的onDraw最先调用，绘制在最底层，</p> <p>其上再绘制ItemView 中间层，</p> <p>再上调用ItemDecoration的onDrawOver，绘制在最上层。</p> <p>理由：</p> <p>由上面代码可见，</p> <p>RecyclerView的draw()方法中，在super.draw(c)方法调用完后，才调用mItemDecorations.get(i).onDrawOver(c, this, mState);</p> <p>而super.draw(c)方法就是直接调用View的public void draw(Canvas canvas) 方法，如下所示：</p> <p>其中又先调用了View（RecyclerView）的onDraw()方法，</p> <p>在RecyclerView的onDraw()方法中，会调用mItemDecorations.get(i).onDraw(c, this, mState);</p> <p>所以onDraw最先调用，绘制在最底层</p> <p>后调用了View（ViewGroup）的dispatchDraw(canvas)方法;</p> <p>在ViewGroup的dispatchDraw(canvas)方法里，会执行 drawChild(Canvas canvas, View child, long drawingTime)方法，绘制每个itemView。</p> <p>所以ItemView绘制在中间层</p> <p>最后super.draw(c)走完，调用mItemDecorations.get(i).onDrawOver(c, this, mState);</p> <p>所以 <strong>再上调用ItemDecoration的onDrawOver，绘制在最上层。</strong> （从方法名字也可以看出哈）</p> <p>View的draw()方法如下，</p> <pre> <code class="language-java">/** * 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);</code></pre> <h2>七 总结：</h2> <p>本文是我第一次用MarkDown编写博客，感觉一个字爽。</p> <p>也是第一次发到简书哈~因为在CSDN编辑时，就是用MD写的，所以复制过来改改就好啦~</p> <p>RecyclerView相关的各个类，个个是宝，每一次探索都觉得如获至宝，</p> <p>感觉利用ItemDecoration可以干很多事，可惜ItemDecoration貌似不能接受到用户的点击事件~要不我右侧导航栏都想用ItemDecoration实现了。</p> <p>关于可以add多个ItemDecoration这一点，想了一下，觉得很精妙，这是一种很好的设计思想，多个ItemDecoration各司其职，如本文，采用官方ItemDecoration作分割线，自己又写一个ItemDecoration作分类title和分类title相关的悬停title。用时根据需要，选择任意数量的“装饰品”ItemDecoration，来丰富你的RecyclerView。可能我的low常规思想还是一个XXX类，使用时如果扩充功能，需要extends and code~但这样不同的功能就太耦合了，不利于复用。毕竟 “组合大于继承”。</p> <p> </p> <p> </p> <p>来自：http://www.jianshu.com/p/0d49d9f51d2c</p> <p> </p>