自定义View之实战篇(一) 实现时光轴

一、简介

实现时光轴之前，我们先对RecycleView的ItemDecoration进行学习。

RecyclerView目前在我们的开发中使用十分频繁，其基本概念这些我们也不细细整理了，但是我们添加分割线，点击监听等等更复杂了，现在我们先学习ItemDecoration。

ItemDecoration有3个重要方法，我们简单的说明

public class Decoration extends RecyclerView.ItemDecoration {

     /**
     * 设置ItemView的内嵌偏移长度，可以实现类似padding的效果
     * @param outRect 全为 0 的 Rect（包括着Item）
     * @param view 每个Item
     * @param parent RecyclerView 本身
     * @param state 状态
     */
    @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 onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDraw(c, parent, state);
    }

    /**
     * 可以绘制在内容的上面，覆盖内容
     */
    @Override
    public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDrawOver(c, parent, state);
    }
}

二、实战理解

1、实现分割线

public class DiverDecoration extends RecyclerView.ItemDecoration {

    private Paint dividerPaint;
    private int deviderHeight;

    public DiverDecoration() {
        dividerPaint=new Paint();
        dividerPaint.setColor(Color.RED);
        // 分割线的高度
        deviderHeight=2;
    }
    
    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c,parent,state);
        //得到列表所有的条目
        int childCount = parent.getChildCount();
        //得到条目的宽和高
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();

        for (int i = 0; i < childCount - 1; i++) {
            View view = parent.getChildAt(i);
            //计算每一个条目的顶点和底部 float值
            float top = view.getBottom();
            float bottom = view.getBottom() + deviderHeight;
            //重新绘制
            c.drawRect(left, top, right, bottom, dividerPaint);
        }
    }
}

使用方法：

mRecyclerView.addItemDecoration(new DiverDecoration());

2、实现时光轴

实现方法，若下图所示，我们在每个View前加入一个时间节点（如图红色所示），我们求得每个View的圆心后，绘制下面的图形，实现最简单的时间轴。

扩展：我们可以在传入时间集合，在前面加入时间，或者美化下面的时间节点，实现更优雅的时光轴，更完善的封装可能会在后面完整整理MVP中实现。

实现代码

public class TimeLineDecoration extends RecyclerView.ItemDecoration {

    private Paint mPaint;
    //内容距离左边的距离
    private int mOffsetLeft;
    //内容距离左边的距离
    private int mOffsetTop;
    //绘制原点的半径
    private int mRadius;

    public TimeLineDecoration() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(7);
        mPaint.setColor(Color.RED);
        //默认设置距离左边80，圆的半径20
        mOffsetLeft = 80;
        mRadius = 20;
    }

    @Override
    public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        //如果是第一个，不需要设置top值
        if (parent.getChildAdapterPosition(view) != 0) {
            outRect.top = 5;
            mOffsetTop = 5;
        }
        outRect.left = mOffsetLeft;
    }


    @Override
    public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDraw(c, parent, state);
        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View view = parent.getChildAt(i);
            int index = parent.getChildAdapterPosition(view);

            //同样，如果是第一个没有view也没有top值
            int viewTop = view.getTop() - mOffsetTop;
            if (index == 0) {
                viewTop = view.getTop();
            }
            int viewBottom = view.getBottom();

            //获取圆心的坐标
            int centerX = view.getPaddingLeft() + mOffsetLeft / 2;
            int centerY = viewTop + (viewBottom - viewTop) / 2;

            //绘制上下2条线
            c.drawLine(centerX, viewTop, centerX, centerY - mRadius, mPaint);
            c.drawLine(centerX, centerY - mRadius, centerX, viewBottom, mPaint);

            //绘制圆
            c.drawCircle(centerX, centerY, mRadius, mPaint);
        }
    }
}

使用
mRecyclerView.addItemDecoration(new TimeLineDecoration());

实现效果：具体的效果我们自行优化，就可以实现很亮丽的效果

时间轴的自定义基本完 ，说白了就是一堆计算加上简单的绘制，因为目前的工作不是Android开发，所以也是边做边学，如有问题请多多留言指教。关于自定义View实战会逐步更新，下一章会整理自定义翻页的知识。