快捷導(dǎo)航

android實(shí)現(xiàn)用戶體驗(yàn)超棒的微信WebView進(jìn)度條

更新時(shí)間：2017年03月03日 08:17:30 作者：楊哲丶

本篇文章主要介紹了android實(shí)現(xiàn)用戶體驗(yàn)超棒的微信WebView進(jìn)度條，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

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

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

這里寫圖片描述

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

這里寫圖片描述

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

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

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

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

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

這里寫圖片描述

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

這里寫圖片描述