之前做项目的时候都是直接用的网上找的，也没仔细研究，现在趁着闲暇时间，研究了一下如何实现。
先看下我们要实现的效果
demo.gif
实现方式
通过继承Recyclerview 的ItemDecoration来自定义分割线
相信大家对recyclerview的使用都很熟悉，这里就不在赘诉如果不熟悉的请看这里
Android RecyclerView 使用完全解析 体验艺术般的控件
ItemDecoration
我们先来了解下这个类
public class StickyDecoration extends RecyclerView.ItemDecoration {
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDraw(c, parent, state);
}
@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);
}
}
主要的方法就是这三个
getItemOffsets：通过Rect为每个Item设置偏移，用于绘制Decoration。
onDraw：通过该方法，在Canvas上绘制内容，在绘制Item之前调用。（如果没有通过getItemOffsets设置偏移的话，Item的内容会将其覆盖）
onDrawOver：通过该方法，在Canvas上绘制内容,在Item之后调用。(画的内容会覆盖在item的上层)
其之间的关系如下图所示
(图片是借用别人的0.0)
1F6151HP6-2109-1.png
搞清楚这三个方法是干什么的，就可以想怎么玩就怎么玩了。
我们要实现分隔条悬浮效果，首先要把分隔条给绘制出来。
/**
* 自定义分割线 实现悬浮效果
* Created by Administrator on 2018/3/28.
*/
public class StickyDecoration extends RecyclerView.ItemDecoration {
private final Paint paint;
private int mDecorationHeight = 40;
public StickyDecoration() {
super();
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.parseColor("#FF4081"));
}
/**
* 会在绘制item之前进行绘制 如果没有在getItemOffsets中设置偏移的话，会被item覆盖
* @param c
* @param parent
* @param state
*/
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDraw(c, parent, state);
int childCount = parent.getChildCount();
int left = parent.getLeft();
int right = parent.getRight();
for (int i = 0; i < childCount; i++) {
View child = parent.getChildAt(i);
int decorationBottom = child.getTop(); //item的top 也就是decoration的bottom
int top = decorationBottom - mDecorationHeight; //计算出decoration的top
c.drawRect(left,top,right,decorationBottom,paint); //绘制
}
}
/**
*在item 之后进行绘制， 会覆盖在item之上
* @param c
* @param parent
* @param state
*/
@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.top = mDecorationHeight; //为每个decoration预留空间
}
}
l.gif
现在是实现了为每个item添加decoration的效果
如果要实现悬浮的效果应该怎么做？
重点就在drawOver方法中
因为它是绘制在item之上的，所以我们就可以控制decoration实现悬浮效果
接着来
/**
* 自定义分割线 实现悬浮效果
* Created by Administrator on 2018/3/28.
*/
public class StickyDecoration extends RecyclerView.ItemDecoration {
private final Paint paint;
private int mDecorationHeight = 40;
OnTagListener listener;
private final Paint mTextPaint;
public StickyDecoration(OnTagListener listener) {
super();
this.listener = listener;
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.parseColor("#FF4081"));
mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setColor(Color.parseColor("#ffffff"));
mTextPaint.setTextSize(16);
}
/**
* 会在绘制item之前进行绘制 如果没有在getItemOffsets中设置偏移的话，会被item覆盖
* @param c
* @param parent
* @param state
*/
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDraw(c, parent, state);
//因为在onDrawOver方法中，已经实现了绘制，所以这里就不需要了
/* int childCount = parent.getChildCount();
int left = parent.getLeft();
int right = parent.getRight();
for (int i = 0; i < childCount; i++) {
View child = parent.getChildAt(i);
int decorationBottom = child.getTop(); //item的top 也就是decoration的bottom
int top = decorationBottom - mDecorationHeight; //计算出decoration的top
c.drawRect(left,top,right,decorationBottom,paint); //绘制
}*/
}
/**
*在item 之后进行绘制， 会覆盖在item之上
* @param c
* @param parent
* @param state
*/
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDrawOver(c, parent, state);
int itemCount = state.getItemCount();//获取所有item的数量
int childCount = parent.getChildCount();//获取当前屏幕显示的item数量
int left = parent.getLeft();
int right = parent.getRight();
String preTag;
String curTag = null;
for (int i = 0; i < childCount; i++) {
View child = parent.getChildAt(i);
int position = parent.getChildAdapterPosition(child);//获取在列表中的位置
preTag = curTag;
curTag = listener.getTag(position);//获取当前位置tag
if (curTag==null|| TextUtils.equals(preTag,curTag)) //如果两个item属于同一个tag，就不绘制
continue;
int bottom = child.getBottom(); //获取item 的bottom
float tagBottom = Math.max(mDecorationHeight,child.getTop());//计算出tag的bottom
if (position+1<itemCount) //判断是否是最后一个
{
String nextTag = listener.getTag(position + 1); //获取下个tag
if (!TextUtils.equals(curTag,nextTag)&&bottom<tagBottom) //被顶起来的条件 当前tag与下个tag不等且item的bottom已小于分割线高度
{
tagBottom = bottom; //将item的bottom值赋给tagBottom 就会实现被顶上去的效果
}
}
c.drawRect(left,tagBottom-mDecorationHeight,right,tagBottom,paint); //绘制tag文字
c.drawText(curTag,right/2,tagBottom-mDecorationHeight/2,mTextPaint); //将tag绘制出来
}
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
outRect.top = mDecorationHeight;
}
public interface OnTagListener{
String getTag(int position); //为了获取当前tag
}
}
实现顶上去效果的关键
判断当前tag与下个position的tag是否相同，以及当前item的bottom的变化
if (!TextUtils.equals(curTag,nextTag)&&bottom<tagBottom) //被顶起来的条件 当前tag与下个tag不等且item的bottom已小于分割线高度
{
tagBottom = bottom; //将item的bottom值赋给tagBottom 就会实现被顶上去的效果
}
end.gif
网友评论