首先看看效果图:(录屏没录好,真实效果还是很流畅的)
项目工期太忙了,没空讲解了,直接粘代码了,就一个类:
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