RecyclerView.ItemDecoration实现占位Item

RecyclerView.ItemDecoration实现占位Item

一、为什么需要占位Item

神马笔记的移动功能使用了树形结构的RecyclerView,在初始状态下只有一个根Item,点击Item后会展开子目录内容,为了增加指示性以及丰富界面,因此需要在界面中增加占位Item。

二、实现效果

空白部分使用了占位Item,增加了指示性,丰富了界面。

注:原始图片为720 x 1440,缩放为320 x 640后,空白位置的分割线显示不是特别明显。

下载安装【whatsnote_lastest.apk】能更明显看到效果。

三、实现原理

使用RecyclerView.ItemDecoration绘制空白部分的分割线产生占位Item的效果。

关键过程:

  1. 获取最后一个Item的位置,从最后一个Item位置开始绘制分割线
  2. 获取Item的高度,树形结构中总有一个根节点,获取任意一个Item的高度即可
  3. 计算绘制的个数,根据RecyclerView的高度及以上2个参数,即可计算出个数

四、完整代码

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
71
72
73
74
75
76
77
78
79
80
81
82
83
package club.andnext.recyclerview.decoration;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.view.View;
import androidx.recyclerview.widget.RecyclerView;
import club.andnext.recyclerview.R;

public class PlaceholderDecoration extends RecyclerView.ItemDecoration {

Drawable divider;

int margin;
Rect bounds;

public PlaceholderDecoration(Context context) {
this.divider = context.getDrawable(R.drawable.anc_shape_list_divider);

this.bounds = new Rect();

}

public PlaceholderDecoration setMargin(int value) {
this.margin = value;

return this;
}

@Override
public void onDraw(Canvas canvas, RecyclerView parent, RecyclerView.State state) {

if (parent.getLayoutManager() == null || divider == null) {
return;
}

canvas.save();

final int left;
final int right;

//noinspection AndroidLintNewApi - NewApi lint fails to handle overrides.
if (parent.getClipToPadding()) {
left = parent.getPaddingLeft();
right = parent.getWidth() - parent.getPaddingRight();
canvas.clipRect(left, parent.getPaddingTop(), right,
parent.getHeight() - parent.getPaddingBottom());
} else {
left = 0;
right = parent.getWidth();
}

int x = left + margin;
int y = 0;

final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = parent.getChildAt(i);
parent.getDecoratedBoundsWithMargins(child, bounds);

final int bottom = bounds.bottom;
y = (y < bottom)? bottom: y;
}

if (childCount != 0) {
int height = parent.getChildAt(0).getHeight();
int count = (parent.getHeight() - y) / height;

y += height;
for (int i = 0; i < count; i++) {
divider.setBounds(x, y, right, y + divider.getIntrinsicHeight());
divider.draw(canvas);

y += height;
}
}

canvas.restore();
}


}

五、核心代码

  1. 计算bottom位置

注意:这里不能直接取最后一个Item的bottom。因为是RecyclerView,最后一个Item在位置上不一定是最后一个,并且还存在被重用的情况。

正确的做法是遍历所有的Item,计算出最大bottom位置。

1
2
3
4
5
6
7
8
9
10
int y = 0;

final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = parent.getChildAt(i);
parent.getDecoratedBoundsWithMargins(child, bounds);

final int bottom = bounds.bottom;
y = (y < bottom)? bottom: y;
}
  1. 绘制分割线

根据RecyclerView的高度及bottom计算出绘制个数,循环绘制分割线即可。

1
2
3
4
5
6
7
8
9
10
11
12
if (childCount != 0) {
int height = parent.getChildAt(0).getHeight();
int count = (parent.getHeight() - y) / height;

y += height;
for (int i = 0; i < count; i++) {
divider.setBounds(x, y, right, y + divider.getIntrinsicHeight());
divider.draw(canvas);

y += height;
}
}

六、下载地址

神马笔记最新版本:【whatsnote_lastest.apk