带进度条的WebView

通常我们使用webView加载网页的时候，如果直接加载会显得很突兀，所以要加一个过渡，当网页还没显示完全的时候，有个进度条显示进度，如图所示

就是上面那个蓝色的进度条

我们来重写一下WebView

/** * User: Picasso * Date: 2015-11-29 * Time: 14:06 */
@SuppressWarnings("deprecation")
public class ProgressWebView extends WebView {

    private ProgressBar progressbar;

    public ProgressWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
        progressbar = new ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal);
        progressbar.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, 10, 0, 0));
        progressbar.setProgressDrawable(context.getResources().getDrawable(R.drawable.progress_bar));

        addView(progressbar);
        // setWebViewClient(new WebViewClient(){});
        setWebChromeClient(new WebChromeClient());
        setWebViewClient(new MyWebViewClient());
    }

    public class WebChromeClient extends android.webkit.WebChromeClient {
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            if (newProgress == 100) {
                progressbar.setVisibility(GONE);
            } else {
                if (progressbar.getVisibility() == GONE)
                    progressbar.setVisibility(VISIBLE);
                progressbar.setProgress(newProgress);
            }
            super.onProgressChanged(view, newProgress);
        }

    }

    private class MyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }


        @Override
        public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
            super.onReceivedError(view, request, error);
            LogCat.i("onReceivedError");
        }
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        LayoutParams lp = (LayoutParams) progressbar.getLayoutParams();
        lp.x = l;
        lp.y = t;
        progressbar.setLayoutParams(lp);
        super.onScrollChanged(l, t, oldl, oldt);
    }
}

在WebView的设计中，不是什么事都要WebView类干的，有些杂事是分给其他人的，这样WebView专心干好自己的解析、渲染工作就行了。WebViewClient就是帮助WebView处理各种通知、请求事件的，具体已在上一篇博客中介绍了WebViewClient（请戳这里）

WebChromeClient是辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等，这里就是用到了WebChromeClient。在WebChromeClient的onProgressChanged方法中，可以判断当前网页加载了多少，在这个里面是显示进度条的显示是最准确的。

当然默认的progressBar是很丑的，所以我们要稍微装饰修改一下这个progressBar

        progressbar = new ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal);
        progressbar.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, 10, 0, 0));
        progressbar.setProgressDrawable(context.getResources().getDrawable(R.drawable.progress_bar));

progress_bar.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 设置背景色（黑色） -->
<!-- <item android:id="@android:id/background" > <shape> <corners android:radius="5dip" /> <gradient android:startColor="#000000" android:endColor="#000000" /> </shape> </item>-->
    <!-- 设置进度条颜色（蓝色） -->
    <item android:id="@android:id/progress" >
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient android:startColor="#00BCD4" android:endColor="#00BCD4" />
            </shape>
        </clip>
    </item>

</layer-list>  

这样就完成了。