最近在研究自定义View，发现自定义View其实也很简单。
很好上手！！！
你看完代码会发现，如此简单！！
ps:以前一直都觉得自定义View，自定义动画挺麻烦
-------------------------------------------------------------------------------------
本文是通过自定义View来实现简单的进度条和仪表盘。话不多说，直接上图：
仪表盘
进度条
若要直接看源码的请移步 （源码 进度字体颜色和进度指针是白色，请注意背景色！！）： github.com/pendai/ProcessView
首先直接来讲仪表盘的实现。
第一步，写个class ProcessView2 继承View ，将三个构造方法写出来：
public ProcessView2(Context context) {
super(context);
}
public ProcessView2(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
public ProcessView2(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
初始化变量：
//圆角
final float radius = dpToPixel(150);
//刻度宽度
final float sWith= dpToPixel(30);
//刻度总个数
final int mCount=50;
//弧度除刻度，画布每次旋转的角度
float ang=180f/mCount;
//定义进度
float progress = 0;
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
//定义属性动画
ObjectAnimator animator= ObjectAnimator.ofFloat(this, "progress", 0, 80);
定义属性动画：（若不了解属性动画，可以看看抛物线的属性动画，讲解的十分详细：------- hencoder.com/ui-1-6/ ）
{
//定义画笔和动画
paint.setTextSize(dpToPixel(40));
paint.setTextAlign(Paint.Align.CENTER);
animator.setDuration(2000);
// animator.setRepeatCount(-1);
animator.setInterpolator(new FastOutSlowInInterpolator());
}
第二步，刻度盘，刻度盘分为三部分
1.渐变色的刻度；
2.刻度指针；
3.进度数字显示；
--------
那首先讲讲渐变刻度的实现：
定义paint，计算位置：
float centerX=getWidth()/2;
float centerY=getHeight()/2;
paint.setColor(Color.GRAY);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(dpToPixel(2));
可以观察到，上面刻度盘是有一条一条直线组成，那么思路就来了。
先画一条线，然后将canvas旋转，再画线，再旋转.......然后刻度就慢慢的画出来了。
canvas.save();
for (int i = 0; i <=mCount; i++) {
canvas.drawLine(centerX-radius,centerY,centerX-radius+sWith,centerY,paint);
canvas.rotate(ang,centerX,centerY);
}
canvas.restore();
这样刻度就画出来了；
那么后面就处理渐变色了；要实现左边是进度的渐变色，右边是灰色要怎么办呢？
可以这么处理，我们将整个可以盘 设置渐变色（渐变色util后面给出） 绿色到红色，那么未到达的进度刻度再做成白色即可，那么改上面代码：
//刻度
canvas.save();
for (int i = 0; i < =mCount; i++) {
//渐变色 刻度盘划过部分
paint.setColor(setColor(i,mCount));
//刻度盘 未划过部分(若改变刻度 那么 progerss/2 改完 ---progerss/(100/mcount) )
if (i>(int)(progress/2)){
paint.setColor(Color.WHITE);
}
canvas.drawLine(centerX-radius,centerY,centerX-radius+sWith,centerY,paint);
canvas.rotate(ang,centerX,centerY);
}
canvas.restore();
画完刻度，完成了最复杂的部分；仔细看 其实也很简单
第三步：下面就是指针部分了，指针就更简单了，画个线 ，转动，OK（动画写在前面！），若 是图片 同理canvas画个图片就可以了：
//指针
canvas.save();
canvas.rotate(progress*1.8f,centerX,centerY);
canvas.drawLine(centerX-radius/2,centerY,centerX,centerY,paint);
canvas.restore();
第四步，写字，简单 ，上代码：
//下方文字
paint.setStyle(Paint.Style.FILL);
paint.setStrokeWidth(dpToPixel(1));
paint.setTextSize(dpToPixel(40));
canvas.save();
canvas.drawText((int)progress+"%",centerX,centerY+dpToPixel(50),paint);
第五步，加上属性动画 ，完成！-------------（不懂属性动画可以看看上方给出的链接哦！！）
public float getProgress() {
return progress;
}
public void setProgress(float progress) {
this.progress = progress;
invalidate();
}
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
animator.start();
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
animator.end();
}
这样仪表盘就做完了。。。so easy!!=====================!
==================================================
附上 工具代码：
public static float dpToPixel(float dp) {
DisplayMetrics metrics = Resources.getSystem().getDisplayMetrics();
return dp * metrics.density;
}
public static int setColor(float val,int mCount) {
float one = (255 + 255) / (mCount * 2 / 3);
int r = 0, g = 0, b = 0;
if (val < (mCount * 1 / 3)) {
r = (int) (one * val);
g = 255;
} else if (val >= (mCount * 1 / 3) && val < (mCount * 2 / 3)) {
r = 255;
g = 255 - (int) ((val - (mCount * 1 / 3)) * one);
} else {
r = 255;
}//最后一个三等分
return Color.rgb(r, g, b);
}
}
================================================================================================
完整代码（如果项目用到 ，可将属性动画移到相应的位置）：
package com.dai.test.testview;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.support.v4.view.animation.FastOutSlowInInterpolator;
import android.util.AttributeSet;
import android.view.View;
import static com.dai.test.testview.Utils.dpToPixel;
import static com.dai.test.testview.Utils.setColor;
/**
* Created by dp on 2017/11/3 0003.
*/
public class ProcessView2 extends View {
//圆角
final float radius = dpToPixel(150);
//刻度宽度
final float sWith= dpToPixel(30);
//刻度总个数
final int mCount=50;
//弧度除刻度，画布每次旋转的角度
float ang=180f/mCount;
//定义进度
float progress = 0;
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
//定义属性动画
ObjectAnimator animator= ObjectAnimator.ofFloat(this, "progress", 0, 80);
public ProcessView2(Context context) {
super(context);
}
public ProcessView2(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
public ProcessView2(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
{
//定义画笔和动画
paint.setTextSize(dpToPixel(40));
paint.setTextAlign(Paint.Align.CENTER);
animator.setDuration(2000);
// animator.setRepeatCount(-1);
animator.setInterpolator(new FastOutSlowInInterpolator());
}
public float getProgress() {
return progress;
}
public void setProgress(float progress) {
this.progress = progress;
invalidate();
}
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
animator.start();
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
animator.end();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float centerX=getWidth()/2;
float centerY=getHeight()/2;
paint.setColor(Color.GRAY);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeCap(Paint.Cap.BUTT);
paint.setStrokeWidth(dpToPixel(2));
//刻度
canvas.save();
for (int i = 0; i < =mCount; i++) {
//渐变色 刻度盘划过部分
paint.setColor(setColor(i,mCount));
//刻度盘 未划过部分
if (i>(int)(progress/2)){
paint.setColor(Color.WHITE);
}
canvas.drawLine(centerX-radius,centerY,centerX-radius+sWith,centerY,paint);
canvas.rotate(ang,centerX,centerY);
}
canvas.restore();
//指针
canvas.save();
canvas.rotate(progress*1.8f,centerX,centerY);
canvas.drawLine(centerX-radius/2,centerY,centerX,centerY,paint);
canvas.restore();
//下方文字
paint.setStyle(Paint.Style.FILL);
paint.setStrokeWidth(dpToPixel(1));
paint.setTextSize(dpToPixel(40));
canvas.save();
canvas.drawText((int)progress+"%",centerX,centerY+dpToPixel(50),paint);
}
}
最后！！最后！！再附上源码地址 ：github.com/pendai/ProcessView 欢迎star！！
环形条，我就不在这里介绍了，需要的请到 github.com/pendai/ProcessView 下载研究。
也是最近才开始看自定义view ，发现也没那么复杂！一时兴趣写了个玩玩，欢迎大牛指点。
后期完善：
添加自定义属性
完善代码封装
网友评论