Android自定义View之滑杆内部带数字的SeekBar

一、需求确认

首先我们要明确需求，要做一个什么样的Seekbar，分析清楚业务需求，再开始做。如图，产品大佬给的图是这样子的：

当然，作为一个工程师，第一步当然是去问问度娘，看有没有好的轮子，然后去github上淘淘金。我始终认为这是一个优秀工程师该有的解决问题的方法，哈哈~ 找过一圈之后，发现并没有适合的轮子可以用，这时心里开始咒骂产品了，“提的什么鬼需求，那么非主流”。但是骂完还得撸起袖子干啊。

二、该怎么做

首先我们分析，这个控件该怎么去实现。首先，我们知道，要画一条直线来当作进度条；然后呢，我们要画一个圆角矩形，矩形中要有数字。查看了SeekBar的源码，发现他有一个监听器回调滑杆事件，那么咱们也要有。好的，现在确认了需要的4样东西：直线、圆角矩形、数字、监听器。就可开工了。

三、开整

我们首先顶一个半径pointRadius，因为滑杆一般为圆形或者圆角正方形。还有线的高度lineHeight，progress进度值。这里还是贴代码了。

    private int pointRadius = 45;//圆脚默认半径
    private int pointColor = R.color.dream_2;//圆脚默认颜色

    private int lineHeight = 10;//线默认高度
    private int lineClor = R.color.dream_1;//线默认颜色

    private int progress = 0;
    private final int PROGRESS_MIN = 0;
    private final int PROGRESS_MAX = 100;

当然，要画三个东西，就要准备三支笔。

    private Paint linePaint;
    private Paint pointPaint;
    private Paint textPaint;

最后还有一个监听器，三个回调方法分别是开始的时候回调，滑动中回调，滑动完回调。当然可以根据自己的逻辑增加回调方法。

  private OnProgressChangedListener progressChangedListener;

    public interface OnProgressChangedListener {
        void onStartChange(View view);

        void onProgressChange(View view, int progress);

        void onProgressChanged(View view, int progress);
    }

首先，我们画一条线

canvas.drawLine(pointRadius / 2, getHeight() / 2, getWidth() - pointRadius / 2, getHeight() / 2, linePaint);

然后画个圆角矩形（正方形）

        RectF r2 = new RectF();                           //RectF对象
        r2.left = getCx() - pointRadius;                                 //左边
        r2.top = getHeight() / 2 - pointRadius;                                 //上边
        r2.right = getCx() + pointRadius;                                   //右边
        r2.bottom = getHeight() / 2 + pointRadius;                              //下边
        canvas.drawRoundRect(r2, 20, 20, pointPaint);

然后就是画字了（文本）

        if (progress > 9 && progress < 100) {
            canvas.drawText("" + progress, getCx() - 32, getHeight() / 2 + pointRadius / 3, textPaint);
        } else if (progress > 99) {
            canvas.drawText("" + progress, getCx() - pointRadius + 2, getHeight() / 2 + pointRadius / 3, textPaint);
        } else {
            canvas.drawText("" + progress, getCx() - pointRadius / 3, getHeight() / 2 + pointRadius / 3, textPaint);
        }