自定义开源控件的绘制实例-——类似支付宝信用值的进度条

本文链接：https://blog.csdn.net/nnmmbb/article/details/77897107

首先看看效果图：（录屏没录好，真实效果还是很流畅的）

项目工期太忙了，没空讲解了，直接粘代码了，就一个类：

package com.example.huaweiweatherview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathDashPathEffect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

import java.util.Timer;
import java.util.TimerTask;

public class HealthWheelView extends View {
    // 画圆弧的画笔
    private Paint backGroundCirclePaint;

    private Paint innerCirclePaint;

    private Paint progressCirclepaint;

    private Paint linePaint;

    private Paint textPaint;

    private int score = 0;

    private int toScore = 0;

    // 正方形的宽高
    private int len;
    // 圆弧的半径
    private float radius;
    // 矩形
    private RectF oval;

    // 圆弧的起始角度
    private float startAngle = 120;

    // 圆弧的经过总范围角度角度
    private float sweepAngle = 300;

    // 当前扫过的角度
    private float sweepingAngle = 0;

    //当前最终目标旋转角度
    private float targetAngle = 0;

    //上一次目标旋转角度
    private float preTargetAngle = 0;

    float stepAngel = sweepAngle / 50;     //每两个刻度相差的角度

    float scorePerAngle = sweepAngle / 100; //总共满分100分，300度


    public HealthWheelView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * 设置动画效果，开启子线程定时绘制
     *
     * @param trueAngle
     */
    int state = 1;
    private boolean isRunning;

    public void change(final int toScore) {

        preTargetAngle = targetAngle;
        targetAngle = toScore * scorePerAngle;

        if (isRunning) {
            return;
        }
        final Timer timer = new Timer();
        if (targetAngle > preTargetAngle) {
            state = 1;
        } else {
            state = 2;
        }
        timer.schedule(new TimerTask() {

            @Override
            public void run() {
                switch (state) {
                    case 1:
                        // 开始增加
                        isRunning = true;
                        sweepingAngle += 2;
                        if (sweepingAngle >= targetAngle) {// 如果画过刻度大于等于真实角度
                            sweepingAngle = targetAngle;   //要画到多少角度
                            isRunning = false;
                            timer.cancel();
                        }
                        break;
                    case 2:
                        isRunning = true;
                        sweepingAngle -= 2;
                        if (sweepingAngle <= targetAngle) {
                            sweepingAngle = targetAngle;
                            isRunning = false;
                            timer.cancel();
                        }
                        break;
                    default:
                        break;
                }
                // 计算当前比例应该的多少分
                score = (int) (sweepingAngle / 300 * 100);
                postInvalidate();
            }
        }, 500, 30);

    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        // 通过测量规则获得宽和高
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        // 取出最小值
        len = Math.min(width, height);
        oval = new RectF(0, 0, len, len);
        radius = len / 2;
        setMeasuredDimension(len, len);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        //画底部的圆阴影
        drawBackgroundCircle(canvas);

        //画内部的虚线圆
        drawInnerDashCircle(canvas);

        // 画刻度线内的内容
        drawLine(canvas);

        //画文本
        drawText(canvas);

    }

    private void drawInnerDashCircle(Canvas canvas) {
        // 保存之前的画布状态
        canvas.save();
        innerCirclePaint = new Paint();
        innerCirclePaint.setAntiAlias(true);
        innerCirclePaint.setStrokeWidth(5);
        innerCirclePaint.setColor(Color.parseColor("#cccccc"));
        innerCirclePaint.setStyle(Paint.Style.STROKE);
//        innerCirclePaint.setPathEffect(new DashPathEffect(new float[]{10, 10}, 5));
        Path path = new Path();
        path.addCircle(0, 0, 3, Path.Direction.CW);
        innerCirclePaint.setPathEffect(new PathDashPathEffect(path, 15, 0, PathDashPathEffect.Style.ROTATE));


        RectF innerRectF = new RectF(100, 100, radius * 2 - 100, radius * 2 - 100);
        canvas.drawArc(innerRectF, startAngle, sweepAngle, false, innerCirclePaint);
        canvas.restore();
    }


    private void drawBackgroundCircle(Canvas canvas) {
        // 保存之前的画布状态
        canvas.save();
        backGroundCirclePaint = new Paint();
        backGroundCirclePaint.setColor(Color.parseColor("#FAFAFA"));
        backGroundCirclePaint.setAntiAlias(true);
        backGroundCirclePaint.setStyle(Paint.Style.STROKE);
        backGroundCirclePaint.setStrokeWidth(70);
        RectF backgroundOval = new RectF(35, 35, radius * 2 - 35, radius * 2 - 35);
        canvas.drawArc(backgroundOval, startAngle, sweepAngle, false, backGroundCirclePaint);
        canvas.restore();
    }


    /**
     * 实现画刻度线内的内容
     *
     * @param canvas
     */
    private void drawText(Canvas canvas) {
        // 保存之前的画布状态
        canvas.save();
        textPaint = new Paint();
        textPaint.setARGB(255, 0, 0, 0);
        textPaint.setAntiAlias(true);

        textPaint.setTextAlign(Paint.Align.CENTER);
        textPaint.setTextSize(radius * 2 / 3);
        canvas.drawText("" + score, radius, radius * 6 / 5, textPaint);
        textPaint.setTextSize(radius / 6);
        canvas.drawText("曝光值", radius, radius + radius / 2, textPaint);

    }


    /**
     * 实现画刻度线的功能
     *
     * @param canvas
     */
    private void drawLine(final Canvas canvas) {
        // 保存之前的画布状态
        canvas.save();
        // 移动画布，实际上是改变坐标系的位置
        canvas.translate(radius, radius);
        // 旋转坐标系,需要确定旋转角度
        canvas.rotate(30);
        // 初始化画笔
        linePaint = new Paint();
        // 设置画笔的宽度（线的粗细）
        linePaint.setStrokeWidth(8);
        // 设置抗锯齿
        linePaint.setAntiAlias(true);

        linePaint.setColor(getResources().getColor(R.color.main_yellow));
        // 累计叠加的角度
        float c = 0;
        for (int i = 0; i <= 50; i++) {
            if (c < sweepingAngle && sweepingAngle != 0) {// 如果累计画过的角度，小于当前有效刻度
                canvas.drawLine(0, radius - 20, 0, radius - 70, linePaint);
                // 画过的角度进行叠加
                c += stepAngel;
            } else if (c == sweepingAngle) {
                canvas.drawLine(0, radius, 0, radius - 70, linePaint);
                canvas.drawCircle(0, radius - 70, 8, linePaint);
//                BitmapDrawable drawable = (BitmapDrawable) getResources().getDrawable(R.mipmap.task_pointer);
//                canvas.drawBitmap(drawable.getBitmap(), -10, 180, linePaint);
                // 画过的角度进行叠加
                c += stepAngel;
            } else {
                linePaint.setColor(Color.parseColor("#E9E9E9"));
                canvas.drawLine(0, radius - 20, 0, radius - 70, linePaint);

            }

            //旋转画布
            canvas.rotate(stepAngel);
        }
        // 恢复画布状态。
        canvas.restore();
    }

}

使用：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical"
    android:padding="20dp"
    tools:context="com.zhugefang.huaweiweatherview.MainActivity">

    <com.zhugefang.huaweiweatherview.HealthWheelView

        android:id="@+id/mv"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center_horizontal" />

</LinearLayout>

package com.zhugefang.huaweiweatherview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TextView tv;
    HealthWheelView mv;
    LinearLayout ll;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity_huawei);
        mv = (HealthWheelView) findViewById(R.id.mv);
        mv.change(30);
        ll = (LinearLayout) findViewById(R.id.ll);

        mv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mv.change(100);
            }
        });

    }
}

参考资料：

http://blog.csdn.net/android_hl/article/details/70455018

http://www.jianshu.com/p/75cc93195f7a?from=jiantop.com