RecyclerView 的 ItemDecoration 学习纪录

之前用ItemDecoration就只会给它加一条分割线。
后来看到了说用ItemDecoration做的时间线什么的。
就尝试的做了一下，分享一下笔记纪录,先上效果图:

public class TimeLine extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//此布局只用了一个RecyclerView 充满了整个屏幕
setContentView(R.layout.activity_time_line);

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler);
//给RecyclerView添加布局管理 用瀑布流
StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(staggeredGridLayoutManager);

//设置一点假数据
ArrayList<String> list = new ArrayList<>();
for (int i = 0; i < 20; i++) {
list.add("item: " + i);
}

recyclerView.setAdapter(new TimeLineAdapter(this, list));
//用上的我们的时间线条目装饰
recyclerView.addItemDecoration(new TimeLineItemDecorator(this));

}

private class TimeLineAdapter extends RecyclerView.Adapter<TimeLineAdapter.holder> {

private final Context context;
private final ArrayList<String> list;

public TimeLineAdapter(Context context, ArrayList<String> list) {
this.context = context;
this.list = list;
}

@Override
public holder onCreateViewHolder(ViewGroup parent, int viewType) {
//条目布局只是用了一个图片和一个TextView
return new holder(LayoutInflater.from(context).inflate(R.layout.timeline_item, parent, false));
}

@Override
public void onBindViewHolder(holder holder, int position) {
holder.tv.setText(list.get(position));
//为了呈现出 右边有两个的效果 和 每个条目的大小不一样
if (position != 10 && position != 5 && position != 8) {
holder.image.setMaxHeight(position * 100 + 50);
holder.image.setMinimumHeight(position * 100 + 50);
} else {
holder.image.setMaxHeight(100);
holder.image.setMinimumHeight(100);
}
}

@Override
public int getItemCount() {
return list.size();
}

class holder extends RecyclerView.ViewHolder {
TextView tv;
ImageView image;

public holder(View itemView) {
super(itemView);
tv = (TextView) itemView.findViewById(R.id.timeline_tv);
image = (ImageView) itemView.findViewById(R.id.image);
}
}
}

/**
* ItemDecoration 其实就是为了装饰 RecyclerView 和条目
* 其中最主要的3个方法 分别是两个画的功能 和 一个给条目设置边距
* public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state)
* public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state)
* public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state)
*/
private class TimeLineItemDecorator extends RecyclerView.ItemDecoration {
private Context context;
private final Paint paint;
private final Bitmap bitmap;

/**
* 构造方法 传一些 你可能需要的参数进来
*
* @param context
*/
public TimeLineItemDecorator(Context context) {
this.context = context;
paint = new Paint();
paint.setColor(Color.BLUE);
bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
}

/**
* 此方法发生在 画条目之前， 所以会被条目所遮挡
*
* @param c      画布
* @param parent 整个RecyclerView
* @param state
*/
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDraw(c, parent, state);

//RecyclerView 中间画了一条线
c.drawRect(parent.getWidth() / 2 - 5, 0, parent.getWidth() / 2 + 5, parent.getBottom(), paint);

//然后分别给显示在界面的条目画 装饰
int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
View child = parent.getChildAt(i);
//计算他们是在整个RecyclerView的左边还是右边，得出 支线应该怎么画
if (child.getLeft() < parent.getWidth() / 2) {
c.drawRect(child.getRight() / 2,
child.getBottom() - (child.getBottom() - child.getTop()) / 2 - 5,
parent.getWidth() / 2,
child.getBottom() - (child.getBottom() - child.getTop()) / 2 + 5, paint);
} else {
c.drawRect(parent.getWidth() / 2,
child.getBottom() - (child.getBottom() - child.getTop()) / 2 - 5,
child.getRight() - (child.getRight() - child.getLeft()) / 2,
child.getBottom() - (child.getBottom() - child.getTop()) / 2 + 5, paint);
}
}
}

/**
* 此方法发生在 画条目之后， 所以这里所绘画的东西会正当住条目内容
*
* @param c      画布
* @param parent 整个RecyclerView
* @param state
*/
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDrawOver(c, parent, state);
//给每个条目之后画上一个 小图标 也可以增加一些不同的东西
int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
View child = parent.getChildAt(i);
float left = (float) parent.getWidth() / 2 - bitmap.getWidth() / 2;
float top = child.getTop() + child.getHeight() / 2 - bitmap.getHeight() / 2;
c.drawBitmap(bitmap, left, top, paint);
}
}

/**
* 这个方法用来设置 RecyclerView 条目的偏移量的
*
* @param outRect 矩阵
* @param view    当前的Item View
* @param parent  指的是RecyclerView
* @param state
*/
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
//用这个方法来这是 条目周围边距便宜量，分别为 左上右下
//比如当前这个，就是左边空出50px距离，上面不空，右边空出50px，下面不空
//outRect.left = 50; 或者这种方式来设置
//outRect.top = 0;
//outRect.right = 50;
//outRect.bottom = 0;
outRect.set(50, 0, 50, 0);
}
}
}