【移動應(yīng)用開發(fā)技術(shù)】Android自定義WaveProgressView實(shí)現(xiàn)水波紋加載需求

【移動應(yīng)用開發(fā)技術(shù)】Android自定義WaveProgressView實(shí)現(xiàn)水波紋加載需求

先看效果圖：你可以定義成你項(xiàng)目的logo圖片，可以設(shè)置水波顏色、波長、波寬、字體大小、顏色、進(jìn)度條的最大值，當(dāng)前進(jìn)度值，還可以設(shè)置波紋震動的快慢。當(dāng)設(shè)置一個進(jìn)度不變的時(shí)候，打開時(shí)還有一個動畫填滿的效果（比如第二個流量顯示，這里圖片沒有截出這個效果）。源碼地址1.如何使用1.1在布局文件中添加自定義控件：說明，這里的android:background定義的是控件的形狀，比如上面的圓形和美女，你可用shape.xml定義形狀圖片。比如，這是一個圓也可以直接給android:background設(shè)置一張圖片，比如：這里注意透明像素，還有為了圖片縮放的時(shí)候不變形，建議背景（不管是圖片還是圖形）為正方形。1.2在代碼中你可以選擇進(jìn)行如下設(shè)置：2.代碼實(shí)現(xiàn)這里實(shí)現(xiàn)主要用到的知識有自定義view、PorterDuffXfermode和二階貝塞爾曲線，不太清楚的可以在我博客找找，都有的。

首先自定義WaveProgressView繼承View，在構(gòu)造函數(shù)中獲取布局文件中設(shè)置的背景，同時(shí)設(shè)置一個畫波浪的畫筆和畫文字的畫筆。復(fù)寫onDraw方法，先把波浪畫在畫布上，然后畫背景（給背景畫筆設(shè)置PorterDuff.Mode.DST_ATOP模式：取上層非交集部分與下層交集部分）。當(dāng)然也可以是PorterDuff.Mode.SRC_ATOP，主要取決于你畫的先后順序。最后把文字畫上去，形成一個最終Bitmap，最后把這個Bitmap畫到onDraw的參數(shù)canvas上。這里的CurY是上次波浪中線的y軸坐標(biāo)，CurMidY是當(dāng)前的Y軸坐標(biāo)，每次波浪上升的時(shí)候?yàn)榱瞬划a(chǎn)生卡頓效果，把這1/100的上升分為10次來繪制。

distance是ｘ軸的偏移量，為了使水波動起來，每次繪制時(shí)都要向左進(jìn)行一段偏移。每次偏移距離為半波寬度／波浪震動速度，因?yàn)橐粋€波是４個半波寬度形成一個循環(huán)，然后又回到最開始ｘ位置開始循環(huán)位移。

根據(jù)view的寬度計(jì)算出一共要繪制多少個波形出來，同時(shí)多加一個波為了向左平移。每次繪制以波形的左邊點(diǎn)、波形的右邊點(diǎn)、view的左下角、view的右下角、形成一個圖片把它繪制到內(nèi)存中新建的和view同大小的canvas上。先對背景圖形進(jìn)行縮放再繪制到canvas上，這里的縮放是按最小邊進(jìn)行縮放。最后把文字繪制上去，注意我們在初始化中設(shè)置了畫筆，為了能通過代碼設(shè)置文字的顏色，要把設(shè)置文字畫筆顏色和大小放在onDraw方法中。為了使波浪動起來，使用handler循環(huán)調(diào)用invalidate刷新界面。同時(shí)應(yīng)該在構(gòu)造函數(shù)打開handler循