（ST）自定义View - 仿QQ运动步数效果

1. 说明

---

基于前边两次的自定义入门、自定义TextView的知识，这节课我们来实现一个效果，就是仿QQ运动步数效果，效果图如下：

图片.png

2.分析

---

如图所示，可以分为3个部分来实现：

QQ运动步数效果分析.png

第1部分：固定不动的大圆弧（蓝色），color、borderWidth；
第2部分：变化的小圆弧（红色），color、borderWidth；
第3部分：中间变化的文字，textSize、textColor；

3. 代码分析

3.1 创建attrs.xml文件

3.2 自定义QQStepView.java

/**
 * Email: [email protected]
 * Created by JackChen 2018/3/18 8:10
 * Version 1.0
 * Params:
 * Description:   仿QQ运动步数
*/

public class QQStepView extends View {

    // 外圆弧颜色
    private int mOurterColor = Color.RED ;
    // 内圆弧颜色
    private int mInnerColor = Color.BLUE ;
    // 圆弧宽度
    private int mBorderWidth = 20 ; //20px
    // 文字大小
    private int mStepTextSize ;
    // 文字颜色
    private int mStepTextColor ;

    // 外圆弧画笔、内圆弧画笔、文字画笔
    private Paint mOuterPaint , mInnerPaint , mTextPaint ;

    // 总共步数
    private int mStepMax = 0 ;
    // 当前步数
    private int mCurrentStep = 0 ;


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

    public QQStepView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public QQStepView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        // 1. 创建attrs.xml文件，编写自定义属性
        // 2. 在布局中使用
        // 3. 在自定义View中获取自定义属性
        // 4. 测量onMeasure()
        // 5. 绘制固定圆弧、变化圆弧、文字

        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.QQStepView);
        mOurterColor = array.getColor(R.styleable.QQStepView_outerColor , mOurterColor) ;
        mInnerColor = array.getColor(R.styleable.QQStepView_innerColor , mInnerColor) ;
        mBorderWidth = array.getDimensionPixelSize(R.styleable.QQStepView_borderWidth , mBorderWidth) ;
        mStepTextSize = array.getDimensionPixelSize(R.styleable.QQStepView_stepTextSize , mStepTextSize) ;
        mStepTextColor = array.getColor(R.styleable.QQStepView_stepTextColor , mStepTextColor) ;
        array.recycle();


        // 外圆弧画笔
        mOuterPaint = new Paint() ;
        mOuterPaint.setAntiAlias(true);
        mOuterPaint.setStrokeWidth(mBorderWidth);
        mOuterPaint.setColor(mOurterColor);
        mOuterPaint.setStrokeCap(Paint.Cap.ROUND);
        mOuterPaint.setStyle(Paint.Style.STROKE); //画笔空心

        // 内圆弧画笔
        mInnerPaint = new Paint() ;
        mInnerPaint.setAntiAlias(true);
        mInnerPaint.setStrokeWidth(mBorderWidth);
        mInnerPaint.setColor(mInnerColor);
        mInnerPaint.setStrokeCap(Paint.Cap.ROUND);
        mInnerPaint.setStyle(Paint.Style.STROKE); //画笔空心

        // 文字画笔
        mTextPaint = new Paint() ;
        mTextPaint.setAntiAlias(true);
        mTextPaint.setColor(mStepTextColor);
        mTextPaint.setTextSize(mStepTextSize);
    }



    // 画外圆弧、内圆弧、文字
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 调用者可能会在布局文件中给宽高设置 wrap_content
        // 这里确保：如果宽高不一致，则取最小值，确保是一个正方形

        int width = MeasureSpec.getSize(widthMeasureSpec) ;
        int height = MeasureSpec.getSize(heightMeasureSpec) ;
        setMeasuredDimension(width>height?height:width , width>height?height:width);
    }


    @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 , mOuterPaint);
        if (mStepMax ==0) return;


        // 画内圆弧  肯定不能写死，使用百分比，让使用者从外边传递
        float sweepAngle = (float) mCurrentStep/mStepMax ;
        canvas.drawArc(rectF , 135 , sweepAngle*270 , false , mInnerPaint);


        // 画文字
        String stepText = mCurrentStep+"" ;
        Rect rect = new Rect() ;
        mTextPaint.getTextBounds(stepText,0,stepText.length(),rect);

        int dx = getWidth()/2 - rect.width()/2 ;

        // 基线baseLine
        Paint.FontMetricsInt fontMetrics = mTextPaint.getFontMetricsInt();
        int dy = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom ;
        int baseLine = getHeight()/2 + dy ;
        canvas.drawText(stepText , dx , baseLine , mTextPaint);
    }


    /**
     * 最大步数
     * 在这里添加 synchronized，目的就是防止多线程操作
     */
    public synchronized void setStepMax(int stepMax){
        this.mStepMax = stepMax ;
    }


    /**
     * 当前步数
     * 在这里添加 synchronized，目的就是防止多线程操作
     */
    public synchronized void setCurrentStep(int currentStep){
        this.mCurrentStep = currentStep ;
        // 根据效果可以看到，圆弧和文字一直在变，所以就知道，是不断的重新绘制
        invalidate();
    }
}

3.3 MainActivity.java代码如下：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final QQStepView step_view = (QQStepView) findViewById(R.id.step_view);
        step_view.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();
                step_view.setCurrentStep((int) currentStep);
            }
        });
        valueAnimator.start();
    }
}

3.4 activity_main.xml布局文件如下：

具体代码已上传至github：
https://github.com/shuai999/View_day03_2.git