又到了每次的實際項目開發(fā)中的需求討論了。這次是因為做的項目是原生內(nèi)嵌WebView，所以當(dāng)我們的WebView在加載網(wǎng)頁的時候，需要有個加載進(jìn)度條，當(dāng)然這時候有很多種選擇，但是因為普通的對話框類型的加載框太丑，我們就舍棄掉了，而是模仿微信里面的進(jìn)度加載條，也就是在WebView 的頂部會有一條線來顯示加載進(jìn)度。（也就是下方GIF圖中的那個紫紅色的進(jìn)度條，別問我為啥用紫紅色。我就覺得用這個顏色更加明顯點。O(∩_∩)O~）

聲明大家不要噴哈，有問題可以評論反饋。我做的可能也不是很好

先附上Demo:DEMO

一些關(guān)于WebView的基礎(chǔ)我就不說了。大家可以看看
Android之WebView快速上手

OK ,進(jìn)入我們的正題，我們先要知道怎么監(jiān)聽到網(wǎng)頁加載的進(jìn)度。

監(jiān)聽網(wǎng)頁加載進(jìn)度：

我們按照上面的Android之WebView快速上手所說的：

我們知道了WebChromeClient中有個onProgressChanged方法可以用來監(jiān)聽，所以我們復(fù)寫onProgressChanged方法：

WebView webView = (WebView) findViewById(R.id.webview);
webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
        ....
        ....
        ....
     
    }
});

好了，我們現(xiàn)在在訪問網(wǎng)頁的時候已經(jīng)可以拿到了進(jìn)度值了。也就是newProgress。這里要注意一個問題，那就是如果你在這里打上Log你會發(fā)現(xiàn)，這個newProgress值不是說按我們想象中那樣，從0慢慢到100，可能就是（0->16->30->100）就返回這四次數(shù)字。所以如果我們直接讓我們的進(jìn)度條按照它的newProgress值來變化，就有個問題，那就是會變化特別大，而且速度也特別快。體驗一點也不好。所以這里我處理方式是，當(dāng)newProgress 大于85 的時候，讓他慢慢的在特定時間內(nèi)加載完剩下的進(jìn)度，這樣給人的感覺也是很平穩(wěn)的

自定義進(jìn)度條：

其實這個自定義進(jìn)度條很簡單，其實就是畫了一個矩形，然后矩形的width就是根據(jù)我們拿到的網(wǎng)頁的進(jìn)度來實時的變化：

public class WebProgressBarView extends View{
    
    ....
    ....
    ....

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = MeasureSpec.getSize(widthMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        float result = mWidth * ((float) mCurProgress / (float) 100);
        canvas.drawRect(0, 0, result, mHeight, mPaint);
    }
}

我們在上面提到。我們在大于85的時候，讓他慢慢的加載完畢，所以我們這里要有二個方法：

1. 正常方法：

public void setNormalProgress(int mCurProgress){
    this.mCurProgress = mCurProgress;
    postInvalidate();
}

2.慢慢加載的方法:

public void setCurProgress(long time, final EventEndListener endListener){
        ValueAnimator animator = ValueAnimator.ofInt(mCurProgress,100);
        animator.setDuration(time);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                setNormalProgress((Integer) animation.getAnimatedValue());
            }
        });

        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                 if(endListener != null){
                     endListener.onEndEvent();
                 }
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });

        animator.start();

    }

繼續(xù)補(bǔ)充onProgressChanged方法:

既然我們寫好了自定義進(jìn)度條的View ,我們回頭再來補(bǔ)充下onProgressChanged方法:

webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);

        //如果進(jìn)度條隱藏則讓它顯示
        if (View.GONE == progressBarView.getVisibility()) {
            progressBarView.setVisibility(View.VISIBLE);
        }

        if (newProgress >= 85) {
            if (isContinue) {
                return;
            }
            isContinue = true;
            progressBarView.setCurProgress(1000, new WebProgressBarView.EventEndListener() {
                @Override
                public void onEndEvent() {
                    isContinue = false;
                    if (progressBarView.getVisibility() == View.VISIBLE) {
                        hideProgress();
                    }
                }
            });
        } else {
            progressBarView.setNormalProgress(newProgress);
        }
    }
});

我們看到了。我們的進(jìn)度大于85的話，就在一秒鐘內(nèi)慢慢的加載完，加載完后調(diào)用hideProgress方法來隱藏進(jìn)度條，

private void hideProgressWithAnim() {
    AnimationSet animation = getDismissAnim(MainActivity.this);
    animation.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            progressBarView.setVisibility(View.GONE);
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }
    });
    progressBarView.startAnimation(animation);
}

private AnimationSet getDismissAnim(Context context) {
    AnimationSet dismiss = new AnimationSet(context, null);
    AlphaAnimation alpha = new AlphaAnimation(1.0f, 0.0f);
    alpha.setDuration(1000);
    dismiss.addAnimation(alpha);
    return dismiss;
}

問題：

實際操作中的問題，這里我也遇到問題：

1. 那就是網(wǎng)頁加載沒有想象中那樣加載一次。網(wǎng)頁可能會有重定向跳轉(zhuǎn)這種，雖然你可能感覺就打開了一個鏈接，你會發(fā)現(xiàn)newProgress 從0 -> 100后，會再多次調(diào)用0->100。這里我不知道一般大家在做其他APP的WebView進(jìn)度條的時候，是按照它真實的newProgress來加載，也就是加載了一次全的，然后進(jìn)度條重新加載一次，再加載一次。還是說只加載第一次的0->100的進(jìn)度條。
2. 我本來想加載第一次進(jìn)度條，后面的newProgress的重新0->100我就不管了。我就想到重寫WebViewClient，因為里面有二個方法：

//當(dāng)網(wǎng)頁加載完畢后這個方法會被回調(diào)
public void onPageFinished (WebView view, String url)
//當(dāng)網(wǎng)頁開始加載時這個方法會被回調(diào)
public void onPageStarted (WebView view, String url, Bitmap favicon)

然后我就想到定義一個boolean值，這樣豈不是可以在這二個方法里面賦值，然后用來控制。
可是我打了Log發(fā)現(xiàn)，比如我WebView打開的是https://www.baidu.com，然后打開顯示的百度首頁中某個新聞,onPageStarted并不會調(diào)用。而onPageFinished還是會被調(diào)用，我想了解下什么時候onPageStarted不會被去調(diào)用。 ╮(╯﹏╰）╭

如果大家能幫忙答疑就謝謝了。