使用RecyclerView的ItemDecoration实现StickyHeader效果（笔记）

最近要做一个类似QQ浏览器的浏览记录效果

就是下面的效果

QQ浏览器玩了半天，分析出了一点东西。

之前用ItemDecoration给RecyclerView绘制item过分割线。

大家仔细观察一下就可以发现，这个效果就是给指定的item绘制分割线。

这里有一个比较好的教程，博主就不写详细的分析和实现了

另外还有一种实现方式：Android RecyclerView 顶部悬浮实现有兴趣的可以试一下

重点说一下踩的坑：

1.数据分类：

由于浏览记录要求最新的记录要展示在最上面，而博主在存储的时候是顺序存储的。所以需要在查询数据库之后，反转集合。

集合的顺序是反的，但是集合中的JavaBean的position属性还是原来的（正的集合中的顺序）。那么在判断first和last的时候就需

要注意了。

fun isFirstViewInGroup(): Boolean {//展示的shi反转的集合
    if (groupSize > 0) {
        return position == groupSize - 1
    } else {
        return position == 0
    }
}

fun isLastViewInGroup(): Boolean {//展示的shi反转的集合
    return position == 0
}

2.getItemOffSets（）方法：

这个方法主要是用来占位的。无论是分割线还是图中的浮动条都是需要位置（空间）才能绘制的。

override fun getItemOffsets(outRect: Rect?, view: View?, parent: RecyclerView?, state: RecyclerView.State?) {
    super.getItemOffsets(outRect, view, parent, state)
    //获取itemView在适配器中的位置
    var position: Int? = parent?.getChildAdapterPosition(view)
    //判断item是不是分组中的第一条
    if (mCallBack != null) {
        var info = position?.let { mCallBack?.getGroupInfo(it) }
        var isFirst: Boolean? = info?.isFirstViewInGroup()
        if (isFirst!!) {
            //撑起一个header的高度
            outRect?.top = mHeaderHeight?.toInt()
        } else {//分割线高度
            outRect?.top = mDividerHeight
        }
    }
}

3.onDrawOver（）方法：

顾名思义，这个方法是在绘制完成之后执行的。需要注意的是一些位置参数。

override fun onDrawOver(c: Canvas?, parent: RecyclerView?, state: RecyclerView.State?) {
    super.onDrawOver(c, parent, state)
    //遍历所有的ItemView
    var childCount = parent?.childCount
    var account = 0
    while (account < childCount!!) {
        //获取View
        var view = parent?.getChildAt(account)
        //获取view在适配器中的位置
        var index = parent?.getChildAdapterPosition(view)
        if (mCallBack != null) {
            var info = index?.let { mCallBack?.getGroupInfo(it) }
            var isFirst: Boolean? = info?.isFirstViewInGroup()
            var left = view?.paddingLeft
            var right = view?.width?.minus(view?.paddingRight)

            if (account != 0) {

                if (isFirst!!) {//组内第一条数据
                    //itemView高度-header高度（向上）
                    var top = mHeaderHeight?.let { view?.top?.minus(it) }
                    var bottom = view?.top
                    drawHeader(c, top, right, bottom, left, info)
                }

            } else {//屏幕第一个可见itemView
                //RecyclerView的顶部位置
                var top = parent?.paddingTop
                if (info?.isLastViewInGroup()!!) {
                    var groupLastTop = mHeaderHeight?.let { view?.bottom?.minus(it) }//组内最后一条的高度(位置)
                    if (groupLastTop!! < top!!) {//组内最后一条的位置小于parent高度的位置（屏幕之外）
                        top = groupLastTop?.toInt()
                    }
                }
                //顶部位置+header高度（向下）
                var bottom = mHeaderHeight?.let { top?.plus(it) }
                drawHeader(c, top?.toFloat(), right, bottom?.toInt(), left, info)
            }
        }
        account++
    }
}

使用RecyclerView的ItemDecoration实现StickyHeader效果（笔记）

相关推荐