Android開源：WebViewProgress - 用戶體驗超棒的微信WebView進度條

現在微信的用戶體驗一直被產品經理們所推崇,今天這里具體分析一下微信在WebView的進度條上怎么提升用戶體驗.

最終微信的加載進度條的效果圖

• 網絡正常的狀態 ，分為兩種加載速度,前部分正常速度加載,后邊速度特意放慢,讓用戶感覺到你在非常賣力的在進行網絡請求.

• 斷開網絡的狀態 ： 進度條還是分為兩種速度,類似于網絡正常的狀態,也能讓用戶感覺到你在非常賣力的在進行網絡請求.

實現的思路

1. 大方面要分兩種情況：沒有網絡，有網絡情況
2. 實現加載進度條的兩種速度，前邊比較快，后邊估計放緩慢
3. 利用自定義View屬性動畫實現進度條的流暢加載
4. 進度條的漸變消失

遇到的難點,踩過的坑

1. 進度條的位置問題

   進度條加載完成后消失，是invisible還是gone掉，前者會留下一片空白，后者會讓下邊的webview向上跳一下。有人會說獲取網頁的顏色，然后把進度條的顏色換成相對應的顏色，這個太復雜了。然后仔細看微信的實現方案，發現在相對布局xml中直接把進度條放到webview后邊，然后置頂就可以了，加載完畢后就會消失。

   

2. 斷開網絡狀態下,錯誤攔截狀態下onProgressChanged還是會從0到100,會出現兩個進度條,解決辦法辦法倒是簡單,當時可是沒想通,斷網居然還走這個方法.

   
3. 兩種進度條加載速度的實現和進度條的流暢加載
   流暢加載 : :我這里自定義View來實現的,通過屬性動畫來實現流暢加載

兩種加載速度 :
這里自定義View里邊設置方法和方法回調

兩種加載速度的具體實現