android之自定义带文本的圆角进度条

自定义圆角进度条以及颜色渐变的进度条

先上图，给个直观印象



一、先来看看渐变的圆角

private void init(AttributeSet attrs) {
mRadius = (int) ((getScreenSize(context).x * 0.6f) / 2);//屏幕的1/4
initPaint();
}

private void initPaint() {
// 初始化画笔对象
mPaint.setStyle(Style.STROKE);
mPaint.setAntiAlias(true);
mPaint.setDither(true);//设置抖动
mPaint.setStrokeCap(Cap.ROUND);

mPaintUnReach.setStyle(Style.STROKE);
mPaintUnReach.setAntiAlias(true);
mPaintUnReach.setDither(true);
mPaintUnReach.setStrokeCap(Cap.ROUND);
// 设置画笔颜色和宽度
mPaintUnReach.setColor(mUnReachBarColor);

mTextPaint.setStyle(Style.FILL);
mTextPaint.setAntiAlias(true);
mTextPaint.setDither(true);
}

1、初始化画笔及画圆的半径，半径非常重要，会影响圆的宽高，读者可根据自己需要提供一个公用方法设置或者自定义属性实现，现只是为了讲解，取屏幕w的1/4为半径

2、初始化画笔，圆角主要是setStrokeCap(Cap.ROUND)来设置的，而设置抖动setDither()这个大概意思是保证画图的清晰度已经平滑度，抗锯齿setAntiAlias();表示画出来的视图不会有锯齿

二、再来看看其onMeasure和onDraw()方法：

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 两个画笔的最大宽度
int paintWidth = Math.max(mUnReachBarWidth, mReachBarWidth);
int wMode = MeasureSpec.getMode(widthMeasureSpec);
int wSize = MeasureSpec.getSize(widthMeasureSpec);
int hMode = MeasureSpec.getMode(heightMeasureSpec);
int hSize = MeasureSpec.getSize(heightMeasureSpec);

if (wMode == MeasureSpec.AT_MOST && hMode == MeasureSpec.AT_MOST) {
wSize = mRadius * 2 + (paintWidth / 2) * 2;
hSize = mRadius * 2 + (paintWidth / 2) * 2;
} else if (wMode == MeasureSpec.AT_MOST) {
wSize = mRadius * 2 + (paintWidth / 2) * 2;
} else if (hMode == MeasureSpec.AT_MOST) {
hSize = mRadius * 2 + (paintWidth / 2) * 2;
}
if (0 >= wSize) {
wSize = mRadius * 2;
}

if (0 >= hSize) {
hSize = mRadius * 2;
}

// 获取宽度和高度的最小值，作为当前view的宽度和高度
mSize = Math.min(wSize, hSize);
// 设置进度条的大小:整个view的大小
setMeasuredDimension(mSize, mSize);

// 设置画笔宽度
mMaxPaintWidth = paintWidth;
// 计算进度条的半径 画笔是从画笔的宽度中间开始画的----
// 、、此处有个坑，若是有进入到二级页面再回来，可能视图会变小，因为每次半径测量时都会减小，
// 根据需要半径最好放在初始化时设置，不要让它变化
mRadius = (mSize - (mMaxPaintWidth / 2) * 2) / 2;

mPaint.setStrokeWidth(mMaxPaintWidth);
mPaintUnReach.setStrokeWidth(mMaxPaintWidth);
}

@Override
protected void onDraw(Canvas canvas) {
// 在save和restore之间的代码可以进行canvas的平移、缩放等操作
canvas.save();
// 画布旋转120度
canvas.rotate(115, mSize / 2, mSize / 2);
int progressMax = getMax();
// 绘制unreachedBar
// 绘制reachBar ：画布旋转115度，所以是从115度开始，从0开始，从 5度开始画，就是120
canvas.drawArc(new RectF(mMaxPaintWidth / 2, mMaxPaintWidth / 2, mSize - mMaxPaintWidth / 2, mSize - mMaxPaintWidth / 2), 5, progressMax * 1.0f / progressMax * 300, false, mPaintUnReach);

//        canvas.drawCircle(mSize / 2, mSize / 2, mRadius, mPaintUnReach);
// 设置画笔颜色:绘制过程中会渐变 mReachBarColor是数组起始颜色和最终颜色，渐变的过程
SweepGradient sg = new SweepGradient(mSize / 2, mSize / 2, mReachBarColor, null);
mPaint.setShader(sg);
//        sg.setLocalMatrix();除了旋转画布外，也可根据这个矩阵来旋转起始角度
// 计算当前进度对应的角度
float sweepAngle = mCurrentProgress * 1.0f / progressMax * 300;
// 绘制reachBar ：原始0度角是沿x轴方向的旋转115度之后，0角度指的就是115度的位置,
// 起始角度为5是因为画弧度的颜色值是从一半开始画的，所以后一半圆会取前边的颜色值，导致不一致，所以从5度开始画,可根据画笔宽度的一半来设置
canvas.drawArc(new RectF(mMaxPaintWidth / 2, mMaxPaintWidth / 2, mSize - mMaxPaintWidth / 2, mSize - mMaxPaintWidth / 2), 5, sweepAngle, false, mPaint);
canvas.restore();
drawText(canvas);
}

