自定義開源控件的繪制執行個體-——類似支付寶信用值的進度條

首先看看效果圖：（錄屏沒錄好，真實效果還是很流暢的）

項目工期太忙了，沒空講解了，直接粘代碼了，就一個類：

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

自定義開源控件的繪制執行個體-——類似支付寶信用值的進度條

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