【移動(dòng)應(yīng)用開發(fā)技術(shù)】android使用Ultra-PullToRefresh實(shí)現(xiàn)下拉刷新自定義代碼

【移動(dòng)應(yīng)用開發(fā)技術(shù)】android使用Ultra-PullToRefresh實(shí)現(xiàn)下拉刷新自定義代碼

下拉刷新中Ultra-Pull-To-Refresh一直是我最喜歡用的了，這里自定義一個(gè)HeaderView的樣式。和普通的樣式略微有些區(qū)別。先看效果圖一眼看上去和普通下拉刷新樣式?jīng)]啥區(qū)別，但仔細(xì)看會(huì)發(fā)現(xiàn)下拉時(shí)的頭部是蓋在內(nèi)容上的(為了簡(jiǎn)便，這里整個(gè)布局內(nèi)容就一張圖片)。而PtrFrameLayout默認(rèn)布局樣式是將header放置在內(nèi)容上方，下拉時(shí)從上到下逐漸顯示。要實(shí)現(xiàn)這種頭部覆蓋在屏幕內(nèi)容上的效果就需要我們另外想辦法了。方案1：修改庫(kù)文件的，將headerView的顯示位置放置在內(nèi)容上方。由于PtrFrameLayout本身自己是一個(gè)ViewGroup，修改其中的onLayout的代碼即可實(shí)現(xiàn)該樣式但是，這里考慮到這里L(fēng)ayout修改后可能會(huì)導(dǎo)致的下拉刷新原本功能的一系列問題，想想還是直接放棄。方案2：不修改庫(kù)文件，HeaderView的位置不變，只是將headerView的內(nèi)容顯示到content上面。這樣的話HeaderView的內(nèi)容顯示就超出了其自身邊界，聽說(shuō)在布局上加上一句神奇的代碼可以實(shí)現(xiàn)，于是自己去嘗試了下，確實(shí)真的可以。所以就選擇方案2繼續(xù)研究。確定方案2后剩下的就是和普通自定義頭部差不多的步驟。自定義一個(gè)View實(shí)現(xiàn)PtrUIHandler的回調(diào)。其中用到的幾張圖片首先觀察下拉刷新的過(guò)程可以知道，整個(gè)下拉刷新過(guò)程中的幾種狀態(tài)。狀態(tài)1：開始下拉時(shí)底部顯示弧線，黃色小人眼睛閉著（左1圖片），此時(shí)下拉的高度不足以觸發(fā)刷新操作；狀態(tài)2：下拉到可以觸發(fā)刷新操作的高度后眼睛睜開（左2圖片）；狀態(tài)3：松手后刷新過(guò)程中的動(dòng)作，動(dòng)作由后面5張圖輪播切換顯示。下拉刷新的距離以及狀態(tài)判斷處理在onUIPositionChange回調(diào)方法中因?yàn)樵诘却⑿逻^(guò)程中也可以繼續(xù)滑動(dòng)，為了刷新的正常顯示，這里添加了isRefresh（是否正在刷新）以及isComplete（是否刷新完成）的判斷。另外，由于最后刷新時(shí)保持顯示的是后面5張圖，因此控件高度的measureHeight需要與后面圖的大小有關(guān)，但是后面圖片小黃人的上下邊距太小，看上去視覺效果不太好，在設(shè)置measureHeight的時(shí)候特地增加了上下邊距準(zhǔn)備工作就緒，接下來(lái)就是重點(diǎn)onDraw中的方法。根據(jù)不同的狀態(tài)繪制，但是這里有個(gè)麻煩的地方，上面7張圖中，小黃人大小是一樣的，但是后面5張圖周圍有了云朵背景，圖片整體比前兩張要大，所以在狀態(tài)切換時(shí)，圖片的繪制范圍需要格外注意。

1.繪制弧線階段，flag=1和2

其中弧線是一條二階貝塞爾曲線。代碼中controlY為控制點(diǎn)P1的Y坐標(biāo)，turning值表示下拉多少距離后開始繪制弧線（可以修改值來(lái)看看效果）。在這里我們的控制點(diǎn)X坐標(biāo)在屏幕的中心（t=0.5），P0和P2的X坐標(biāo)也是確定的，只需要求得對(duì)應(yīng)的曲線Y軸最高點(diǎn)即可。又因?yàn)镻0和P2Y軸坐標(biāo)相同，都為measureHeight，所以這里二階曲線的最高點(diǎn)左邊簡(jiǎn)化計(jì)算為采用clipPath方式裁剪畫布，使得圖片按弧線顯示部分。

2.放手后開始刷新階段，flag=3圖片循環(huán)輪播，計(jì)算好圖片位置與時(shí)間間隔，定時(shí)切換圖片但是在這里顯示上如果松手，弧線會(huì)立馬消失，顯示上不太友好。不過(guò)PtrFrameLayout自身帶有一個(gè)參數(shù)mDurationToClose，可以理解為放手后界面回彈到刷新高度所預(yù)留的時(shí)間，可以在這個(gè)時(shí)間內(nèi)對(duì)顯示做些優(yōu)化。在這里我根據(jù)這個(gè)時(shí)間值做了弧線緩慢上彈的動(dòng)畫。

在onDraw中對(duì)應(yīng)的顯示

具體效果如果看上面gif圖不清晰的話可以將代碼下載下來(lái)自己運(yùn)行，可以將該部分注釋后對(duì)比兩種效果，對(duì)比還是蠻明顯的。

3.刷新完成后還原的過(guò)程4.初始狀態(tài)，未下拉或者下拉高度未達(dá)到繪制弧線的高度到這里整個(gè)onDraw方法就完成了，其中關(guān)于圖片繪制與顯示位置的計(jì)算費(fèi)了不少腦細(xì)胞。然后在代碼中添加上PtrFrameLayout的配置即可使用這些配置屬性也可以寫在xml中，下拉刷新的自定義基本就完成了。不過(guò)別高興太早，在繪制弧線的時(shí)候封閉區(qū)域采用了顏色填充，這個(gè)填充顏色就是paint的顏色，這個(gè)顏色要和跟布局顏色保持一致，不然自己試試看，這里我沒有給PtrFrameLayout設(shè)置背景色，而是采用了Theme，設(shè)置