聲明:本篇文章的目的是讓大家可以自己動手實現一個組件,本人寫的這個加載頁面組件也特意起名叫EasyLoading,所以不會考慮各種情況。因為不同的APP有各種不同的風格,界面布局也五花八門,所以還是自己手動擼一個組件吧。
非入侵式組件
非入侵式組件是什么意思呢?簡單的說就是動態加載由代碼編譯生成的組件。如果是把組件寫在xml布局文件中的話就可以說是入侵式組件,因為它入侵了我們原來的布局。哥的理解就是那么粗暴!
使用背景
每當跳轉到一個新的頁面的時候往往會請求數據接口,很多時候我們的頁面需要通過請求得到的數據來填充。在拿到數據前頁面就會有個尷尬期,這時就需要用一個組件把頁面的內容區域遮蓋住,根據各種情況給用戶一個反饋。這就是加載頁面的作用。
優雅的使用加載頁面
我覺得每一個移動端的程序員都會做過這件事,就是寫一個xml加載布局,通過<include>標簽使用加載布局把內容區域遮蓋,數據加載成功的時候就把加載布局隱藏,失敗后就通過代碼修改加載布局里面控件的屬性來提示用戶。每寫一個頁面就重復一次這樣的工作,等到不勝其煩的時候就要思考怎么偷懶了。比較優雅的方式就是通過代碼動態生成一個加載頁面組件,在需要用到的頁面把它添加到我們的根布局中,然后根據加載中、加載成功、加載失敗、數據為空的情況調用組件里對應的方法,這是面向對象的基本思想。說了那么多,上效果圖:
再看看我們布局文件的xml代碼
這樣就可以很容易的理解什么是非入侵式組件了,新增的加載布局對我們原來的布局代碼完全沒有影響。
組件剖析
先來看一下超級簡單的結構
EasyLoading類,主要的作用是實例化一個加載布局,然后將加載布局添加到頁面的根布局中,整個類不到100行代碼
EasyLoadingView類,這是個抽象的View類,整個類不到50行代碼。抽象了加載布局的主要實現方法,同學們可以通過實現這個類來自定義一個加載布局(可以參照LoadingView)然后在EasyLoading類中替換原來的加載布局。本人的目的就是鼓勵大家自己動手去寫一個和自己項目或自己的習慣高度契合的組件。懶的同學直接用應該問題也不大,替換一下圖片就可以了,加載中的圖片還是建議使用動圖,這里我使用了幀動畫實現。
LoadingView類是EasyLoadingView的實現類200行不到的代碼量,主要通過代碼生成了加載中提示圖片、提示文字、重載按鈕,就不貼代碼了。
EasyReloadInterface類一個簡單的回調接口,用于響應重新加載按鈕點擊事件
可以看到代碼量是極少了,因為本人是個密集恐懼癥患者,看到密密麻麻的代碼就頭皮發麻,所以盡量寫得簡單,代碼簡單了也相信大家都能看得懂。再次強烈建議自己動手擼一個組件,養成一個好習慣,把需要重復工作的環節逐個消滅,專注業務,避免做重復工作。