Android 仪表盘

1：概述

1. 在以前的项目中，需要实现一个根据用户的压力值显示不同的进度（类似仪表盘）圆弧的进度条。
2. 实现的原理其实很简单 ，自定义View 重写onDraw（）方法在里面同一圆心画三个不同半径颜色实心圆弧，主要了解canvas.drawArc(rectF, startAngle, sweepAngle, true, mPaint);的使用，五个参数的意思分别表示，圆弧的位置和大小，圆弧开始角度，圆弧的结束角度，是否经过圆心，画笔， 我们只要动态改变 sweepAngle 参数就能达到我们想要的效果，废话不多说，直接看代码。

说了一大推先上个效果图

下面是实现代码

自定义的CustomSectorView.java

package com.example.wem.sectorviewdemo.widget;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

public class CustomSectorView extends View {

    private static final String TAG = CustomSectorView.class.getSimpleName();
    private float startAngle = 180, sweepAngle = 180;
    private float pointerStartAngle = 180, pointerSweepAngle = 0;
    private Paint mPaint;

    public CustomSectorView(Context context) {
        super(context);
    }

    public CustomSectorView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        float width = getWidth();
        float height = getHeight();
        int left = (int) (width / 6 + 0.5f);
        Log.d(TAG, "onDraw: width==" + width + " height==" + height);
        RectF rectF = new RectF(0, 0, width, height); //设置圆弧的位置和大小
        mPaint.setColor(0xff8bc5ba);//设置画笔颜色
        mPaint.setAntiAlias(true);//取消锯齿
        mPaint.setStrokeWidth(5);//设置画笔宽度
        mPaint.setStyle(Paint.Style.FILL);//设置画笔为填充模式
        canvas.drawArc(rectF, startAngle, sweepAngle, true, mPaint);
        mPaint.setColor(0xff3b083f);
        canvas.drawArc(rectF, pointerStartAngle, pointerSweepAngle, true, mPaint);
        mPaint.setColor(Color.WHITE);
        RectF innerRectf = new RectF(left, left, 5 * left, 5 * left);
        canvas.drawArc(innerRectf, startAngle, sweepAngle, true, mPaint);
    }


    /**
     * 设置圆弧的角度
     *
     * @param pointerSweepAngle
     */
    public void setPointerSweepAngle(float pointerSweepAngle) {
        this.pointerSweepAngle = pointerSweepAngle;
        invalidate();
    }
}

MainActivity.java

package com.example.wem.sectorviewdemo;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

import com.example.wem.sectorviewdemo.widget.CustomSectorView;

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

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class MainActivity extends AppCompatActivity {

    private static final String TAG = MainActivity.class.getSimpleName();
    @BindView(R.id.start_button)
    Button mStartButton;
    @BindView(R.id.stop_button)
    Button mStopButton;
    @BindView(R.id.custom_sector)
    CustomSectorView mCustomSector;
    @BindView(R.id.pointer_imageview)
    ImageView mPointerImageview;
    private Timer mTimer = new Timer();
    private int currentMeter = 0;  //当前旋转的角度
    private int lastMeter = 0;  //旋转后的角度

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

    @OnClick({R.id.start_button, R.id.stop_button})
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.start_button:
                startTimer();
                break;
            case R.id.stop_button:
                stopTimer();
                break;
        }
    }


    /**
     * 开启定时任务
     */
    private void startTimer() {
        stopTimer();
        MeterTimerTask meterTimerTask = new MeterTimerTask();
        mTimer.schedule(meterTimerTask, 50, 50);
    }

    /**
     * 关闭定时任务
     */
    private void stopTimer() {
        if (mTimer == null) {
            return;
        }
        mTimer.cancel();
        mTimer = null;
        mTimer = new Timer();
    }


    /**
     * 定时任务
     */
    private class MeterTimerTask extends TimerTask {
        @Override
        public void run() {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    currentMeter += 1;
                    if (currentMeter >= 180) {
                        currentMeter = 0;
                    }
                    mCustomSector.setPointerSweepAngle(currentMeter);
                    rotateAnimation(lastMeter, currentMeter);
                    lastMeter = currentMeter;
                }
            });
        }
    }


    /**
     * 指针旋转动画
     *
     * @param fromDegrees 开始角度
     * @param toDegrees   结束角度
     */
    private void rotateAnimation(float fromDegrees, float toDegrees) {
        ObjectAnimator anim = ObjectAnimator.ofFloat(mPointerImageview, "rotation", fromDegrees, toDegrees);
        anim.setDuration(50);
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (Float) animation.getAnimatedValue();
            }
        });
        anim.start();
    }

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    tools:context="com.example.wem.sectorviewdemo.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        >

        <Button
            android:id="@+id/start_button"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="start"
            />

        <Button
            android:id="@+id/stop_button"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="stop"
            />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="-100dp"
        >

        <com.example.wem.sectorviewdemo.widget.CustomSectorView
            android:id="@+id/custom_sector"
            android:layout_width="200dp"
            android:layout_height="200dp"
            />

        <ImageView
            android:id="@+id/pointer_imageview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@mipmap/pointer"
            />

    </RelativeLayout>

</RelativeLayout>

最后附上本文的源码下载地址：点击下载源码