private void drawText(Canvas canvas) {
mTextPaint.setColor(Color.WHITE);
mTextPaint.setTextSize(dp2px(40));
mTextPaint.setTypeface(Typeface.DEFAULT_BOLD);// 设置粗体
float weightWidth = mTextPaint.measureText(weightValue);
float weightTextSize = mTextPaint.getTextSize();
canvas.drawText(weightValue, mSize / 2 - weightWidth / 2, mSize / 2 + weightTextSize / 2 - dp2px(5), mTextPaint);

mTextPaint.setTypeface(Typeface.DEFAULT);//设置常规字体
// 绘制单位（Kg）
mTextPaint.setTextSize(dp2px(12));

// 此处多减去了一个textSize的一半，因为绘制text的时候
canvas.drawText(unit, mSize / 2 + weightWidth / 2, mSize / 2 + weightTextSize / 2 - dp2px(5), mTextPaint);

// 绘制“体重状态”
mTextPaint.setTextSize(dp2px(12));
weightWidth = mTextPaint.measureText(weightStatus);
// 以下也可以获取大小范围
//        mPaint.getTextBounds(text, 0, text.length(), mRect);//
//        int x = (getWidth() / 2) - mRect.centerX();// 文本的内容区域中心点开始绘制
//        int y = (getHeight() / 2) - mRect.centerY();
float weightStatusTextSize = mTextPaint.getTextSize();
canvas.drawText(weightStatus, mSize / 2 - weightWidth / 2, mSize / 2 - dp2px(12) - weightTextSize / 2, mTextPaint);

// 绘制“体重目标”
mTextPaint.setTextSize(dp2px(12));
weightWidth = mTextPaint.measureText(weightTargetDesc);
float targetTextSize = mTextPaint.getTextSize();
canvas.drawText(weightTargetDesc, mSize / 2 - weightWidth / 2, mSize / 2 + weightTextSize, mTextPaint);
}

1、主要是测量视图的宽高，然后通过setMeasuredimension来设置其测量的宽高

高能预警：此处有个坑，天大的坑 ：mRadius 在这里不断的赋值，由于onMeasure不单单执行一次，在测量期间会执行多次，导致mRadius一直在变化，导致逐渐变小或变大，导致视图可能会变的更大或视图不可见，所以这种初始化的赋值，建议放在初始化或ondraw中，就不会有这种问题。。。这里出现问题就直接拿出来跟大家分享，代码我也没改正，圆角渐变代码我并没有改正，但是色环的已经改正了，代码都差不多，自行参考

2、onDraw方法中 首先因为起始角度（0角度）是x轴方向，所以要旋转画布到自己所需要的开始绘制的地方，这里将画布旋转115，即绘制的起始点；此外由于画笔是从画笔的宽度中心点开始绘制的所以mRadius半径mSize减去画笔跨度的一半再除以2,就是画圆的半径 即（

mRadius = (mSize - (mMaxPaintWidth / 2) * 2) / 2

，而后drawArc就是画弧，第一次调用就是画弧的背景，第二次才是画弧的进度，画弧的时候起始角度是从5开始，因为，画笔是从中间开始的，而由于是渐变色（SweepGradent类控制的）前一半圆弧的颜色是往前取的所以会导致有色差，所以起始角度往后一移动5个角度（可根据画笔宽度的一半来取），这也是为什么只旋转115而不是120角度的原因。

二、色环的代码跟圆弧的差不多，依葫芦画瓢，相信读者都有举一反三的能力，这里就不再讲解，需要的可下载demo查看源码

demo:http://download.csdn.net/detail/zhongwn/9531575