小米手环计步数据的展示View

废话少说，先来张效果图

源码下载，欢迎Star
刻度线的绘制：

private void drawnLine(Canvas canvas) {
    for (int i = 0; i < 360; i++) {
        int startX = mCenterX;
        int startY = mCenterY - mRadius + mStrokeWidth / 2;
        int stopX = mCenterX;
        int stopY = startY + mLineDistance;
        canvas.drawLine(startX, startY, stopX, stopY, mPaint);
        //如果数字是正数， 那么表示向右旋转，在这个地方开始作画
        canvas.rotate(1f, mCenterX, mCenterY);
    }
}

进度条的动画绘制

private void resultLoading() {
    final float startDegree = 0f;
    float endDegree = getDegree(mProgress);
    resultAnim = ValueAnimator.ofFloat(startDegree,endDegree);
    resultAnim.setDuration(1000);
    resultAnim.setInterpolator(new LinearOutSlowInInterpolator());
    resultAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float newValue = (float) animation.getAnimatedValue();
            rotateDegree = newValue;
            invalidate();
        }
    });
    resultAnim.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            isLoadingResult = true;
        }
    });
    resultAnim.start();
}

数据加载动画的绘制

private void startLoading() {
    final float startDegree = 0f;
    final float endDegree = 360f;
    secondAnim = ValueAnimator.ofFloat(startDegree, endDegree);
    secondAnim.setDuration(1000);
    secondAnim.setInterpolator(new LinearOutSlowInInterpolator());
    secondAnim.setRepeatMode(ValueAnimator.RESTART);
    secondAnim.setRepeatCount(ValueAnimator.INFINITE);
    secondAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

        private float lastDrawValue = 0;
        private float drawInterval = 0.1f;

        private float lastUpdatePointerValue = 0;
        private float updatePointerInterval = 360 / 60 * 5;

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float newValue = (float) animation.getAnimatedValue();
            float increasedPointerValue = newValue - lastUpdatePointerValue;
            if (increasedPointerValue < 0) {
                increasedPointerValue = endDegree + increasedPointerValue;
            }
            if (increasedPointerValue >= updatePointerInterval) {
                lastUpdatePointerValue = newValue;
            }
            float increasedDrawValue = newValue - lastDrawValue;
            if (increasedDrawValue < 0) {
                increasedDrawValue = endDegree + increasedDrawValue;
            }
            if (increasedDrawValue >= drawInterval) {
                lastDrawValue = newValue;
                rotateSecondPointer += increasedDrawValue;
                invalidate();
            }
        }
    });
    secondAnim.start();
}

源码下载
参考项目：
MiClockView

小米手环 计步数据的展示View

推荐阅读更多精彩内容

小米手环计步数据的展示View