RecyclerView
对你们来讲,基本使用应该已经比较熟悉,这里就直接跳过,说说ItemDecoration
,也算是温故而知新。java
ItemDecoration
从字面意思来讲,就是装饰,装饰RecyclerView
。这个怎么理解?举几个例子就明白了。 好比说,RecyclerView
若是要加间隔线应该如何作? 这里就要用到ItemDecoration
android
DividerItemDecoration mDivider = new DividerItemDecoration(this, DividerItemDecoration.VERTICAL);
rvDemo.addItemDecoration(mDivider);
复制代码
DividerItemDecoration
继承于ItemDecoration
git
public class DividerItemDecoration extends ItemDecoration {}
复制代码
这里就涉及到自定义ItemDecoration
github
自定义 ItemDecoration
,主要涉及到3个方法canvas
getItemOffsets
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {}
复制代码
其中,outRect
为该item
在上下左右撑开的距离,默认为 0;view
为item
;parent
为RecyclerView
自己;state
为RecyclerView
状态,也能够经过其在各组件之间传递参数,这里暂时涉及不到。缓存
举个例子app
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ff0000" tools:context=".deco.DecoActivity">
<android.support.v7.widget.RecyclerView android:id="@+id/rv_demo" android:layout_width="match_parent" android:layout_height="match_parent" />
</android.support.constraint.ConstraintLayout>
复制代码
定义一个DemoAdapter
,这里使用的是 BaseRecyclerViewAdapterHelperide
public class DemoAdapter extends BaseQuickAdapter<String, BaseViewHolder> {
public DemoAdapter(@Nullable List<String> data) {
super(R.layout.item_demo, data);
}
@Override
protected void convert(BaseViewHolder helper, String item) {
helper.setText(R.id.tv_demo, item);
}
}
复制代码
而后组装数据,添加ItemDecoration
post
List<String> list = new ArrayList<>();
for (int i = 0; i < 100; i++) {
list.add("第" + i + "个item");
}
DemoAdapter demoAdapter = new DemoAdapter(list);
rvDemo.setLayoutManager(new LinearLayoutManager(this));
rvDemo.addItemDecoration(new DemoDecoration());
rvDemo.setAdapter(demoAdapter);
复制代码
DemoDecoration#getItemOffsets
ui
@Override
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
//outRect就是表示在item的上下左右所撑开的距离,默认值为0
outRect.set(10, 20, 30, 40);
}
复制代码
能够看到,每一个item都会执行getItemOffsets
方法,因此,咱们能够用这个,为RecyclerView
添加间隔线。 好比设置bottom为1,这里就不演示了,有兴趣的同窗能够本身试试。
onDraw
public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {}
复制代码
其中,c
为getItemOffsets
所撑开区域的画布,能够在区域内任意绘图,区域外的话,会被item所遮挡。
举个例子,
@Override
public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.onDraw(c, parent, state);
//getItemOffsets撑开的空白区域所对应的画布,能够在getItemOffsets所撑出来的区域任意绘图。
c.drawCircle(50, 50, 30, mPaint);
}
@Override
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
//outRect就是表示在item的上下左右所撑开的距离,默认值为0
outRect.set(100, 0, 0, 5);
}
复制代码
效果图以下
能够看到,onDraw
方法只会执行一次,若是要每一个item
前都绘制一个圆,怎么写?
@Override
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
int itemCount = parent.getChildCount();
for (int i = 0; i < itemCount; i++) {
View child = parent.getChildAt(i);
int cx = child.getWidth() / 2;
int cy = child.getTop() + child.getHeight() / 2;
c.drawCircle(cx, cy, 30, mPaint);
}
}
}
复制代码
效果图以下
结合这2个方法,咱们是否是能够作个分组效果?先看效果图
public DemoDecoration() {
mPaint = new Paint();
mPaint.setColor(Color.GREEN);
mPaint.setTextSize(DensityUtils.dp2px(DecoActivity.this, 16));
}
@Override
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
//outRect就是表示在item的上下左右所撑开的距离,默认值为0
int index = parent.getChildAdapterPosition(view);
if (index % 3 == 0) {
outRect.set(0, 100, 0, 5);
} else {
outRect.set(0, 0, 0, 5);
}
}
@Override
public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.onDraw(c, parent, state);
//getItemOffsets撑开的空白区域所对应的画布,能够在getItemOffsets所撑出来的区域任意绘图。
int itemCount = parent.getChildCount();
for (int i = 0; i < itemCount; i++) {
View child = parent.getChildAt(i);
int cx = child.getWidth() / 2 - 50;
int cy = child.getTop() - 50 + DensityUtils.dp2px(DecoActivity.this, 16) / 2;
int index = parent.getChildAdapterPosition(child);
if (index % 3 == 0) {
String text = "第" + index / 3 + "组";
c.drawText(text, 0, text.length(), cx, cy, mPaint);
}
}
}
复制代码
固然,分组的标题位置算的不太准备,这里只是展现下效果。比较理想的效果,能够参考【Android视图效果】分组列表实现吸顶效果
onDrawOver
public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {}
复制代码
onDrawOver
和onDraw
相似,也只会执行一次,而且它是最后绘制的,能够绘制到item
上面。
@Override
public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.onDrawOver(c, parent, state);
int itemCount = parent.getChildCount();
for (int i = 0; i < itemCount; i++) {
View child = parent.getChildAt(i);
int cx = child.getWidth() / 2;
int cy = child.getTop() + child.getHeight()/2 ;
c.drawCircle(cx, cy, 30, mPaint);
}
}
复制代码
效果图以下
这个方法又能够作什么效果呢?先看效果图
能够看到,列表的最上边有一个渐隐效果。 完整代码以下
public class TransDecoration extends RecyclerView.ItemDecoration {
private Paint mPaint;
private Xfermode xfermode;
private LinearGradient linearGradient;
private int layerId;
public TransDecoration() {
mPaint = new Paint();
xfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
linearGradient = new LinearGradient(0.0f, 0.0f, 0.0f, 100.0f, new int[]{0, Color.BLACK}, null, Shader.TileMode.CLAMP);
}
@Override
public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.onDraw(c, parent, state);
// 此处 Paint的参数这里传的null, 在传入 mPaint 时会出现第一次打开黑屏闪现的问题
// 注意 saveLayer 不能省也不能移动到onDrawOver方法里
layerId = c.saveLayer(0.0f, 0.0f, (float) parent.getWidth(), (float) parent.getHeight(), null, Canvas.ALL_SAVE_FLAG);
}
@Override
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
}
@Override
public void onDrawOver(@NonNull Canvas canvas, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.onDrawOver(canvas, parent, state);
mPaint.setXfermode(xfermode);
mPaint.setShader(linearGradient);
canvas.drawRect(0.0f, 0.0f, parent.getRight(), 200.0f, mPaint);
mPaint.setXfermode(null);
canvas.restoreToCount(layerId);
}
}
复制代码
其中,PorterDuffXfermode为图像的混合模式,详情可参考各个击破搞明白PorterDuff.Mode LinearGradient为渐变效果,详情可参考自定义控件三部曲之绘图篇(十九)——LinearGradient与闪动文字效果