RecyclerView 的 ItemDecoration 学习纪录

来源：互联网发布：单片机p0口上拉电阻编辑：程序博客网时间：2024/04/30 01:02

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

图1:
截图1
图2:
截图2
图3:
截图3

上代码：

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);        }    }}

阅读全文

2 0