Paint画笔的基本使用及自定义进度条

在项目开发中，都会涉及到自定控件的使用，在写自定义控件的时候，就会去重写onDraw方法，在onDraw方法中就会涉及到Paint画笔的使用，这里就说下Paint画笔的一些简单使用和设置。

Paint画笔的基本使用：
1.1、图形绘制相关
在使用的时候都会先new Paint，然后去设置相关的属性,下面是一些常用的属性方法；

//设置颜色
mPaint.setColor();
//重置画笔
mPaint.reset();
//设置透明度
mPaint.setAlpha();
//设置画笔样式 ()
mPaint.setStyle(Paint.Style.FILL);  填充内容
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);填充内容及描边
mPaint.setStyle(Paint.Style.STROKE);描边
//画笔的宽度
mPaint.setStrokeWidth();
//线帽
mPaint.setStrokeCap(Paint.Cap.BUTT);没有
mPaint.setStrokeCap(Paint.Cap.ROUND);圆形
mPaint.setStrokeCap(Paint.Cap.SQUARE);方形
//线段的连接处的样式
mPaint.setStrokeJoin(Paint.Join.MITER);//锐角
mPaint.setStrokeJoin(Paint.Join.ROUND);//圆弧
mPaint.setStrokeJoin(Paint.Join.BEVEL);//直线
//防锯齿，会损失一定的性能
mPaint.setAntiAlias();

1.2、文字绘制

//获得字符行间距
mPaint.getFontSpacing();
//获得字符之间的间距
mPaint.getLetterSpacing();
//设置字符之间的间距
mPaint.setLetterSpacing()
//设置文本删除线
mPaint.setStrikeThruText();
//是否设置下划线
mPaint.setUnderlineText();
//设置文本大小
mPaint.setTextSize();
//设置字体类型
mPaint.setTypeface();
//文字倾斜 默认0，官方推荐的-0.25f是斜体
mPaint.setTextSkewX();
//文本对齐方式
mPaint.setTextAlign(Align.LEFT);左对齐
mPaint.setTextAlign(Align.CENTER);居中对齐
mPaint.setTextAlign(Align.RIGHT);右对齐
//计算制定长度的字符串（字符长度、字符个数、显示的时候真实的长度）
mPaint.breakText(text, measureForwards, maxWidth, measuredWidth)

上面这些是绘制文字的时候常用到的一些属性方法，但是在绘制文字的时候需要注意一个问题：基线
下面是一张基线的大致示意图：

top和bottom之间可以看成是这段文字的矩形区域，其实发现baseline并不位于矩形区域的中间，其实基线是一个抽象的概念；需要注意的是baseline往上走是一个负值，往下走是一个正值。那么现在就有一个问题，就是在绘制文字的时候基线怎么计算？

基线的有关计算：
在绘制文字的时候会调用Canvas里面的drawText方法

canvas.drawText(@NonNull String text, float x, float y, @NonNull Paint paint);

这里面的float y就是基线；还有就是图上面的top、bottom、ascent、descent可以通过下面的方式获取:

Paint.FontMetricsInt fontMetricsInt = textPaint.getFontMetricsInt();
int top = fontMetricsInt.top;
int bottom = fontMetricsInt.bottom;
int ascent = fontMetricsInt.ascent;
int descent = fontMetricsInt.descent;

指定左上角的顶点坐标 绘制文本

如果文字有top值的话（这里的top不是fontMetricsInt.top）

float baselineY = Y - fontMetrics.top;

指定中间位置，绘制文本

float baselineY = centerY + (fontMetrics.bottom-fontMetrics.top)/2 - fontMetrics.bottom

如果是什么都没有指定的话

float baselineY = getHeight() /2+ (fontMetrics.bottom-fontMetrics.top)/2 - fontMetrics.bottom

这里的getHeight是绘制文本的高度

下面就是不同基线绘制出来的效果：

自定义进度条

左边和右边一样是个圆形，没有少，在弄gif图的时候没有弄好。
看上面的效果需要绘制下面这些东西：

1、绘制外环
2、绘制内环
3、绘制文字(需要判断是否设置了文字)

既然需要绘制，肯定就需要自定控件，extends View

1、自定义view

public class CircleProgressBar extends View {

    public CircleProgressBar(Context context) {
        this(context, null);
    }

    public CircleProgressBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

    }
}

说下上面的三个构造方法会在什么时候调用，

第一个构造方法new 的时候调用
第二个构造方法在xml文件中使用的时候调用
第三个构造方法在xml文件中使用并设置有style样式的时候调用

