Android 自定义View:教你轻松实现内存清理加速球的效果
前言
用過獵豹清理大師或者相類似的安全軟件，大家都知道它們都會有一個功能，那就是內(nèi)存清理，而展現(xiàn)的形式是通過一個圓形的小球來顯示內(nèi)存大小，通過百分比數(shù)字以及進(jìn)度條的形式來顯示清理的進(jìn)度。本文將對該效果的實(shí)現(xiàn)過程進(jìn)行詳細(xì)講述，但不涉及內(nèi)存清理的實(shí)現(xiàn)。
預(yù)覽
我們先來看看最終實(shí)現(xiàn)的效果是怎樣的(gif效果有點(diǎn)差)：
從上面的圖片，我們可以看出：
①當(dāng)加速球View顯示的時候，進(jìn)度條以及百分比數(shù)字會從0%開始增加到某一數(shù)值（60%）。
②進(jìn)度條停止增加后，中間的圓沿著Y軸開始翻轉(zhuǎn)，會翻轉(zhuǎn)180度，上面的百分比數(shù)字并不會出現(xiàn)鏡像效果(下面會提到)。
③用戶點(diǎn)擊該小球后，開始清理內(nèi)存，進(jìn)度條和百分比數(shù)字會經(jīng)歷減小至0，再由0增加到某一數(shù)值的過程。
實(shí)現(xiàn)過程詳解
其實(shí)上面的效果，筆者是仿照獵豹清理大師的加速球所實(shí)現(xiàn)的，略有不同，但大致形式相同。如果讀者對上面的效果感興趣，那么請繼續(xù)讀下去吧，接下來是正文部分。
Step 1.初始化
我們首先要新建一個LieBaoView.java，繼承自View，我們重寫它的構(gòu)造函數(shù)如下：
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();}無論通過哪種方式實(shí)例化該View，都會調(diào)用init()方法，該方法主要用于處理初始化各種成員變量，那么我們又需要哪些成員變量或者哪些實(shí)例來幫助我們呢？
筆者的思路是這樣的：通過一個空白的bitmap，我們在上面繪制圓形、文字等，這樣最后再將這個bitmap繪制到我們的view上面。
因此，我們在初始化的時候，需要獲取到各種Paint（畫筆）、Bitmap（空白圖片）、Canvas（畫布）等的實(shí)例。我們再想一下：中間的圓是可以旋轉(zhuǎn)的，那么中間的旋轉(zhuǎn)圓就不能和別的圓放到同一個bitmap上，否則會給后面旋轉(zhuǎn)的實(shí)現(xiàn)帶來麻煩，因此我們可以準(zhǔn)備兩張空白的bitmap。那么，我們可以先這樣：
上面主要是初始化了各種不同的畫筆類型，以及準(zhǔn)備了兩個Bitmap及其相關(guān)聯(lián)的畫布，我們在其關(guān)聯(lián)的畫布上進(jìn)行繪制即可，這樣就能得到有著內(nèi)容的兩個Bitmap了。
我們接著往下思考：如果要實(shí)現(xiàn)翻轉(zhuǎn)效果，我們還需要些什么？Android SDK為我們準(zhǔn)備好了一套工具：Camera和Matrix，利用這兩個工具，我們可以很方便地實(shí)現(xiàn)對Bitmap的各種變換，比如縮放、平移、翻轉(zhuǎn)等。關(guān)于Camera和Matrix，讀者可以去搜索更詳細(xì)的相關(guān)知識，這里就不展開來詳談了。最后，我們還需要Runnable,因?yàn)樾枰獙?shí)現(xiàn)自動翻轉(zhuǎn)以及進(jìn)度條的自動增加與減少的，Runnable下面會詳細(xì)講述，先不用著急，當(dāng)然了，還需要設(shè)置一個點(diǎn)擊監(jiān)聽器。
Step 2.繪制圖像
上面已經(jīng)為我們準(zhǔn)備好了畫筆、畫布等，我們接下來就來繪制所需的圖像。通過重寫View的onDraw()方法即可。
①繪制背景圓，也即上圖中最外層深藍(lán)色的圓：
②繪制中間的白色背景圓，也即旋轉(zhuǎn)圓進(jìn)行翻轉(zhuǎn)的過程中，背景的白色部分：
mBitmapCanvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2 - mPadding, mTextPaint);③繪制進(jìn)度條，弧形進(jìn)度條該怎么實(shí)現(xiàn)呢？這里給出筆者的一個思路：通過canvas的drawArc()方法來實(shí)現(xiàn)，該方法能在一個矩形內(nèi)繪制一個最大的圓（或者橢圓），設(shè)置畫筆為空心以及畫筆線條寬度為12左右即可，這樣就能實(shí)現(xiàn)一個粗弧線了，然后通過不斷地調(diào)用onDraw()方法，修改drawArc()的角度來實(shí)現(xiàn)進(jìn)度條效果。如果大家還有什么別的實(shí)現(xiàn)方法，歡迎交流。
mBitmapCanvas.save(); //實(shí)例化一個矩形，該矩形的左上角和右下角坐標(biāo)與原Bitmap并不重合，這是因?yàn)橐?/span> //進(jìn)度條與最外面的圓有一定的間隙 RectF rectF = new RectF(10,10,mWidth-10,mHeight-10); //先將畫布逆時針旋轉(zhuǎn)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);④繪制中間的旋轉(zhuǎn)圓。上面說到，由于要實(shí)現(xiàn)翻轉(zhuǎn)效果，那么不能再同一張Bitmap上繪制了，所以我們用另一張空白的Bitmap。旋轉(zhuǎn)圓的繪制很簡單，只要它的半徑比外圓半徑以及進(jìn)度條寬度相加之和還要小即可：
mOverturnBitmapCanvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2 - mPadding, mFrontCirclePaint);⑤最后一步，在旋轉(zhuǎn)圓上繪制百分比數(shù)字。繪制文字，要用到Canvas的drawText方法，我們重點(diǎn)來看看這個方法：
/*** 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) {//...}第一個和第四個參數(shù)沒什么好說的，第二個參數(shù)表示文字開始的x坐標(biāo)，第三個參數(shù)表示文字的baseline的y坐標(biāo)。要使文字居中顯示，我們只需要設(shè)置適當(dāng)?shù)膞、y坐標(biāo)即可，那么baseline又是什么呢？它其實(shí)代表著文本的基準(zhǔn)點(diǎn)，我們來看一幅圖：
從圖中可以看出，baseline以上至文本最高點(diǎn)為Ascent，為負(fù)值；baseline以下至文本最低點(diǎn)為Descent，為正值。因此，如果我們要使文本在控件內(nèi)居中顯示，那么我們可以利用-(ascent-descent)/2計(jì)算出文本的高度的一半，此時再利用mHeight/2(控件高度的一半)加上該值，即可得出在控件中的baseline值，此時也就實(shí)現(xiàn)了居中顯示，代碼如下：
最后，再將bitmap繪制到view上：
canvas.drawBitmap(mOverturnBitmap, mMatrix, null);經(jīng)過以上的繪制，我們先看看效果如何：
那么基本效果都已經(jīng)實(shí)現(xiàn)了。接下來，我們將會實(shí)現(xiàn)動態(tài)效果。
Step 3.實(shí)現(xiàn)自動翻轉(zhuǎn)的效果
從上面的動畫效果來看，我們首先讓進(jìn)度條從0增加到某個數(shù)值，接著再自動翻轉(zhuǎn)。增加數(shù)值的實(shí)現(xiàn)很簡單，只需要啟用一個Runnable，在Runnable內(nèi)把mProgress值不斷增加，再調(diào)用invalidate()方法刷新View即可。等進(jìn)度條增加完畢，那么就開始翻轉(zhuǎn)，翻轉(zhuǎn)的話利用Camera和Matrix對中間的bitmap進(jìn)行操作，不斷改變角度就能實(shí)現(xiàn)，我們來看看代碼：
在onDraw()方法內(nèi)：
接著，我們來寫mRotateRunnable，Runnable的初始化在init()方法內(nèi)：
mRotateRunnable = new Runnable() {@Overridepublic void run() {//如果當(dāng)前是正在增加過程if(isIncreasing){Log.d("cylog","mProgress:"+mProgress);//當(dāng)進(jìn)度增加到某一個數(shù)值的時候，停止增加if(mProgress >= 59){isIncreasing = false;}mProgress++;}else {//如果增加過程結(jié)束，那么開始翻轉(zhuǎn)//如果mRotateAngle是大于90度的，表示bitmap已經(jīng)翻轉(zhuǎn)了90度，//此時bitmap的內(nèi)容變成鏡像內(nèi)容，為了不出現(xiàn)鏡像效果，我們需要再轉(zhuǎn)過180度，//此時就變?yōu)檎５娘@示了，而這多轉(zhuǎn)的180度在onDraw內(nèi)會減去。if (mRotateAngle > 90 && mRotateAngle < 180)mRotateAngle = mRotateAngle + 3 + 180;//如果mRotateAngle超過了180度，翻轉(zhuǎn)過程完成else if (mRotateAngle >= 180) {isRotating = false;isInital = true;mRotateAngle = 0;return;} else//每次角度增加3，這個可以微調(diào)，適當(dāng)即可mRotateAngle += 3;}invalidate();//25ms后再次調(diào)用該方法postDelayed(this,25);} };經(jīng)過以上的Runnable以及在onDraw()方法的配合，已經(jīng)可以實(shí)現(xiàn)自動翻轉(zhuǎn)的效果了。
Step 4.實(shí)現(xiàn)點(diǎn)擊清理的效果
好了，我們來實(shí)現(xiàn)最后的效果，同樣，我們利用一個Runnable來實(shí)現(xiàn)，由于該清理效果是需要用戶點(diǎn)擊小球后才開始清理的，所以我們需要一個事件監(jiān)聽器，每當(dāng)用戶點(diǎn)擊后，在onClick方法內(nèi)post一個Runnable即可。
先實(shí)現(xiàn)mCleaningRunnable,在init()方法內(nèi)：
上面的邏輯實(shí)現(xiàn)了，每當(dāng)點(diǎn)擊后，先把進(jìn)度值不斷減少直到0，接著又不斷增加直到某個固定的值，通過每一個調(diào)用invalidate()方法來通知組件刷新，這樣就實(shí)現(xiàn)了動態(tài)效果。
好了，到目前為止，所有的效果已經(jīng)實(shí)現(xiàn)了，全部代碼在下面貼上。謝謝大家的閱讀~
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();}@Overrideprotected 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));//繪制旋轉(zhuǎn)圓的畫筆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);//繪制進(jìn)度條的畫筆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關(guān)聯(lián)//旋轉(zhuǎn)bitmap與畫布mOverturnBitmap = Bitmap.createBitmap(mWidth,mHeight, Bitmap.Config.ARGB_8888);mOverturnBitmapCanvas = new Canvas(mOverturnBitmap);mMatrix = new Matrix();mCamera = new Camera();mRotateRunnable = new Runnable() {@Overridepublic void run() {//如果當(dāng)前是正在增加過程if(isIncreasing){Log.d("cylog","mProgress:"+mProgress);//當(dāng)進(jìn)度增加到某一個數(shù)值的時候，停止增加if(mProgress >= 59){isIncreasing = false;}mProgress++;}else {//如果增加過程結(jié)束，那么開始翻轉(zhuǎn)//如果mRotateAngle是大于90度的，表示bitmap已經(jīng)翻轉(zhuǎn)了90度，//此時bitmap的內(nèi)容變成鏡像內(nèi)容，為了不出現(xiàn)鏡像效果，我們需要再轉(zhuǎn)過180度，//此時就變?yōu)檎５娘@示了，而這多轉(zhuǎn)的180度在onDraw內(nèi)會減去。if (mRotateAngle > 90 && mRotateAngle < 180)mRotateAngle = mRotateAngle + 3 + 180;//如果mRotateAngle超過了180度，翻轉(zhuǎn)過程完成else if (mRotateAngle >= 180) {isRotating = false;isInital = true;mRotateAngle = 0;return;} else//每次角度增加3，這個可以微調(diào)，適當(dāng)即可mRotateAngle += 3;}invalidate();//25ms后再次調(diào)用該方法postDelayed(this,25);}};mCleaningRunnable = new Runnable() {@Overridepublic void run() {//如果當(dāng)前進(jìn)度超過某一數(shù)值，那么停止清理if (mProgress >= 60) {isCleaning = false;return;}//如果當(dāng)前處于下降過程，mProgress不斷減少，直到為0if (isDescending) {mProgress--;if (mProgress <= 0)isDescending = false;} else {mProgress++;}invalidate();postDelayed(this,40);}};setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {if(isCleaning) return;isDescending = true;isCleaning = true;mProgress--;postDelayed(mCleaningRunnable, 40);}});}@Overrideprotected 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();//實(shí)例化一個矩形，該矩形的左上角和右下角坐標(biāo)與原Bitmap并不重合，這是因?yàn)橐?/span>//進(jìn)度條與最外面的圓有一定的間隙RectF rectF = new RectF(10,10,mWidth-10,mHeight-10);//先將畫布逆時針旋轉(zhuǎn)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);//獲取文本規(guī)格Paint.FontMetrics metrics = mTextPaint.getFontMetrics();float baseLine = mHeight / 2 - (metrics.ascent + metrics.descent) /2;mOverturnBitmapCanvas.drawText(text, mWidth / 2 - textWidth / 2, baseLine, mTextPaint);//如果當(dāng)前正在旋轉(zhuǎn)if(isRotating) {mCamera.save();//旋轉(zhuǎn)角度mCamera.rotateY(mRotateAngle);//如果旋轉(zhuǎn)角度大于或等于180度的時候，減去180度if (mRotateAngle >= 180) {mRotateAngle -= 180;}//根據(jù)Camera的操作來獲得相應(yīng)的矩陣mCamera.getMatrix(mMatrix);mCamera.restore();mMatrix.preTranslate(-mWidth / 2, -mHeight / 2);mMatrix.postTranslate(mWidth / 2, mHeight / 2);}canvas.drawBitmap(mOverturnBitmap, mMatrix, null);//如果當(dāng)前控件尚未進(jìn)行翻轉(zhuǎn)過程if(!isRotating && !isInital){//設(shè)置isIncreasing，表示先開始進(jìn)度條的增加過程isIncreasing = true;isRotating = true;postDelayed(mRotateRunnable,10);}} }總結(jié)
以上是生活随笔為你收集整理的Android 自定义View:教你轻松实现内存清理加速球的效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mos 控制交流_电机控制器母线电容的设
- 下一篇： android 蓝牙播放器,Androi