Android自定义View实现内存清理加速球效果
前言
用过猎豹清理大师或者相类似的安全软件，大家都知道它们都会有一个功能，那就是内存清理，而展现的形式是通过一个圆形的小球来显示内存大小，通过百分比数字以及进度条的形式来显示清理的进度。本文将对该效果的实现过程进行详细讲述，但不涉及内存清理的实现。
预览
我们先来看看最终实现的效果是怎样的(gif效果有点差)：
从上面的图片，我们可以看出：
①当加速球view显示的时候，进度条以及百分比数字会从0%开始增加到某一数值（60%）。
②进度条停止增加后，中间的圆沿着y轴开始翻转，会翻转180度，上面的百分比数字并不会出现镜像效果(下面会提到)。
③用户点击该小球后，开始清理内存，进度条和百分比数字会经历减小至0，再由0增加到某一数值的过程。
实现过程详解
其实上面的效果，笔者是仿照猎豹清理大师的加速球所实现的，略有不同，但大致形式相同。如果读者对上面的效果感兴趣，那么请继续读下去吧，接下来是正文部分。
step 1.初始化
我们首先要新建一个liebaoview.java，继承自view，我们重写它的构造函数如下：
public liebaoview(context context) {
super(context);
init();
}
public liebaoview(context context, attributeset attrs) {
super(context, attrs);
init();
}
public liebaoview(context context, attributeset attrs, int defstyleattr) {
super(context, attrs, defstyleattr);
init();
}
无论通过哪种方式实例化该view，都会调用init()方法，该方法主要用于处理初始化各种成员变量，那么我们又需要哪些成员变量或者哪些实例来帮助我们呢？
笔者的思路是这样的：通过一个空白的bitmap，我们在上面绘制圆形、文字等，这样最后再将这个bitmap绘制到我们的view上面。
因此，我们在初始化的时候，需要获取到各种paint（画笔）、bitmap（空白图片）、canvas（画布）等的实例。我们再想一下：中间的圆是可以旋转的，那么中间的旋转圆就不能和别的圆放到同一个bitmap上，否则会给后面旋转的实现带来麻烦，因此我们可以准备两张空白的bitmap。那么，我们可以先这样：
public void init(){
//绘制背景圆的画笔
mbackgroundcirclepaint = new paint();
mbackgroundcirclepaint.setantialias(true);
mbackgroundcirclepaint.setcolor(color.argb(0xff, 0x10, 0x53, 0xff));
//绘制旋转圆的画笔
mfrontcirclepaint = new paint();
mfrontcirclepaint.setantialias(true);
mfrontcirclepaint.setcolor(color.argb(0xff, 0x5e, 0xae, 0xff));
//绘制文字的画笔
mtextpaint = new paint();
mtextpaint.setantialias(true);
mtextpaint.settextsize(80);
mtextpaint.setcolor(color.white);
//绘制进度条的画笔
marcpaint = new paint();
marcpaint.setantialias(true);
marcpaint.setcolor(color.white);
marcpaint.setstrokewidth(12);
marcpaint.setstyle(paint.style.stroke);
mbitmap = bitmap.createbitmap(mwidth,mheight, bitmap.config.argb_8888);
mbitmapcanvas = new canvas(mbitmap); //将画布和bitmap关联
//旋转bitmap与画布
moverturnbitmap = bitmap.createbitmap(mwidth,mheight, bitmap.config.argb_8888);
moverturnbitmapcanvas = new canvas(moverturnbitmap);
//省略了一部分...
//camera、matrix、runnable等下面会讲述
mmatrix = new matrix();
mcamera = new camera();
}
上面主要是初始化了各种不同的画笔类型，以及准备了两个bitmap及其相关联的画布，我们在其关联的画布上进行绘制即可，这样就能得到有着内容的两个bitmap了。
我们接着往下思考：如果要实现翻转效果，我们还需要些什么？android sdk为我们准备好了一套工具：camera和matrix，利用这两个工具，我们可以很方便地实现对bitmap的各种变换，比如缩放、平移、翻转等。关于camera和matrix，读者可以去搜索更详细的相关知识，这里就不展开来详谈了。最后，我们还需要runnable,因为需要实现自动翻转以及进度条的自动增加与减少的，runnable下面会详细讲述，先不用着急，当然了，还需要设置一个点击监听器。
step 2.绘制图像
上面已经为我们准备好了画笔、画布等，我们接下来就来绘制所需的图像。通过重写view的ondraw()方法即可。
①绘制背景圆，也即上图中最外层深蓝色的圆：
mbitmapcanvas.drawcircle(mwidth / 2, mheight / 2, mwidth / 2, mbackgroundcirclepaint);
②绘制中间的白色背景圆，也即旋转圆进行翻转的过程中，背景的白色部分：
mbitmapcanvas.drawcircle(mwidth / 2, mheight / 2, mwidth / 2 - mpadding, mtextpaint);
③绘制进度条，弧形进度条该怎么实现呢？这里给出笔者的一个思路：通过canvas的drawarc()方法来实现，该方法能在一个矩形内绘制一个最大的圆（或者椭圆），设置画笔为空心以及画笔线条宽度为12左右即可，这样就能实现一个粗弧线了，然后通过不断地调用ondraw()方法，修改drawarc()的角度来实现进度条效果。如果大家还有什么别的实现方法，欢迎交流。
mbitmapcanvas.save(); //实例化一个矩形，该矩形的左上角和右下角坐标与原bitmap并不重合，这是因为要使 //进度条与最外面的圆有一定的间隙 rectf rectf = new rectf(10,10,mwidth-10,mheight-10); //先将画布逆时针旋转90度，这样drawarc的起始角度就能从0度开始，省去不必要的麻烦 mbitmapcanvas.rotate(-90, mwidth / 2, mheight / 2); mbitmapcanvas.drawarc(rectf, 0, ((float)mprogress/mmaxprogress)*360, false, marcpaint); mbitmapcanvas.restore(); canvas.drawbitmap(mbitmap, 0, 0, null);
④绘制中间的旋转圆。上面说到，由于要实现翻转效果，那么不能再同一张bitmap上绘制了，所以我们用另一张空白的bitmap。旋转圆的绘制很简单，只要它的半径比外圆半径以及进度条宽度相加之和还要小即可：
moverturnbitmapcanvas.drawcircle(mwidth / 2, mheight / 2, mwidth / 2 - mpadding, mfrontcirclepaint);
⑤最后一步，在旋转圆上绘制百分比数字。绘制文字，要用到canvas的drawtext方法，我们重点来看看这个方法：
/**
* draw the text, with origin at (x,y), using the specified paint. the
* origin is interpreted based on the align setting in the paint.
*
* @param text the text to be drawn
* @param x the x-coordinate of the origin of the text being drawn
* @param y the y-coordinate of the baseline of the text being drawn
* @param paint the paint used for the text (e.g. color, size, style)
*/
public void drawtext(@nonnull string text, float x, float y, @nonnull paint paint) {
//...
}
第一个和第四个参数没什么好说的，第二个参数表示文字开始的x坐标，第三个参数表示文字的baseline的y坐标。要使文字居中显示，我们只需要设置适当的x、y坐标即可，那么baseline又是什么呢？它其实代表着文本的基准点，我们来看一幅图：
从图中可以看出，baseline以上至文本最高点为ascent，为负值；baseline以下至文本最低点为descent，为正值。因此，如果我们要使文本在控件内居中显示，那么我们可以利用-(ascent-descent)/2计算出文本的高度的一半，此时再利用mheight/2(控件高度的一半)加上该值，即可得出在控件中的baseline值，此时也就实现了居中显示，代码如下：
string text = (int) (((float)mprogress / mmaxprogress) *100) + "%"; //获取文本的宽度 float textwidth = mtextpaint.measuretext(text); //获取文本规格 paint.fontmetrics metrics = mtextpaint.getfontmetrics(); float baseline = mheight / 2 - (metrics.ascent + metrics.descent) /2; moverturnbitmapcanvas.drawtext(text, mwidth / 2 - textwidth / 2, baseline, mtextpaint);
最后，再将bitmap绘制到view上：
canvas.drawbitmap(moverturnbitmap, mmatrix, null);
经过以上的绘制，我们先看看效果如何：
那么基本效果都已经实现了。接下来，我们将会实现动态效果。
step 3.实现自动翻转的效果
从上面的动画效果来看，我们首先让进度条从0增加到某个数值，接着再自动翻转。增加数值的实现很简单，只需要启用一个runnable，在runnable内把mprogress值不断增加，再调用invalidate()方法刷新view即可。等进度条增加完毕，那么就开始翻转，翻转的话利用camera和matrix对中间的bitmap进行操作，不断改变角度就能实现，我们来看看代码：
在ondraw()方法内：
@override
protected void ondraw(canvas canvas) {
//....
//如果当前正在旋转
if(isrotating) {
mcamera.save();
//旋转角度
mcamera.rotatey(mrotateangle);
//如果旋转角度大于或等于180度的时候，减去180度
if (mrotateangle >= 180) {
mrotateangle -= 180;
}
//根据camera的操作来获得相应的矩阵
mcamera.getmatrix(mmatrix);
mcamera.restore();
mmatrix.pretranslate(-mwidth / 2, -mheight / 2);
mmatrix.posttranslate(mwidth / 2, mheight / 2);
}
canvas.drawbitmap(moverturnbitmap, mmatrix, null);
//如果当前控件尚未进行翻转过程
if(!isrotating && !isinital){
//设置isincreasing，表示先开始进度条的增加过程
isincreasing = true;
isrotating = true;
postdelayed(mrotaterunnable,10);
}
接着，我们来写mrotaterunnable，runnable的初始化在init()方法内：
mrotaterunnable = new runnable() {
@override
public void run() {
//如果当前是正在增加过程
if(isincreasing){
log.d("cylog","mprogress:"+mprogress);
//当进度增加到某一个数值的时候，停止增加
if(mprogress >= 59){
isincreasing = false;
}
mprogress++;
}else {
//如果增加过程结束，那么开始翻转
//如果mrotateangle是大于90度的，表示bitmap已经翻转了90度，
//此时bitmap的内容变成镜像内容，为了不出现镜像效果，我们需要再转过180度，
//此时就变为正常的显示了，而这多转的180度在ondraw内会减去。
if (mrotateangle > 90 && mrotateangle < 180)
mrotateangle = mrotateangle + 3 + 180;
//如果mrotateangle超过了180度，翻转过程完成
else if (mrotateangle >= 180) {
isrotating = false;
isinital = true;
mrotateangle = 0;
return;
} else
//每次角度增加3，这个可以微调，适当即可
mrotateangle += 3;
}
invalidate();
//25ms后再次调用该方法
postdelayed(this,25);
}
};
经过以上的runnable以及在ondraw()方法的配合，已经可以实现自动翻转的效果了。
step 4.实现点击清理的效果
好了，我们来实现最后的效果，同样，我们利用一个runnable来实现，由于该清理效果是需要用户点击小球后才开始清理的，所以我们需要一个事件监听器，每当用户点击后，在onclick方法内post一个runnable即可。
先实现mcleaningrunnable,在init()方法内：
mcleaningrunnable = new runnable() {
@override
public void run() {
//如果当前进度超过某一数值，那么停止清理
if (mprogress >= 60) {
iscleaning = false;
return;
}
//如果当前处于下降过程，mprogress不断减少，直到为0
if (isdescending) {
mprogress--;
if (mprogress <= 0)
isdescending = false;
} else {
mprogress++;
}
invalidate();
postdelayed(this,40);
}
};
setonclicklistener(new onclicklistener() {
@override
public void onclick(view v) {
if(iscleaning) return;
//如果当前正在清理过程，那么直接return，防止post过多
//设置flag，来进行清理
isdescending = true;
iscleaning = true;
mprogress--;
postdelayed(mcleaningrunnable, 40);
}
});
上面的逻辑实现了，每当点击后，先把进度值不断减少直到0，接着又不断增加直到某个固定的值，通过每一个调用invalidate()方法来通知组件刷新，这样就实现了动态效果。
好了，到目前为止，所有的效果已经实现了，全部代码在下面贴上。谢谢大家的阅读~
public class liebaoview extends view {
private paint mbackgroundcirclepaint;
private paint mfrontcirclepaint;
private paint mtextpaint;
private paint marcpaint;
private bitmap mbitmap;
private bitmap moverturnbitmap;
private canvas mbitmapcanvas;
private canvas moverturnbitmapcanvas;
private matrix mmatrix;
private camera mcamera;
private int mwidth = 400;
private int mheight = 400;
private int mpadding = 20;
private int mprogress = 0;
private int mmaxprogress = 100;
private int mrotateangle = 0;
private runnable mrotaterunnable;
private runnable mcleaningrunnable;
private boolean isrotating;
private boolean isinital = false;
private boolean isdescending;
private boolean isincreasing;
private boolean iscleaning;
public liebaoview(context context) {
super(context);
init();
}
public liebaoview(context context, attributeset attrs) {
super(context, attrs);
init();
}
public liebaoview(context context, attributeset attrs, int defstyleattr) {
super(context, attrs, defstyleattr);
init();
}
@override
protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
setmeasureddimension(mwidth,mheight);
}
public void init(){
//绘制背景圆的画笔
mbackgroundcirclepaint = new paint();
mbackgroundcirclepaint.setantialias(true);
mbackgroundcirclepaint.setcolor(color.argb(0xff, 0x10, 0x53, 0xff));
//绘制旋转圆的画笔
mfrontcirclepaint = new paint();
mfrontcirclepaint.setantialias(true);
mfrontcirclepaint.setcolor(color.argb(0xff, 0x5e, 0xae, 0xff));
//绘制文字的画笔
mtextpaint = new paint();
mtextpaint.setantialias(true);
mtextpaint.settextsize(80);
mtextpaint.setcolor(color.white);
//绘制进度条的画笔
marcpaint = new paint();
marcpaint.setantialias(true);
marcpaint.setcolor(color.white);
marcpaint.setstrokewidth(12);
marcpaint.setstyle(paint.style.stroke);
mbitmap = bitmap.createbitmap(mwidth,mheight, bitmap.config.argb_8888);
mbitmapcanvas = new canvas(mbitmap); //将画布和bitmap关联
//旋转bitmap与画布
moverturnbitmap = bitmap.createbitmap(mwidth,mheight, bitmap.config.argb_8888);
moverturnbitmapcanvas = new canvas(moverturnbitmap);
mmatrix = new matrix();
mcamera = new camera();
mrotaterunnable = new runnable() {
@override
public void run() {
//如果当前是正在增加过程
if(isincreasing){
log.d("cylog","mprogress:"+mprogress);
//当进度增加到某一个数值的时候，停止增加
if(mprogress >= 59){
isincreasing = false;
}
mprogress++;
}else {
//如果增加过程结束，那么开始翻转
//如果mrotateangle是大于90度的，表示bitmap已经翻转了90度，
//此时bitmap的内容变成镜像内容，为了不出现镜像效果，我们需要再转过180度，
//此时就变为正常的显示了，而这多转的180度在ondraw内会减去。
if (mrotateangle > 90 && mrotateangle < 180)
mrotateangle = mrotateangle + 3 + 180;
//如果mrotateangle超过了180度，翻转过程完成
else if (mrotateangle >= 180) {
isrotating = false;
isinital = true;
mrotateangle = 0;
return;
} else
//每次角度增加3，这个可以微调，适当即可
mrotateangle += 3;
}
invalidate();
//25ms后再次调用该方法
postdelayed(this,25);
}
};
mcleaningrunnable = new runnable() {
@override
public void run() {
//如果当前进度超过某一数值，那么停止清理
if (mprogress >= 60) {
iscleaning = false;
return;
}
//如果当前处于下降过程，mprogress不断减少，直到为0
if (isdescending) {
mprogress--;
if (mprogress <= 0)
isdescending = false;
} else {
mprogress++;
}
invalidate();
postdelayed(this,40);
}
};
setonclicklistener(new onclicklistener() {
@override
public void onclick(view v) {
if(iscleaning) return;
isdescending = true;
iscleaning = true;
mprogress--;
postdelayed(mcleaningrunnable, 40);
}
});
}
@override
protected void ondraw(canvas canvas) {
mbitmapcanvas.drawcircle(mwidth / 2, mheight / 2, mwidth / 2, mbackgroundcirclepaint);
mbitmapcanvas.drawcircle(mwidth / 2, mheight / 2, mwidth / 2 - mpadding, mtextpaint);
mbitmapcanvas.save();
//实例化一个矩形，该矩形的左上角和右下角坐标与原bitmap并不重合，这是因为要使
//进度条与最外面的圆有一定的间隙
rectf rectf = new rectf(10,10,mwidth-10,mheight-10);
//先将画布逆时针旋转90度，这样drawarc的起始角度就能从0度开始，省去不必要的麻烦
mbitmapcanvas.rotate(-90, mwidth / 2, mheight / 2);
mbitmapcanvas.drawarc(rectf, 0, ((float)mprogress/mmaxprogress)*360, false, marcpaint);
mbitmapcanvas.restore();
canvas.drawbitmap(mbitmap, 0, 0, null);
moverturnbitmapcanvas.drawcircle(mwidth / 2, mheight / 2, mwidth / 2 - mpadding, mfrontcirclepaint);
string text = (int) (((float)mprogress / mmaxprogress) *100) + "%";
//获取文本的宽度
float textwidth = mtextpaint.measuretext(text);
//获取文本规格
paint.fontmetrics metrics = mtextpaint.getfontmetrics();
float baseline = mheight / 2 - (metrics.ascent + metrics.descent) /2;
moverturnbitmapcanvas.drawtext(text, mwidth / 2 - textwidth / 2, baseline, mtextpaint);
//如果当前正在旋转
if(isrotating) {
mcamera.save();
//旋转角度
mcamera.rotatey(mrotateangle);
//如果旋转角度大于或等于180度的时候，减去180度
if (mrotateangle >= 180) {
mrotateangle -= 180;
}
//根据camera的操作来获得相应的矩阵
mcamera.getmatrix(mmatrix);
mcamera.restore();
mmatrix.pretranslate(-mwidth / 2, -mheight / 2);
mmatrix.posttranslate(mwidth / 2, mheight / 2);
}
canvas.drawbitmap(moverturnbitmap, mmatrix, null);
//如果当前控件尚未进行翻转过程
if(!isrotating && !isinital){
//设置isincreasing，表示先开始进度条的增加过程
isincreasing = true;
isrotating = true;
postdelayed(mrotaterunnable,10);
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。