涉及到圆环的颜色、大小、字体颜色等属性，肯定要通过自定义属性来设置，也是为了方便使用；
2、初始化自定义属性和画笔

/**
 * 初始化自定义属性
 *
 * @param context 上下文
 * @param attrs   自定义属性
 */
private void initAttrs(Context context, AttributeSet attrs) {
    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressBar);
    cirleOutColor = array.getColor(R.styleable.CircleProgressBar_pbCirleOutColor, cirleOutColor);
    cirleInColor = array.getColor(R.styleable.CircleProgressBar_pbCirleInColor, cirleInColor);
    cirleTextColor = array.getColor(R.styleable.CircleProgressBar_pbCirleTextColor, cirleTextColor);
    cirleWidth = array.getDimension(R.styleable.CircleProgressBar_pbCirleWidth, cirleWidth);
    cirleTextSize = array.getDimensionPixelSize(R.styleable.CircleProgressBar_pbCirleTextSize, cirleTextSize);
    cirleTextShow = array.getBoolean(R.styleable.CircleProgressBar_pbCirleTextShow, cirleTextShow);
    cirleMax = array.getInteger(R.styleable.CircleProgressBar_pbCirleMax, cirleMax);
    array.recycle();
}

注意：初始完自定属性后要记得调用recycle();方法回收

/**
 * 初始化画笔
 */
private void initPaint() {
    outPaint = new Paint();
    //抗锯齿
    outPaint.setAntiAlias(true);
    outPaint.setColor(cirleOutColor);
    //画笔空心
    outPaint.setStyle(Paint.Style.STROKE);
    outPaint.setStrokeWidth(cirleWidth);

    innerPaint = new Paint();
    innerPaint.setAntiAlias(true);
    innerPaint.setStrokeWidth(cirleWidth);
    innerPaint.setColor(cirleInColor);
    innerPaint.setStyle(Paint.Style.STROKE);

    textPaint = new Paint();
    textPaint.setColor(cirleTextColor);
    textPaint.setTextSize(cirleTextSize);
}

3、重写onMeasure进行测量

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    //获取宽高模式模式
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    //获取宽高值
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    //判断宽高模式
    if (widthMode == MeasureSpec.AT_MOST) {
        widthSize = dip2px(80);
    }
    if (heightMode == MeasureSpec.AT_MOST) {
        heightSize = dip2px(80);
    }
    widthSize = Math.min(widthSize, heightSize);
    heightSize = Math.min(widthSize, heightSize);
    setMeasuredDimension(widthSize, heightSize);
}

4、重写onDraw方法进行绘制

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (cirleMax == 0) {
        throw new IllegalArgumentException("cirleMax is no zero");
    }
    //绘制外环
    int center = getWidth() / 2;//外环中心坐标点
    float radius = center - cirleWidth / 2;//半径
    canvas.drawCircle(center, center, radius, outPaint);

    //绘制内环
    RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
    canvas.drawArc(oval, 0, 360 * currentProgress / cirleMax, false, innerPaint);

    int percent = (int) (currentProgress / (float) cirleMax * 100);
    //绘制文字
    if (cirleTextShow && percent != 0) {
        canvas.drawText(percent + "%", (getWidth() - textPaint.measureText(percent + "%")) / 2f,
        //y公式： float baselineY = centerY + (fontMetrics.bottom-fontMetrics.top)/2 - fontMetrics.bottom
                getWidth() / 2f - (textPaint.descent() + textPaint.ascent()) / 2f,
                textPaint);
    }
}

另外还提供了设置当前进度和获取最大最的方法

/**
  * 设置当前进度
  *
  * @param progress
  */
public synchronized void setProgress(int progress) {
    if (progress < 0) {
        throw new IllegalArgumentException("progress is no zero");
    }
    if (progress > cirleMax) {
        progress = cirleMax;
    }
    if (progress <= cirleMax) {
        this.currentProgress = progress;
        postInvalidate();
    }
}

/**
  * 获取最大值
  *
  * @return
  */
public int getCirleMax() {
    return cirleMax;
}

剩下的就是在使用的时候调用就可以了

//属性动画
ValueAnimator valueAnimator = ObjectAnimator.ofFloat(0, cb1.getCirleMax());
valueAnimator.setDuration(2000);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
            float animatedValue = (float) animation.getAnimatedValue();
            cb1.setProgress((int) animatedValue);
        }
    });
valueAnimator.start();

源码地址：
http://download.youkuaiyun.com/download/wangwo1991/9956360

仿QQ计步计数效果：
http://www.jianshu.com/p/8d7b433b4960