前言
刚到简书不久，看了好多五分钟学会系列。今天我也来分享个五分钟学会，也许能帮到大家。先上图：
没错，就是圆形刻度的进度条，刻度颜色是渐变的，下面的SeekBar是用来做对比的。接下来讲怎么实现。
刻度
如何画一个刻度呢？Canvas类提供了方法
public void drawArc(@NonNull RectF oval,float startAngle,float sweepAngle,boolean useCenter,
@NonNull Paintpaint)
startAngle：起始角度
sweepAngle：从起始到结束的角度。试一下效果：
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(Color.GRAY);
........
canvas.drawArc(mRect, 0, 3, false, mPaint);
canvas.drawArc(mRect, 9, 3, false, mPaint);
渐变
一开始想到用环形渐变SweepGradient：Paint.setShader(SweepGradient),结果效果不理想，改用ArgbEvaluator：
mPaint.setColor((Integer) mArgbEvaluator.evaluate(i * (mBlockAngle + mTickSplitAngle)/(360), mGradientStartColor ,mGradientEndColor));
该方法的内部实现请看：
public Object evaluate(float fraction, Object startValue, Object endValue) {
int startInt = (Integer) startValue;
int startA = (startInt >> 24) & 0xff;
int startR = (startInt >> 16) & 0xff;
int startG = (startInt >> 8) & 0xff;
int startB = startInt & 0xff;
int endInt = (Integer) endValue;
int endA = (endInt >> 24) & 0xff;
int endR = (endInt >> 16) & 0xff;
int endG = (endInt >> 8) & 0xff;
int endB = endInt & 0xff;
return (int)((startA + (int)(fraction * (endA - startA))) << 24) |
(int)((startR + (int)(fraction * (endR - startR))) << 16) |
(int)((startG + (int)(fraction * (endG - startG))) << 8) |
(int)((startB + (int)(fraction * (endB - startB))));
}
总结
刻度和渐变都解决了，接下去就比较简单了，设定每个刻度的角度、间隔角度，计算出刻度数量 = 360 / （刻度角度 + 间隔角度），然后依次drawArc即可。
完整代码
package com.zhb.customview;
import android.animation.ArgbEvaluator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.view.View;
/**
* Created by zhb on 2017/2/26.
*/
public class CircleProgressBar extends View {
private Object lock = new Object();
/**默认刻度间隔角度*/
private final int TICK_SPLIT_DEFAULT_ANGLE = 3;
/**默认刻度角度*/
private final int TICK_BLOCK_DEFAULT_ANGLE = 3;
/**默认刻度长度*/
private final float NORMAL_TICK_DEFAULT_SIZE = 60;
/**默认当前刻度长度*/
private final float CURRENT_TICK_DEFAULT_SIZE = 85;
/**默认渐变起始颜色*/
private final int GRADIENT_START_DEFAULT_COLOR = Color.GREEN;
/**默认渐变结束颜色*/
private final int GRADIENT_END_DEFAULT_COLOR = Color.RED;
private final int TICK_NORMAL_DEFAULT_COLOR = Color.GRAY;
private Paint mPaint;
/**刻度数量*/
private int mTotalTickCount;
/**刻度间隔*/
private float mTickSplitAngle;
/**正常刻度的长度*/
private float mNormalTickSize;
/**当前刻度的长度*/
private float mCurrentTickSize;
/**渐变起始颜色*/
private int mGradientStartColor;
/**渐变结束颜色*/
private int mGradientEndColor;
/**刻度未选中颜色*/
private int mTickNormalColor;
/**当前进度*/
private int mCurrentProgressPercent;
/**直径*/
private int mCircleWidth;
/**刻度角度*/
private float mBlockAngle;
private RectF mRect;
private ArgbEvaluator mArgbEvaluator;
private Thread uiThread;
public CircleProgressBar(Context context) {
this(context, null, 0);
}
public CircleProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomProgressBar, defStyleAttr, 0);
init(typedArray);
}
private void init(TypedArray typedArray){
mTickSplitAngle = typedArray.getDimension(R.styleable.CustomProgressBar_tick_split_angle, TICK_SPLIT_DEFAULT_ANGLE);
mNormalTickSize = typedArray.getDimension(R.styleable.CustomProgressBar_normal_tick_size, NORMAL_TICK_DEFAULT_SIZE);
mCurrentTickSize = typedArray.getDimension(R.styleable.CustomProgressBar_current_tick_size, CURRENT_TICK_DEFAULT_SIZE);
mBlockAngle =typedArray.getDimension(R.styleable.CustomProgressBar_tick_block_angle, TICK_BLOCK_DEFAULT_ANGLE);
mGradientStartColor = typedArray.getColor(R.styleable.CustomProgressBar_gradient_start_color, GRADIENT_START_DEFAULT_COLOR);
mGradientEndColor = typedArray.getColor(R.styleable.CustomProgressBar_gradient_start_color, GRADIENT_END_DEFAULT_COLOR);
mTickNormalColor = typedArray.getColor(R.styleable.CustomProgressBar_tick_normal_color, TICK_NORMAL_DEFAULT_COLOR);
typedArray.recycle();
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
mTotalTickCount = (int)( 360f /(mTickSplitAngle+mBlockAngle));//确保刻度数量为整数
uiThread=Thread.currentThread();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = measureHanlder(widthMeasureSpec);
int height = measureHanlder(heightMeasureSpec);
mCircleWidth = (width < height) ? width : height;
setMeasuredDimension(mCircleWidth, mCircleWidth);
float padding = mCurrentTickSize/2;
mRect = new RectF(padding, padding, mCircleWidth-padding, mCircleWidth-padding);
mArgbEvaluator = new ArgbEvaluator();
}
private int measureHanlder(int measureSpec){
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
result = specSize;
} else if (specMode == MeasureSpec.AT_MOST) {
result = Math.max(result, specSize);
}
return result;
}
@Override
protected void onDraw(Canvas canvas) {
final int currentBlockIndex =(int) (mCurrentProgressPercent / 100f * mTotalTickCount);
for (int i = 0; i < mTotalTickCount; i++) {
if(i == currentBlockIndex -1){
//当前刻度，刻度长度较长
mPaint.setStrokeWidth(mCurrentTickSize);
mPaint.setColor((Integer) mArgbEvaluator.evaluate(i * (mBlockAngle + mTickSplitAngle)/(360), mGradientStartColor ,mGradientEndColor));
}else if( i < currentBlockIndex){
//已选中的刻度
mPaint.setStrokeWidth(mNormalTickSize);
mPaint.setColor((Integer) mArgbEvaluator.evaluate(i * (mBlockAngle + mTickSplitAngle)/(360), mGradientStartColor ,mGradientEndColor));
}
else {
//未选中的刻度
mPaint.setStrokeWidth(mNormalTickSize);
mPaint.setColor(mTickNormalColor);
}
canvas.drawArc(mRect, i * (mBlockAngle + mTickSplitAngle), mBlockAngle, false, mPaint);
}
}
/**
* 设置进度
* @param percent 百分百
*/
public void setProgress(int percent){
mCurrentProgressPercent =percent;
synchronized (lock){
if(Thread.currentThread() != uiThread){
postInvalidate();
}
else{
invalidate();
}
}
}
}
是不是很简单，用不了五分钟 _完整demo请看Github
