android 自定义view实现仿QQ运动步数进度效果

最近公司在策划一个新的项目,原型还没出来,再说这公司人都要走没了，估计又要找工作了,所以必须要学习,争取每个写个关于自定义view方面的,这样几个月积累下来,也能学习到东西,今天就带来简单的效果,就是仿QQ运动步数的进度条效果.在这就不分析了,直接贴代码,

自定义属性:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="QQMovementView">
        <attr name="defaultCircleColor" format="color|reference"></attr>
        <attr name="ProgressColor" format="color|reference"></attr>
        <attr name="CustomTextColor" format="color|reference"></attr>
        <attr name="CustomTextSize" format="dimension|reference"></attr>
        <attr name="BorderWidth" format="integer|reference"></attr>
        <attr name="ProgressMax" format="integer|reference"></attr>
        <attr name="currentProgress" format="integer|reference"></attr>
        <attr name="CustomStartAngle" format="integer|reference"></attr>
        <attr name="CustomSweepAngle" format="integer|reference"></attr>
    </declare-styleable>
</resources>

自定义View

package com.day01;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
/**
 * Created by zhouguizhijxhz on 2018/5/24.
 */
public class QQMovementView extends View {
    private static final String TAG = "QQMovementView";
    private Paint progressPaint;
    private Paint textPaint;
    private Paint circlePaint;
    private int defaultCircleColor = Color.parseColor("#FF82AB");
    private int defaultTextColor = Color.parseColor("#ff3f3f");
    private int defaultTextSize = 24;
    private int borderWidth = 12;
    private int progressColor = Color.parseColor("#FFA07A");
    private int max = 100;
    private int currentProgress = 10;
    private int startAngle = 135;
    private int sweepAngle = 270;

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

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

    public QQMovementView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initAttrs(context, attrs);
        initTextPaint(context);
        initCirclePaint();
        initProgressPaint();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = measureWidth(widthMeasureSpec);
        int height = measureHeight(heightMeasureSpec);
        setMeasuredDimension(Math.min(width, height), Math.min(width, height));
    }

    private int measureHeight(int heightMeasureSpec) {
        int mode = MeasureSpec.getMode(heightMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        if (mode == MeasureSpec.AT_MOST) {
            height = 360;
        }
        return height;
    }

    private int measureWidth(int widthMeasureSpec) {
        int mode = MeasureSpec.getMode(widthMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        if (mode == MeasureSpec.AT_MOST) {
            width = 360;
        }
        return width;
    }

    private void initProgressPaint() {
        progressPaint = new Paint();
        progressPaint.setColor(progressColor);
        progressPaint.setStrokeWidth(borderWidth);
        progressPaint.setStyle(Paint.Style.STROKE);
        progressPaint.setStrokeCap(Paint.Cap.ROUND);
        progressPaint.setAntiAlias(true);
    }

    private void initCirclePaint() {
        circlePaint = new Paint();
        circlePaint.setColor(defaultCircleColor);
        circlePaint.setStrokeWidth(borderWidth);
        circlePaint.setStyle(Paint.Style.STROKE);
        circlePaint.setStrokeCap(Paint.Cap.ROUND);
        circlePaint.setAntiAlias(true);
    }

    private void initTextPaint(Context context) {
        textPaint = new Paint();
        textPaint.setColor(defaultTextColor);
        textPaint.setTextSize(sp2px(context,defaultTextSize));
    }

    private void initAttrs(Context context, AttributeSet attrs) {
        if (null == context || null == attrs) {
            return;
        }
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.QQMovementView);
        defaultCircleColor = typedArray.getColor(R.styleable.QQMovementView_defaultCircleColor, defaultCircleColor);
        defaultTextColor = typedArray.getColor(R.styleable.QQMovementView_CustomTextColor, defaultTextColor);
        defaultTextSize = typedArray.getDimensionPixelSize(R.styleable.QQMovementView_CustomTextSize, defaultTextSize);
        progressColor = typedArray.getColor(R.styleable.QQMovementView_ProgressColor, progressColor);
        borderWidth = typedArray.getInteger(R.styleable.QQMovementView_BorderWidth, borderWidth);
        max = typedArray.getInteger(R.styleable.QQMovementView_ProgressMax,max);
        currentProgress = typedArray.getInteger(R.styleable.QQMovementView_currentProgress,currentProgress);
        startAngle = typedArray.getInteger(R.styleable.QQMovementView_CustomStartAngle,startAngle);
        sweepAngle = typedArray.getInteger(R.styleable.QQMovementView_CustomSweepAngle,sweepAngle);
        Log.e(TAG,"max--->"+max);
        Log.e(TAG,"currentProgress--->"+currentProgress);
        typedArray.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawArc(canvas);
        drawProgressArc(canvas);
        drawProgressText(canvas);
    }

    private void drawProgressText(Canvas canvas) {
        if (null == canvas) {
            return;
        }
        String strPercent = String.valueOf(currentProgress);
        Paint.FontMetricsInt fm = textPaint.getFontMetricsInt();
        canvas.drawText(strPercent, getWidth() / 2 - textPaint.measureText(strPercent) / 2,
                getHeight() / 2 - (fm.bottom + fm.top) / 2, textPaint);
    }

    private void drawProgressArc(Canvas canvas) {
        if (null == canvas) {
            return;
        }
        if (max == 0) {
            return;
        }
        if (currentProgress == 0) {
            return;
        }
        RectF rectF = new RectF(borderWidth / 2, borderWidth / 2, getMeasuredWidth() - borderWidth / 2, getMeasuredHeight() - borderWidth / 2);
        float percent = (float) currentProgress / max;
        Log.e(TAG,"percent------->"+percent);
        canvas.drawArc(rectF, startAngle, sweepAngle * percent, false, progressPaint);
    }

    private void drawArc(Canvas canvas) {
        if (null == canvas) {
            return;
        }
        RectF rectF = new RectF(borderWidth / 2, borderWidth / 2, getMeasuredWidth() - borderWidth / 2, getMeasuredHeight() - borderWidth / 2);
        canvas.drawArc(rectF, startAngle, sweepAngle, false, circlePaint);
    }

    public static int sp2px(Context context, float spValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (spValue * fontScale + 0.5f);
    }

    public void setMax(int max) {
        this.max = max;
    }

    public void setCurrentProgress(int currentProgress) {
        this.currentProgress = currentProgress;
    }
}

布局:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <com.day01.QQMovementView
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:layout_centerHorizontal="true"
        android:layout_marginRight="60dp"
        android:layout_marginTop="60dp"
        app:currentProgress="30"
        app:ProgressMax="200"
         />
</RelativeLayout>

效果: