現(xiàn)在微信的用戶體驗(yàn)一直被產(chǎn)品經(jīng)理們所推崇,今天這里具體分析一下微信在WebView的進(jìn)度條上怎么提升用戶體驗(yàn).

最終微信的加載進(jìn)度條的效果圖

網(wǎng)絡(luò)正常的狀態(tài)，分為兩種加載速度,前部分正常速度加載,后邊速度特意放慢,讓用戶感覺到你在非常賣力的在進(jìn)行網(wǎng)絡(luò)請(qǐng)求.

斷開網(wǎng)絡(luò)的狀態(tài)： 進(jìn)度條還是分為兩種速度,類似于網(wǎng)絡(luò)正常的狀態(tài),也能讓用戶感覺到你在非常賣力的在進(jìn)行網(wǎng)絡(luò)請(qǐng)求.

實(shí)現(xiàn)的思路

• 大方面要分兩種情況：沒有網(wǎng)絡(luò)，有網(wǎng)絡(luò)情況
  
• 實(shí)現(xiàn)加載進(jìn)度條的兩種速度，前邊比較快，后邊估計(jì)放緩慢
  
• 利用自定義View屬性動(dòng)畫實(shí)現(xiàn)進(jìn)度條的流暢加載
  
• 進(jìn)度條的漸變消失
  

遇到的難點(diǎn),踩過的坑

1、進(jìn)度條的位置問題

進(jìn)度條加載完成后消失，是invisible還是gone掉，前者會(huì)留下一片空白，后者會(huì)讓下邊的webview向上跳一下。有人會(huì)說獲取網(wǎng)頁的顏色，然后把進(jìn)度條的顏色換成相對(duì)應(yīng)的顏色，這個(gè)太復(fù)雜了。然后仔細(xì)看微信的實(shí)現(xiàn)方案，發(fā)現(xiàn)在相對(duì)布局xml中直接把進(jìn)度條放到webview后邊，然后置頂就可以了，加載完畢后就會(huì)消失。

2、斷開網(wǎng)絡(luò)狀態(tài)下,錯(cuò)誤攔截狀態(tài)下onProgressChanged還是會(huì)從0到100,會(huì)出現(xiàn)兩個(gè)進(jìn)度條,解決辦法辦法倒是簡單,當(dāng)時(shí)可是沒想通,斷網(wǎng)居然還走這個(gè)方法.

3、兩種進(jìn)度條加載速度的實(shí)現(xiàn)和進(jìn)度條的流暢加載

流暢加載 ::我這里自定義View來實(shí)現(xiàn)的,通過屬性動(dòng)畫來實(shí)現(xiàn)流暢加載

兩種加載速度 :

這里自定義View里邊設(shè)置方法和方法回調(diào)

兩種加載速度的具體實(shí)現(xiàn)

源碼地址：WebViewProgress_jb51.rar

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。