【移動應用開發(fā)技術】Android自定義View仿騰訊TIM下拉刷新View

【移動應用開發(fā)技術】Android自定義View仿騰訊TIM下拉刷新View

一概述

自定義View是Android開發(fā)里面的一個大學問。偶然間看到TIM郵箱界面的刷新View還挺好玩的，于是就自己動手實現(xiàn)了一個，先看看TIM里邊的效果圖：二需求分析

看到上面的動圖，大概也知道我們需要實現(xiàn)的功能：三功能實現(xiàn)

新建一個RefreshView類繼承自View，然后我們再在RefreshView里面新建一個內(nèi)部實體類：Circle

來看一下Circle類的代碼

#Cirlce.java

這是一個實體類，里面提供了x,y,r,color屬性分別代表圓心坐標的x值，y值，圓的半徑r跟顏色。

借助此類來存儲小圓球的相關屬性。

接下來就是我們平時自定義View經(jīng)常要重寫的三大方法了，先看onMeasure()

#RefreshView.java

為了適配布局文件中的wrap_content參數(shù)，我們需要重寫此方法(此方法不是本文的研究重點，不明白的可以百度或者google一下，或者參考《Android開發(fā)藝術探索》里面的相關章節(jié))。

接著看onLayout()方法：

#RefreshView.java

在此方法中調(diào)用了initContentAttr()方法來初始化內(nèi)容大小與resetCircles()來初始化（重置）三個小球的屬性。分別看下這兩個方法：

#RefreshView.java

這方法很簡單，就是進行了padding的處理，得出真正的布局大小。如果不處理padding的話那么用戶設置了padding將失效。再看resetCircles()：

#RefreshView.java

此方法用于初始化和重置小球，方法里面進行的兩個大的if...else語句判斷，第一個if用于判斷是否應該初始化小球，第二個語句則是用于判斷小球的初始化時候的形態(tài)?？梢栽谕獠空{(diào)用setOriginState()方法來指定小球的初始化形態(tài)，如不指定，則默認為NOMAL,即三球重合。

#RefreshView.java

最后就是最有趣的方法onDraw()了：

#RefreshView.java

這方法很簡單，就是將mCircles列表里面的圓畫出來而已（里面進行了padding的處理）。

三大方法都講完了，可是這只是畫出了幾個小圓球而已，我們需求分析里的需求還沒實現(xiàn)呢，上面的方法已經(jīng)把View的基礎搭起來了，要實現(xiàn)這個也就不難了。接下來就是大家期待的需求實現(xiàn)了：根據(jù)拖動的進度來移動小球的位置

實現(xiàn)代碼如下：

#RefreshView.java

在方法里面進行三次判斷，如果初始狀態(tài)是STATE_PREPARED（三小球距離最大,沒必要再變動了）、動畫正在進行或者進度大于1都不進行移動。然后修改小球的屬性，再重繪。小球移動過程的動畫

這個是這個自定義View最難的部分了，需要一些數(shù)學的小運算，有點繁瑣。

我們先來理清實現(xiàn)動畫的邏輯，看了開篇的gif，應該可以了解到，剛準備開始動畫時，左邊的小球應該是處于最左端，中間的小球處于中間，右邊的處于最右端。我們一個個小球來分析。理清小球的移動過程對代碼的實現(xiàn)很有幫助，我們可以分析出：

1）每個小球對于坐標系的移動特點是一樣的。

2）每個小球對于動畫的進度的移動特點是不一樣的。

聽起來好像有點拗口，我們用人話來解釋一下：

1）每個小球對于坐標系的移動特點是一樣的：左邊的小球在坐標的最左邊是先出現(xiàn)，然后再向右移動，那么中間和右邊的小球呢？其實是同樣的，它們在坐標軸最左邊的時候都是先出現(xiàn)，再向右移動，無論哪個小球，它們在坐標軸的同一點上的動作和形態(tài)應該是一致的。

2）每個小球對于動畫的進度的移動特點是不一樣的：左邊的小球在動畫剛開始時是處于最左端，而中間的小球卻在中間位置，右邊的則在最右端。當動畫開始后，比如進行了一半，這時候左邊的小球應該移動到了中點附近，而中間的確是在末端（消失），右邊的小球就會出現(xiàn)在中間附近。

按照上面分析的邏輯，我把動畫的總進度分為6份，為什么是6份呢？通過上面的動畫分析，知道小球應該經(jīng)歷一下過程（不分時間先后）：為了讓小球之間的間隔保持一個優(yōu)美的狀態(tài)（動畫開始后小球間不會重疊，相鄰小球的間隔基本一致），就把1、4出現(xiàn)和消失階段分別設為1/6的動畫周期，中間2、3兩個階段分別占用1/3個動畫周期。這樣一來，出現(xiàn)跟消失占用了1/3動畫進度，其他兩個部分分別占用了1/3動畫進度。舉個例子：剛開始動畫時，設最左邊的小球為1，中間的小球為2，最右端的小球為3。

當小球1移動到中點時，這時動畫進行了1/3,那么此時的小球2就應該移動到末端，小球3則剛好經(jīng)歷消失和出現(xiàn)過程，于是應該出現(xiàn)于坐標軸的起點。

由此可以看到又恢復到了剛開始時候的情況(一個小球在最左，一個在中，一個在最右)，只不過是顏色不同了而已。以此類推，無限循環(huán)，就可以形成優(yōu)美的動畫了。

分析出這些有什么用呢？我發(fā)現(xiàn)用坐標來確定小球的移動實現(xiàn)起來會有點小問題，所以就用動畫的進度來實現(xiàn)，下面看具體實現(xiàn)。

需要實現(xiàn)小球的無限運動，最實用的就是用動畫來實現(xiàn)，這里我用了屬性動畫。先初始化Animotor類：

#RefreshView.java

可以看到，這是一個無限循環(huán)的動畫，如果不手動停止，它就會一直循環(huán)下去。對于mAnimator,還添加了一個監(jiān)聽器，當開始動畫是就調(diào)用prepareToStart()方法，這個方法看起來是不是有點眼熟，沒錯，它就是我們上面resetCircles()里面判斷小球形態(tài)為STATE_PREPARED是調(diào)用過，此方法將確保小球達到刷新的臨界點。我們主要看看UpdateLisener中的onAnimationUpdate()方法里面的updateCircle()方法：

#RefreshView

我用了一個virtualFraction來表示每個小球的虛擬進度（相當于上面坐標圖中的下值，即坐標百分比），例如當動畫的總進度為0時，左小球的虛擬進度就應該是1/6+0(默認已經(jīng)經(jīng)過了出現(xiàn)過程，消耗了1/6)，中間小球的虛擬進度為1/6+1/3+0=1/2（默認經(jīng)歷了出現(xiàn)，移動到中間過程）,最右邊小球的虛擬進度為1/6+1/3+1/3+0=5/6。然后動畫的總進度到1/3時，左小球的虛擬進度就為1/2（中間位置）

下面再看下move()、appear()、disapear()方法：

#RefreshView

這個三個方法都很簡單，根據(jù)坐標的占比來計算出小球的坐標跟大小。

以上就是整個RefershView的實現(xiàn)了，如果需要看源碼的可以拉到文末。四使用及效果

看下怎么使用：

#MainActi