用戶體驗超棒的微信WebView進度條

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

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

  • 網(wǎng)絡正常的狀態(tài),分為兩種加載速度,前部分正常速度加載,后邊速度特意放慢,讓用戶感覺到你在非常賣力的在進行網(wǎng)絡請求.
這里寫圖片描述
  • 斷開網(wǎng)絡的狀態(tài): 進度條還是分為兩種速度,類似于網(wǎng)絡正常的狀態(tài),也能讓用戶感覺到你在非常賣力的在進行網(wǎng)絡請求.
這里寫圖片描述

實現(xiàn)的思路

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

遇到的難點,踩過的坑

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


    這里寫圖片描述
  2. 斷開網(wǎng)絡狀態(tài)下,錯誤攔截狀態(tài)下onProgressChanged還是會從0到100,會出現(xiàn)兩個進度條,解決辦法辦法倒是簡單,當時可是沒想通,斷網(wǎng)居然還走這個方法.


    這里寫圖片描述
  3. 兩種進度條加載速度的實現(xiàn)和進度條的流暢加載
    流暢加載 ::我這里自定義View來實現(xiàn)的,通過屬性動畫來實現(xiàn)流暢加載

    這里寫圖片描述

    兩種加載速度 :
    這里自定義View里邊設置方法和方法回調(diào)
    這里寫圖片描述

    兩種加載速度的具體實現(xiàn)
    這里寫圖片描述

源碼地址(歡迎follow,star)

https://github.com/StudyLifeTime/WebViewProgress

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,595評論 25 708
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,259評論 4 61
  • 大學畢業(yè)時,我選擇去一家私企工作,可能是受電視劇和小說影響,無比羨慕踩著高跟鞋拽著英文的白領們,認為私企快節(jié)奏的生...
    Miss懵閱讀 3,668評論 11 36
  • 我處理好了所有的關系,干凈,純粹,所有青澀的情感變得暴烈,暴烈之后又歸于沉靜,這種安靜讓人坦然,像青年園的風,像昨...
    穆諾閱讀 380評論 0 0