(ST)自定义View - 仿QQ运动步数效果

字数 186阅读 22

1. 说明


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


图片.png

2.分析


如图所示,可以分为3个部分来实现:


QQ运动步数效果分析.png

第1部分:固定不动的大圆弧(蓝色),color、borderWidth;
第2部分:变化的小圆弧(红色),color、borderWidth;
第3部分:中间变化的文字,textSize、textColor;

3. 代码分析

3.1 创建attrs.xml文件
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- 自定义属性 -->
   <declare-styleable name="QQStepView">
       <attr name="outerColor" format="color"/>
       <attr name="innerColor" format="color"/>
       <attr name="borderWidth" format="dimension"/>
       <attr name="stepTextColor" format="color"/>
       <attr name="stepTextSize" format="dimension"/>
   </declare-styleable>
</resources>

3.2 自定义QQStepView.java

/**
 * Email: 2185134304@qq.com
 * 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布局文件如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.jackchen.view_day03_2.MainActivity">


    <com.jackchen.view_day03_2.QQStepView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:borderWidth="20dp"
        app:outerColor="@color/colorPrimary"
        app:innerColor="@color/colorAccent"
        app:stepTextSize="30sp"
        app:stepTextColor="@color/colorAccent"
        android:id="@+id/step_view"
        />

</RelativeLayout>

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

推荐阅读更多精彩内容