前言

在開發(fā)webview的loading效果的時候會有一些問題，這邊記錄一些碰到的常見的問題，并且設(shè)計出一套Loading的方案來解決相關(guān)的問題。

1. loading的選擇

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

那開發(fā)這loading基本有兩種方式，一種是使用window，也就是Dialog這些彈窗的方式，在加載時彈出彈窗，在加載結(jié)束后關(guān)閉彈窗，有些人可能會封裝好一些loading彈窗，然后在這里復(fù)用。

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

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

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

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

2. loading顯示時機的問題

我們做loading的思路就是加載開始的時候顯示，加載完成之后關(guān)閉，那選擇這個開始的時機和結(jié)束的時機就比較重要了。

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

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

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

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

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

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

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

3. 體驗優(yōu)化

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

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

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

4. loading最終設(shè)計效果

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

public class WebLoadingView extends RelativeLayout {
    private Context mContext;
    // 0：正常狀態(tài)；1：loading狀態(tài)；2：顯示loadingview狀態(tài)
    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();
        }
    }
}

代碼應(yīng)該都比較好理解，就不過多介紹了，然后在自定義webview的loadurl里面展示

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

寫這里主要是有個地方要注意，就是調(diào)方法時也會執(zhí)行這個loadUrl，所以要判斷是加載網(wǎng)頁的時候才顯示loading。

總結(jié)

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

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

以上就是淺談Android開發(fā)Webview的Loading使用效果的詳細(xì)內(nèi)容，更多關(guān)于Android Webview Loading的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論