如果你留意的話，在QQ和支付寶都有運動步數(shù)控件凶掰，今天簡單實現(xiàn)一個簡單的運動步數(shù)效果

1.自定義屬性

不做過多解釋，直接上代碼

 <declare-styleable name="stepsView">
    <attr name="outerColor" format="color"/>
    <attr name="interColor" format="color"/>
    <attr name="borderWidth" format="dimension"/>
    <attr name="stepTextSize" format="dimension"/>
    <attr name="stepTextColor" format="color"/>
</declare-styleable>

 public class stepsView extends View {

 //初始化默認值
private int mOuterColor= Color.RED;
private int mInterColor=Color.BLUE;
private int mBorderWidth=20;
private int mStepTextSize=15;
private int mStepTextColor=Color.RED;
private Paint mOutPaint,mIntPaint,mTextPaint;

//最大和當前步數(shù)
private int mStepsMax=50000;
private int mCurrentStep=10000;

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

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

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

    //1.確定自定義屬性
    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.stepsView);
    mOuterColor=array.getColor(R.styleable.stepsView_outerColor, mOuterColor);
    mInterColor=array.getColor(R.styleable.stepsView_interColor,mInterColor);
    mStepTextColor=array.getColor(R.styleable.stepsView_stepTextColor, mStepTextColor);
    mBorderWidth=(int)array.getDimension(R.styleable.stepsView_borderWidth,mBorderWidth);
    mStepTextSize=array.getDimensionPixelSize(R.styleable.stepsView_stepTextSize,mStepTextSize);
    array.recycle();

}

2.測量

 @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    //調(diào)用者在布局文件中可能 wrap_content
    //獲取模式 AT_most

    //寬高不一致 取最小值 確保是個正方形
   int width= MeasureSpec.getSize(widthMeasureSpec);
   int height= MeasureSpec.getSize(heightMeasureSpec);

    setMeasuredDimension(width>height?height:width,width>height?height:width);

} 

3.畫外圓弧

    //外圓弧 畫筆
    mOutPaint=new Paint();
    mOutPaint.setAntiAlias(true);
    mOutPaint.setStrokeWidth(mBorderWidth);
    mOutPaint.setColor(mOuterColor);
    //圓形結束
    mOutPaint.setStrokeCap(Paint.Cap.ROUND);
    mOutPaint.setStyle(Paint.Style.STROKE);//畫筆空心

    //中心點
    int center= getWidth()/2;
    //半徑
    int radius=getWidth()/2-mBorderWidth/2;
    //矩形
    RectF rectF=new RectF(center-radius,center-radius,center+radius,center+radius);
    canvas.drawArc(rectF,135,270,false,mOutPaint);

3.畫內(nèi)圓弧

  //內(nèi)圓弧 畫筆
    mIntPaint=new Paint();
    mIntPaint.setAntiAlias(true);
    mIntPaint.setStrokeWidth(mBorderWidth);
    mIntPaint.setColor(mInterColor);
    //圓形結束
    mIntPaint.setStrokeCap(Paint.Cap.ROUND);
    mIntPaint.setStyle(Paint.Style.STROKE);//畫筆空心


     if (mStepsMax==0)return;
     float sweepAngle= (float)mCurrentStep/mStepsMax;
     canvas.drawArc(rectF,135,sweepAngle*270,false,mIntPaint);

4.繪制文字

   //內(nèi)圓弧 畫筆
    mTextPaint=new Paint();
    mTextPaint.setAntiAlias(true);
    mTextPaint.setColor(mStepTextColor);
    mTextPaint.setTextSize(mStepTextSize);

   String stepText=mCurrentStep+"步";
    Rect textBounds=new Rect();
    mTextPaint.getTextBounds(stepText, 0, stepText.length(), textBounds);
    int dx=getWidth()/2-textBounds.width()/2;
    //基線
    Paint.FontMetricsInt fontMetricsInt = mTextPaint.getFontMetricsInt();
    int dy=(fontMetricsInt.bottom-fontMetricsInt.top)/2-fontMetricsInt.bottom;
     int baseline=getHeight()/2 +dy;
    canvas.drawText(stepText,dx,baseline,mTextPaint);

5.完善

   public synchronized void setStepMax(int stepMax){
     this.mStepsMax=stepMax;
    }
   public synchronized void setCurrentStep(int currentStep){
    this.mCurrentStep=currentStep;

    //不斷繪制
    invalidate();
   }

5.設置屬性動畫和使用

   stepView = (stepsView) findViewById(R.id.step_view);
    stepView.setStepMax(4000);

    //屬性動畫
  ValueAnimator valueAnimator= ObjectAnimator.ofFloat(0, 3000);
  valueAnimator.setDuration(1000);
  valueAnimator.setInterpolator(new DecelerateInterpolator());
  valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float currentstep = (float) animation.getAnimatedValue();
            stepView.setCurrentStep((int)currentstep);

        }
    });
    valueAnimator.start();