1. 程式人生 > >Android SwipeRefreshLayout下拉圖片的修改

Android SwipeRefreshLayout下拉圖片的修改

1.前言

   當今的APP中下拉重新整理,上拉載入這個功能,基本上是必備的,所以Android提供了SwipeRefreshLayout以實現重新整理功能,但是每個APP的設計不一樣,這時就需要更改下拉樣式,或是顯示圖片,這裡就以修改系統SwipeRefreshLayout的下拉圖示為例,以及一個第三方的下拉重新整理上拉載入的修改(這個第三方控制元件挺不錯的,可以在GitHub中關注一下,地址為:https://github.com/csguo/SwipyRefreshLayout/)。

2.實現方法

   言歸正傳,檢視SwipeRefreshLayout原始碼,發現他的下拉圖片是通過MaterialProgressDrawable和CircleImageView來繪製的,所以為了修改方便需要把上面三個類的原始碼複製下來,然後在這幾個類中進行修改,先來看一下效果。


   ①MaterialProgressDrawable:通過繼承Drawable和實現Animatable,並且定義了一個內部類Ring,其主要功能是用來繪製旋轉的圓環,以及實現動畫效果,所以要修改圓環以及動畫效果,就從這個類修改。

   ②CircleImageView:繼承ImageView,主要用來繪製的背景,並在SwipeRefreshLayout中MaterialProgressDrawable繪製在上面,從而實現下拉重新整理的進度效果,對背景有修改的則在這裡下手。

3.程式碼實現

說了這麼的,現在就看一下具體的程式碼要怎麼修改:

①先看一下系統MaterialProgressDrawable是如何繪製的,系統實現原始碼如下圖:


   在原始碼中發現他是在draw方法繪製進度的,通過c.drawArc繪製了一個圓環,然後在drawTriangle中繪製了圓環的三角形和圓環組合並實現旋轉。需要注意的是,在mAlpha<255判斷這裡,因為這裡給他繪製了一個背景圓,而且他的透明度是隨下拉位置變化的,也就是說如果沒有完全滑出的話,這裡是有一個半透明背景的,如果需要換的圖片不是圓形,建議將這裡直接改為透明,不然滑動的時候會有一個半透明的圈出現,效果會和你想象的效果很不搭。

②以下是我對程式碼的修改,修改程式碼如下:


   這裡直接將我們的圖片轉換成bitmap,然後將bitmap繪製上去即可,這裡我只換了圖片,所以根據系統原始碼,我們可以直接他這裡繪製的圓環去了,換成繪製bitmap的,因為這裡不需要對動畫進行修改,這裡這裡就直接將他的動畫複製過來直接使用。如果需要修改動畫的話,需要在c.drawBitmap做動畫,不然會無效,動畫就根據自己的需求來實現。

③現在看一下CricleImageView的實現程式碼,可以看出這裡主要繪製進度的背景,這裡實現就很簡單了,只要將背景圖換成自己的圖示就可以,修改程式碼如下圖。


4.對於下拉顯示圖片的修改,只要修改這兩個類就能實現更換下拉的圖片顯示效果。如果需要更換圖示的下拉動畫修改,這個就需要在SwipeRefreshLayout中修改,這裡就不闡述。

   這裡還對一個第三方的下拉重新整理上拉載入的控制元件的圖片修改,這個控制元件時和居於系統原始碼修改的,但是他沒有系統的下拉動畫效果,這裡只要把系統的下拉動畫類複製過去即可,因為這是居於系統原始碼修改的,方法名,變數名都是相同的,所以不需要修改多少,這個第三方的git地址可以檢視前言中檢視。

5.結序