淺談Android開發Webview的Loading使用效果

Posted on by

前言

在開發webview的loading效果的時候會有一些問題，這邊記錄一些碰到的常見的問題，並且設計出一套Loading的方案來解決相關的問題。

1. loading的選擇

開發loading效果的原因在於webview加載頁面的時候，有時候會耗時，導致不顯示內容又沒有任何提示，效果不太好，所以需要在webview使用的地方加上loading的效果，其實更好的體驗是還要加上EmptyView，我這邊主要就以loadingView來舉例。

那開發這loading基本有兩種方式，一種是使用window，也就是Dialog這些彈窗的方式，在加載時彈出彈窗，在加載結束後關閉彈窗，有些人可能會封裝好一些loading彈窗，然後在這裡復用。

這個方法的好處是如果你封裝好瞭，能直接復用，省去很多代碼。缺點也很明顯，彈窗彈出的時候是否處於一個不允許交互的情況，如果這個流程有問題，那便一直無法和頁面做交互

另一種方法是直接在webview的上層覆蓋一個LoadingView，webview是繼承FrameLayout，就是也可以直接addView。

這個方法的好處就是不會出現上面的問題，因為我webview所在的頁面關閉瞭，它的loading也會跟著一起消失，而且顯示的效果會好一些。缺點就是可能一些特殊的webview你會單獨做操作，導致會多寫一些代碼

沒有說哪種方法是實現會比較好，主要看使用的場景和具體的需求。

2. loading顯示時機的問題

我們做loading的思路就是加載開始的時候顯示，加載完成之後關閉，那選擇這個開始的時機和結束的時機就比較重要瞭。

大多數人都會直接使用WebViewClient的onPageStarted回調作為開始時機，把onPageFinished的回調，覺得直接這樣寫就行瞭，無所謂，反正webview會出手。

這個思路確實能在正常的情況下顯示正常，但是在弱網情況下呢？復雜的網絡環境下呢？有些人可能也會碰到一些這樣的情況，loading的show寫在onPageStarted中，加載時會先白屏一下，才開始顯示loading，但是這個白屏的時間很短，所以覺得無所謂。但有沒有想過這在正常網絡環境下的白屏一下放到復雜的有問題的網絡環境中會被放大成什麼樣。

這個加載過程其實大體分為兩個階段，從loadurl到WebViewClient的onPageStarted和從WebViewClient的從onPageStarted到onPageFinished

所以我的做法是在loadurl的時候去start loading，而不是WebViewClient的onPageStarted回調的時候。

這個是開始的時機，那結束的時機會不會有問題，還真可能有，有時候你會發現一種現象，加載完之後，你的H5內容和loading會同時顯示一段時間，才關閉loading（幾年前有碰到過，寫這篇文章的時候測試沒有復現過，不知道是不是版本更新修復瞭這個問題）

那如果碰到這個問題該怎麼解決呢？

碰到這個問題，說明onPageFinished的回調時機在頁面加載完之後，所以不可信。我們知道除瞭這個方法之外，BaseWebChromeClient也有個方法onProgressChanged表示加載的進度，當然這個進度你拿去判斷也會有問題，因為它並不會每次都會回調100給你，可能有時候給你96,就沒瞭。我以前的做法是雙重判斷，判斷是進度先返回>85還是onPageFinished先調用，隻要有一個調用，我都會關閉loading

3. 體驗優化

當然處理好顯示的關閉的時機還不行，想想如果在loadurl中show loading會怎樣，沒錯，就算網速快的情況，頁面讓loading一閃而過，那這樣所造成的體驗就很不好，所以我們需要做一個延遲顯示，我個人習慣是延遲0.5秒。當然延遲顯示也會有延遲顯示的問題，比如延遲到0.3秒的時候你關閉頁面怎麼辦，再0.2秒之後我總不不能讓它顯示吧。

說瞭顯示，再說關閉。無論是onPageFinished方法還是onProgressChanged，你能保證它一定會有回調嗎？這些代碼都不是可控的，裡面會不會出現既沒拋異常，也沒給回調的情況。也許有人說不會的，我都用瞭這麼多年瞭，沒出現過這種問題，但是既然不是我們可控的代碼，加一層保險總沒錯吧。

其實這也簡單，定一個timeout的邏輯就行，我個人是定義10秒超時時間，如果10秒後沒有關閉loading，我就手動關閉並顯示emptyview的error頁面。這個超時時間還是比較實用，最上面說瞭loading的選擇，如果你的loading做成view，那即便沒有這個邏輯也影響不大，最多就會菊花一直轉，但如果你是window做的，沒有超時的處理，又沒有回調，那你的window會一直顯示卡住頁面。

4. loading最終設計效果

基於上面的情況，我寫個Demo，首先loading的選擇，我選擇基於view，所以要寫個自定義View

public class WebLoadingView extends RelativeLayout {
    private Context mContext;
    // 0：正常狀態；1：loading狀態；2：顯示loadingview狀態
    private AtomicInteger state;  
    private Handler lazyHandler;
    private Handler timeOutHandler;
    public BaseWebLoadingView(Context context) {
        super(context);
        init(context);
    }
    public BaseWebLoadingView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }
    public BaseWebLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }
    private void init(Context context) {
        this.mContext = context;
        state = new AtomicInteger(0);
        lazyHandler = new Handler(Looper.getMainLooper());
        timeOutHandler = new Handler(Looper.getMainLooper());
        initView();
    }
    private void initView() {
        LayoutInflater.from(mContext).inflate(R.layout.demo_loading, this, true);
    }
    public void show() {
        if (state.compareAndSet(0, 1)) {
            lazyHandler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    if (state.compareAndSet(1, 2)) {
                        setVisibility(View.VISIBLE);
                    }
                }
            }, 500);
            timeOutHandler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    close();
                }
            }, 10000);
        }
    }
    public void close() {
        state.set(0);
        setVisibility(View.GONE);
        try {
            lazyHandler.removeCallbacksAndMessages(null);
            timeOutHandler.removeCallbacksAndMessages(null);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

代碼應該都比較好理解，就不過多介紹瞭，然後在自定義webview的loadurl裡面展示

@Override
public void loadUrl(String url) {
    if (webLoadingView != null && !TextUtils.isEmpty(url) && url.startsWith("http")) {
        webLoadingView.show();
    }
    super.loadUrl(url);
}

寫這裡主要是有個地方要註意，就是調方法時也會執行這個loadUrl，所以要判斷是加載網頁的時候才顯示loading。

總結

總結幾個重點吧，第一個是對第三方的東西（webview這個也類似第三方吧，坑真的很多），我們沒辦法把控它的流程，或者說沒辦法把控它的生命周期，所以要封裝一套流程邏輯去給調用端方便去使用。
第二個問題是版本的問題，也許會出現不同的版本所體現的效果不同，這個是需要留意的。

如果要完美解決這堆loading相關的問題，最好的方法就是看源碼，你知道它裡面是怎麼實現的，為什麼會出現onPageStarted之前還會有一段間隔時間，那就去看loadUrl和onPageStarted回調之間的源碼，看它做瞭什麼操作嘛。我個人是沒看源碼，所以這裡隻能說是淺談。

以上就是淺談Android開發Webview的Loading使用效果的詳細內容，更多關於Android Webview Loading的資料請關註WalkonNet其它相關文章！

推薦閱讀：