【移動應(yīng)用開發(fā)技術(shù)】Android自定義View實現(xiàn)內(nèi)存清理加速球效果

【移動應(yīng)用開發(fā)技術(shù)】Android自定義View實現(xiàn)內(nèi)存清理加速球效果

前言用過獵豹清理大師或者相類似的安全軟件，大家都知道它們都會有一個功能，那就是內(nèi)存清理，而展現(xiàn)的形式是通過一個圓形的小球來顯示內(nèi)存大小，通過百分比數(shù)字以及進(jìn)度條的形式來顯示清理的進(jìn)度。本文將對該效果的實現(xiàn)過程進(jìn)行詳細(xì)講述，但不涉及內(nèi)存清理的實現(xiàn)。預(yù)覽我們先來看看最終實現(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ù)值的過程。實現(xiàn)過程詳解其實上面的效果，筆者是仿照獵豹清理大師的加速球所實現(xiàn)的，略有不同，但大致形式相同。如果讀者對上面的效果感興趣，那么請繼續(xù)讀下去吧，接下來是正文部分。Step1.初始化我們首先要新建一個LieBaoView.java，繼承自View，我們重寫它的構(gòu)造函數(shù)如下：無論通過哪種方式實例化該View，都會調(diào)用init()方法，該方法主要用于處理初始化各種成員變量，那么我們又需要哪些成員變量或者哪些實例來幫助我們呢？

筆者的思路是這樣的：通過一個空白的bitmap，我們在上面繪制圓形、文字等，這樣最后再將這個bitmap繪制到我們的view上面。

因此，我們在初始化的時候，需要獲取到各種Paint（畫筆）、Bitmap（空白圖片）、Canvas（畫布）等的實例。我們再想一下：中間的圓是可以旋轉(zhuǎn)的，那么中間的旋轉(zhuǎn)圓就不能和別的圓放到同一個bitmap上，否則會給后面旋轉(zhuǎn)的實現(xiàn)帶來麻煩，因此我們可以準(zhǔn)備兩張空白的bitmap。那么，我們可以先這樣：上面主要是初始化了各種不同的畫筆類型，以及準(zhǔn)備了兩個Bitmap及其相關(guān)聯(lián)的畫布，我們在其關(guān)聯(lián)的畫布上進(jìn)行繪制即可，這樣就能得到有著內(nèi)容的兩個Bitmap了。

我們接著往下思考：如果要實現(xiàn)翻轉(zhuǎn)效果，我們還需要些什么？AndroidSDK為我們準(zhǔn)備好了一套工具：Camera和Matrix，利用這兩個工具，我們可以很方便地實現(xiàn)對Bitmap的各種變換，比如縮放、平移、翻轉(zhuǎn)等。關(guān)于Camera和Matrix，讀者可以去搜索更詳細(xì)的相關(guān)知識，這里就不展開來詳談了。最后，我們還需要Runnable,因為需要實現(xiàn)自動翻轉(zhuǎn)以及進(jìn)度條的自動增加與減少的，Runnable下面會詳細(xì)講述，先不用著急，當(dāng)然了，還需要設(shè)置一個點(diǎn)擊監(jiān)聽器。Step2.繪制圖像上面已經(jīng)為我們準(zhǔn)備好了畫筆、畫布等，我們接下來就來繪制所需的圖像。通過重寫View的onDraw()方法即可。

①繪制背景圓，也即上圖中最外層深藍(lán)色的圓：mBitmapCanvas.drawCircle(mWidth/2,mHeight/2,mWidth/2,mBackgroundCirclePaint);

②繪制中間的白色背景圓，也即旋轉(zhuǎn)圓進(jìn)行翻轉(zhuǎn)的過程中，背景的白色部分：mBitmapCanvas.drawCircle(mWidth/2,mHeight/2,mWidth/2-mPadding,mTextPaint);

③繪制進(jìn)度條，弧形進(jìn)度條該怎么實現(xiàn)呢？這里給出筆者的一個思路：通過canvas的drawArc()方法來實現(xiàn)，該方法能在一個矩形內(nèi)繪制一個最大的圓（或者橢圓），設(shè)置畫筆為空心以及畫筆線條寬度為12左右即可，這樣就能實現(xiàn)一個粗弧線了，然后通過不斷地調(diào)用onDraw()方法，修改drawArc()的角度來實現(xiàn)進(jìn)度條效果。如果大家還有什么別的實現(xiàn)方法，歡迎交流。④繪制中間的旋轉(zhuǎn)圓。上面說到，由于要實現(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)來看看這個方法：第一個和第四個參數(shù)沒什么好說的，第二個參數(shù)表示文字開始的x坐標(biāo)，第三個參數(shù)表示文字的baseline的y坐標(biāo)。要使文字居中顯示，我們只需要設(shè)置適當(dāng)?shù)膞、y坐標(biāo)即可，那么baseline又是什么呢？它其實代表著文本的基準(zhǔn)點(diǎn)，我們來看一幅圖：

從圖中可以看出，baseline以上至文本最高點(diǎn)為Ascent，為負(fù)值；baseline以下至文本最低點(diǎn)為Descent，為正值。因此，如果我們要使文本在控件內(nèi)居中顯示，那么我們可以利用-(ascent-descent)/2計算出文本的高度的一半，此時再利用mHeight/2(控件高度的一半)加上該值，即可得出在控件中的baseline值，此時也就實現(xiàn)了居中顯示，代碼如下：最后，再將bitmap繪制到view上：canvas.drawBitmap(mOverturnBitmap,mMatrix,null);

經(jīng)過以上的繪制，我們先看看效果如何：

那么基本效果都已經(jīng)實現(xiàn)了。接下來，我們將會實現(xiàn)動態(tài)效果。Step3.實現(xiàn)自動翻轉(zhuǎn)的效果從上面的動畫效果來看，我們首先讓進(jìn)度條從0增加到某個數(shù)值，接著再自動翻轉(zhuǎn)。增加數(shù)值的實現(xiàn)很簡單，只需要啟用一個Runnable，在Runnable內(nèi)把mProgress值不斷增加，再調(diào)用invalidate()方法刷新View即可。等進(jìn)度條增加完畢，那么就開始翻轉(zhuǎn)，翻轉(zhuǎn)的話利用Camera和Matrix對中間的bitmap進(jìn)行操作，不斷改變角度就能實現(xiàn)，我們來看看代碼：

在onDraw()方法內(nèi)：接著，我們來寫mRotateRunnable，Runnable的初始化在init()方法內(nèi)：經(jīng)過以上的Runnable以及在onDraw()方法的配合，已經(jīng)可以實現(xiàn)自動翻轉(zhuǎn)的效果了。Step4.實現(xiàn)點(diǎn)擊清理的效果好了，我們來實現(xiàn)最后的效果，同樣，我們利用一個Runnable來實現(xiàn)，由于該清理效果是需要用戶點(diǎn)擊小球后才開始清理的，所以我們需要一個事件監(jiān)聽器，每當(dāng)用戶點(diǎn)擊后，在onClick方法內(nèi)post一個Runnable即可。

先實現(xiàn)mCleaning