为了实现下图刻度进度条的效果，我们必须了解自定义View。
并从自定义View中画一条线开始，到 画多条线，组成“刻度进度条”。

72d5e18fa1b1e9826a450f33872d647.png

1.新建一个类继承View，并实现onMeasure,onDraw

package com.leo.support.view.activity;

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.View;


/**
 * 带刻度的进度条
 */
public class ScaleProgressBarView extends View {


    /**
     * 第一个构造方法
     */
    public ScaleProgressBarView(Context context) {
        super(context);
    }


    /**
     * 第二个构造方法
     */
    public ScaleProgressBarView(Context context,  AttributeSet attrs) {
        super(context, attrs);
    }


    /**
     * 第三个构造方法
     */
    public ScaleProgressBarView(Context context,  AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    //大小
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    //绘制
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.e("ScaleProgressBarView", "onDraw");
    }

}

三个构造方法

网上有很多关于三个构造函数使用时机的说法,但是说法正确的却没有几家,这里正式的给大家科普一下:

• 在代码中直接new一个ScaleProgressBarView实例的时候,会调用第一个构造函数.这个没有任何争议.

• 在xml布局文件中调用ScaleProgressBarView的时候,会调用第二个构造函数.这个也没有争议.

• 在xml布局文件中调用ScaleProgressBarView,并且ScaleProgressBarView标签中还有自定义属性时,这里调用的还是第二个构造函数.
  也就是说,系统默认只会调用ScaleProgressBarView的前两个构造函数,

至于第三个构造函数的调用,通常是我们自己在构造函数中主动调用的（例如,在第二个构造函数中调用第三个构造函数）

详细可以看这个博客：https://blog.csdn.net/wzy_1988/article/details/49619773

2.获取自定义View的宽和高（单位：px）

onMeasure方法是用来设置宽高的，当然也可以用来获取宽高，获取方法如下：

    private int viewWidth, viewHeight;

    //大小
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //宽
        int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
        //高
        int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
        Log.e("ScaleProgressBarView", "measureWidth = " + measureWidth + "    measureHeight = " + measureHeight);
        if (measureWidth != 0 && measureHeight != 0) {
            viewWidth = measureWidth;
            viewHeight = measureHeight;
        }
    }

新手记得打印一下measureWidth,measureHeight。你会发现有时候measureWidth,measureHeight的值为0，所以当我们遇到0的时候不要使用。至于为什么会有0，我们下次再写博客讲解。

3.绘制直线

1. 现在我们知道了View的宽高，也就知道了坐标系了 如下图

   
   
   MainActivity.class
   
   
   activity_main.xml
2. 认知onDraw
   onDraw方法是绘制的意思，他的参数只有一个Canvas
   Canvas是画布的意思，你可以调用canvas.drawLine();方法实现绘制一条直线

3.绘制一条直线

image.png

这里需要传五个参数，分别是

• 开始的x,y值
• 结束的x,y值
• 画笔
  下面我试一试画一个从左上角到右下角的对角线，也就是(0,0) 到 (300,300)的线

    //绘制
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.e("ScaleProgressBarView", "onDraw");
        Paint paint = new Paint();
        //抗锯齿
        paint.setAntiAlias(true);
        //防抖动
        paint.setDither(true);
        //设置线条宽度（单位px）
        paint.setStrokeWidth(10);
        //设置颜色
        int color = getResources().getColor(R.color.bule);
        paint.setColor(color);
        //绘制直线
        canvas.drawLine(0, 0, viewWidth, viewHeight, paint);
    }

效果图如下

ed32916cc0765272aeef00d8b1d03dd.jpg

结束
到目前为止已经可以画一条线了，下一期我们讲讲解如何画简单的直线进度条。

简单的直线进度条示例.png