最近在跟大牛在学习自定义view的时候，跟着他们写了一个步数计数，效果如下：
device-2017-06-25-094806.gif
效果实现的大致一个思路：
1：写一个类继承自view
2：自定义一些属性，这样可以在布局文件中直接使用
3：在onMeasure方法中进行测量
4：在onDraw方法中进行绘制
5：提供参数设置的方法
在继承view的时候需要实现一些构造方法：
public QQStepView(Context context) {
this(context, null);
}
public QQStepView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public QQStepView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initAttrs(context, attrs);
initPaint();
}
这里说下这三个构造方法会在什么情况下调用，第一构造方法会在java文件中直接new的时候调用，第二个构造方法是在布局文件中使用的时候调用，第三个构造方法是在布局文件中使用并设有style样式的时候调用，将第一个和第二个改为this，这样不管在什么情况下使用都会统一调用第三个构造方法，接下来在第三个构造方法中初始化自定义属性和画笔；
初始化自定义属性：
private void initAttrs(Context context, AttributeSet attrs) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.QQStepView);
mOuterColor = array.getColor(R.styleable.QQStepView_outerColor, mOuterColor);
mInnerColor = array.getColor(R.styleable.QQStepView_innerColor, mInnerColor);
mStepTextColor = array.getColor(R.styleable.QQStepView_stepTextColor, mStepTextColor);
mBorderWidth = (int) array.getDimension(R.styleable.QQStepView_borderWidth, mBorderWidth);
mStepTextSize = array.getDimensionPixelSize(R.styleable.QQStepView_stepTextSize, mStepTextSize);
//回收
array.recycle();
}
在初始化属性后要记得回收；
初始化画笔：
private void initPaint(){
outPaint = new Paint();
//抗锯齿
outPaint.setAntiAlias(true);
outPaint.setStrokeWidth(mBorderWidth);
outPaint.setColor(mOuterColor);
//画笔空心
outPaint.setStyle(Paint.Style.STROKE);
outPaint.setStrokeCap(Paint.Cap.ROUND);
innerPaint = new Paint();
innerPaint.setAntiAlias(true);
innerPaint.setStrokeWidth(mBorderWidth);
innerPaint.setColor(mInnerColor);
//画笔空心
innerPaint.setStyle(Paint.Style.STROKE);
innerPaint.setStrokeCap(Paint.Cap.ROUND);
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setColor(mStepTextColor);
mTextPaint.setTextSize(mStepTextSize);
}
接着就是在onMeasure中进行测量了：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//获取宽高模式模式
int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
//获取宽高值
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
//判断模式是否是wrap_content
if (modeWidth == MeasureSpec.AT_MOST) {
width = dp2px(80);
}
if (modeHeight == MeasureSpec.AT_MOST) {
height = dp2px(80);
}
//宽度和高度不一致的时候取最小值
width = width > height ? height : width;
height = width > height ? height : width;
setMeasuredDimension(width, height);
}
在这里的做了一个宽高模式的判断，如果是MeasureSpec.AT_MOST也就是wrap_content的时候就将宽和高设置为固定大小，同时如果宽高设置的不一致的时候，取其中的最小值进行测量绘制；
现在可以在onDraw方法中进行绘制了：
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制外弧 描边问题
RectF rectf = new RectF(mBorderWidth / 2, mBorderWidth / 2, getWidth() - mBorderWidth / 2, getHeight() - mBorderWidth / 2);
canvas.drawArc(rectf, 135, 270, false, outPaint);
//绘制内弧
if (mStepMax == 0) {
return;
}
float swweepAngle = (float) mCurrentStep / mStepMax;
canvas.drawArc(rectf, 135, swweepAngle * 270, false, innerPaint);
//绘制文字
String stepText = mCurrentStep + "";
Rect rect = new Rect();
mTextPaint.getTextBounds(stepText, 0, stepText.length(), rect);
int dx = getWidth() / 2 - rect.width() / 2;
//基线
Paint.FontMetricsInt metricsInt = mTextPaint.getFontMetricsInt();
int dy = (metricsInt.bottom - metricsInt.top) / 2 - metricsInt.bottom;
int baseLine = getHeight() / 2 + dy;
canvas.drawText(stepText, dx, baseLine, mTextPaint);
}
因为在布局文件中时候的时候就会调用onDraw方法但是这个时候还没有设置mStepMax 值还为0，在计算
float swweepAngle = (float) mCurrentStep / mStepMax;
就会出错，所以做了下判断，下面还提供了两个方法；
设置最大步数：
public synchronized void setStepMax(int stepMax){
this.mStepMax=stepMax;
}
设置当前步数：
public synchronized void setCurrentStep(int currentStep){
this.mCurrentStep=currentStep;
//不断的去绘制
invalidate();
}
在设置当前步数里面调用invalidate方法就会不停的调用onDraw方法进行绘制，到这里效果就实现的差不多了，在java文件中调用时，设置一些属性动画就可以了；
final QQStepView stepView = (QQStepView) findViewById(R.id.stepView);
stepView.setStepMax(10000);
//属性动画
ValueAnimator valueAnimator = ObjectAnimator.ofFloat(0, 6123);
valueAnimator.setDuration(2000);
//插值器
valueAnimator.setInterpolator(new DecelerateInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float animatedValue = (float) animation.getAnimatedValue();
stepView.setCurrentStep((int) animatedValue);
}
});
valueAnimator.start();
在使用属性动画的时候要注意animation.getAnimatedValue();返回的是一个Object，在这里强转成float型，不能转成int要不会报转换异常的错误；
这样就实现上面的效果了，上面写的有什么问题，欢迎交流。
源码地址：http://pan.baidu.com/s/1eSAFa4y
