最近要做一個類似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++ } }