使用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++
    }
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章