Android 为 WebView 添加进度条

之前『Android Toolbar 显示 WebView Title』等文章中提到现在很多 App 都使用内嵌网页的方式来提高迭代效率，而『WeChat』便是其一，最大的体现就是在公众号文章中，不过其使用的不是原生的 WebView，而是定制的腾讯 X5 内核 TBS。

其中比较有用的是，在加载网页时，上方会有一个进度条用于展示当前网页的加载进度：

这是一个很好的交互控件，能够让用户知晓当前的加载状态，来作出对应的操作。

那么原生 WebView 能否加上一个进度条呢？当然可以。

首先需要在「drawable」文件夹下创建一个进度条 ProgressBar 的背景样式，这里我把它命名为「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="2dp" />
            <gradient
                android:angle="270"
                android:centerColor="#E3E3E3"
                android:endColor="#E6E6E6"
                android:startColor="#C8C8C8" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="2dp" />
                <gradient
                    android:centerColor="#999999"
                    android:endColor="#999999"
                    android:startColor="#999999" />
            </shape>
        </clip>
    </item>
</layer-list>

在布局文件内加入 ProgressBar 控件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize" />
    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:progressDrawable="@drawable/progress_bar"
        android:visibility="gone"
        style="?android:attr/progressBarStyleHorizontal" />
    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

ProgressBar 控件导入了刚才的背景样式，并指定了其 style。

最后写出其显示逻辑：

ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress_bar);
WebView webView = (WebView) findViewById(R.id.web_view);
webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        if (newProgress == 100) {
            progressBar.setVisibility(View.GONE);
        } else {
            progressBar.setVisibility(View.VISIBLE);
            progressBar.setProgress(newProgress);
        }
    }
});

WebChromeClient 的 onProgressChanged() 方法会回调 WebView 的加载进度，我们在这里获取到进度值并设置到 ProgressBar 中去，并且在进度为 100% 也就是加载完成时消失，即可实现如同『WeChat』般加载网页的进度条效果了。