RecyclerView之StickyHeader

Posted by NOS-AE on 2020-07-31

这篇文章主要是介绍一下StikeyHeader我自己的实现方式,至于RecyclerView自身的padding,item的margin等,有需要的话可以自己加上

需要实现的核心内容

  • 同一个组的标题始终显示在顶部
  • 下一个组的标题到达顶部时,把上一个”赖着不走”的标题给顶走

利器:ItemDecoration

我使用了ItemDecoration实现粘性头部,可拔插设计,且实现方便

没了解过的小伙伴可以先康康 参考链接

Header分析

先从简单的入手:实现Header,也就是没有Sticky效果,Header会始终跟着列表滑动而滑动


首先我们把同一个标题下的Items看作是一个组,那就是要实现组内的第一个Item增加一个Header,此时自然就想到需要重写getItemOffsets方法,给需要的Item增加额外空间,然后重写onDraw方法绘制Header

Header实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
class HeaderDecoration(
private val callback: Callback
): RecyclerView.ItemDecoration() {

var mHeight = dp2px(30f)

private val mPaint = Paint().apply {
color = 0xFFC5C5C5.toInt()
style = Paint.Style.FILL
isAntiAlias = true
}
private val mTextPaint = TextPaint().apply {
color = 0xff353535.toInt()
textSize = sp2dp(14f)
isAntiAlias = true
baselineShift = (textSize / 2 - descent()).toInt()
textAlign = Paint.Align.CENTER
}

// 给组内第一个Item增加额外空间来绘制Header
override fun getItemOffsets(
outRect: Rect,
view: View,
parent: RecyclerView,
state: RecyclerView.State
) {
super.getItemOffsets(outRect, view, parent, state)
val pos = parent.getChildAdapterPosition(view)
if (isFirstInGroup(pos)) {
outRect.top = mHeight
}
}

// 绘制Header
override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
super.onDraw(c, parent, state)

val left = 0f
val right = parent.width.toFloat()
val childCount = parent.childCount

for (i in 0 until childCount) {
val child = parent.getChildAt(i)
val pos = parent.getChildAdapterPosition(child)
if (pos == RecyclerView.NO_POSITION || !isFirstInGroup(pos)) continue

val top = child.top - mHeight.toFloat()
val bottom = top + mHeight.toFloat()
c.drawRect(left, top, right, bottom, mPaint)

val title = callback.getGroupTitle(pos)
c.drawText(title, left, top + mHeight / 2 + mTextPaint.baselineShift, mTextPaint)
}
}

// 判断item是否所在组的内第一个item
private fun isFirstInGroup(pos: Int): Boolean {
if (pos < 0)
return false
val index = callback.getGroupIndex(pos)
val preIndex = callback.getGroupIndex(pos - 1)
return index != preIndex
}

// 回调获取item所在组的下标和标题
interface Callback {
fun getGroupIndex(pos: Int): Int
fun getGroupTitle(pos: Int): String
}
}

代码说明

  • 代码是kotlin

  • TextPaint和Paint在绘制上没有差别!对某些细节有疑问的可以参考一下我在StackOverflow上的回答

  • 在getItemOffsets中判断当前需要增加空间的Item是否第组内第一个Item,是的话就增加一个mHeight的高度

  • 在onDraw中遍历布局中的itemView,判断这个itemView是不是组内第一个Item,是的话就把Header绘制到这个itemView的正上方,标题则通过回调获得

使用

1
2
3
4
5
6
7
8
9
10
rv.addItemDecoration(HeaderDecoration(object : GroupDecoration.Callback {
override fun getGroupIndex(pos: Int): Int {
return findParent(pos) // 具体怎么找到GroupIndex自己实现
}

override fun getGroupTitle(pos: Int): String {
return findParentTitle(pos) // 同上,自己实现
}

}))

StickyHeader分析

  • StickyHeader是绘制在itemView之上的,所以需要在onDrawOver中绘制。
  • StickyHeader要么一直处于顶部不动,要么跟着组内最后一个Item滑走

由此得出实现思路:判断当前RecyclerView最顶部可见的item是不是在组中的最后一个item,是的话,StickyHeader的bottom就要与这个itemView的bottom重合,视觉上就是跟着这个itemView滑走,否则直接在顶部把StickyHeader绘制出来

另外我在实现StickyHeader时发现,之前onDraw绘制的Header,在视觉上不会影响StickyHeader的显示,并且还能巧妙地和onDrawOver绘制的StickyHeader结合形成”下面标题把当前标题顶上去”的效果,所以onDraw的代码不用动,主要添加onDrawOver的实现即可

StickyHeader实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 绘制StickyHeader
override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
super.onDrawOver(c, parent, state)
val manager = parent.layoutManager as LinearLayoutManager
// 找到RecyclerView第一个可见的itemView在adapter中的位置
val firstPos = manager.findFirstVisibleItemPosition()
if (firstPos == RecyclerView.NO_POSITION)
return

if (isLastInGroup(firstPos)) {
// 标题要跟着组内最后一个滑走
val child = parent.findViewHolderForAdapterPosition(firstPos)?.itemView ?: return
val bottom = min(child.bottom, mHeight).toFloat()
val top = bottom - mHeight.toFloat()
val left = 0f
val right = parent.width.toFloat()
c.drawRect(left, top, right, bottom, mPaint)

val title = callback.getGroupTitle(firstPos)
c.drawText(title, left, top + mHeight / 2 + mTextPaint.baselineShift, mTextPaint)
} else {
// 直接绘制在顶部
val top = 0f
val bottom = mHeight.toFloat()
val left = 0f
val right = parent.width.toFloat()
c.drawRect(left, top, right, bottom, mPaint)

val title = callback.getGroupTitle(firstPos)
c.drawText(title, left, top + mHeight / 2 + mTextPaint.baselineShift, mTextPaint)
}
}

// 判断item是否所在组的内最后一个item
private fun isLastInGroup(pos: Int): Boolean {
if (pos < 0)
return false
val index = callback.getGroupIndex(pos)
val preIndex = callback.getGroupIndex(pos + 1)
return index != preIndex
}

代码说明:

  • 如果item是组内最后一个item,需要用min函数确定StickyHeader的位置,保证StickyHeader能正确显示并随itemView滑出屏幕

使用:

  • 类似上面普通的Header使用

结语

以上就是我实现StickyHeader的实现方法

理解了StickyHeader的实现,类似的例如CoveredHeader(即下一个header不是顶走上一个header,而是直接覆盖在上面)也能轻松地自己手动实现