WebView自定义进度条、加载动画，拿走直接用~

年前有个小需求，要对有些域名的H5进行加载流程优化，通过展示H5加载动画来安抚用户焦躁的心情，以提高用户体验。虽然不能理解加个动画咋就优化了用户体验，但需求还是得做的。想着这是个基础的小功能，独立性比较好，遂记录下来，以资来者。源码见文末。

进度条基本用法

布局

一般加载进度条和webview会放在一起布局，也有为了统一管理将它放在actionBar控件中的，但是考虑到一个app中webview容器不宜过多的因素以及方便理解，还是用简单的线性布局进行处理。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ProgressBar
        android:id="@+id/progress_bar"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

上述布局中使用的是系统横向进度条，如果不配置style="@android:style/Widget.ProgressBar.Horizontal"，则会展示一个系统的转圈加载条。

逻辑

WebView暴露出的页面加载进度回调，需要通过WebChromeClient#onProgressChanged来获取。

    /**
     * Tell the host application the current progress of loading a page.
     * @param view The WebView that initiated the callback.
     * @param newProgress Current page loading progress, represented by
     *                    an integer between 0 and 100.
     */
    public void onProgressChanged(WebView view, int newProgress) {}

由其源码注释可知，回调中会提供一个0-100的进度值，我们只需要根据这个值去设置我们的进度条即可。具体实现如下：

    class MyWebChromeClient extends WebChromeClient {
        // 监听网页进度 newProgress进度值在0-100
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            super.onProgressChanged(view, newProgress);
            Log.d(TAG, "newProgress:" + newProgress);
            // 进行进度条更新
            if (newProgress == PROCESS_BAR_MAX) {
                progressBar.setVisibility(View.GONE);
            }
            progressBar.setProgress(newProgress);
        }
    }

完整的Activity代码

package com.example.developerlab;

import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

public class WebViewActivity extends Activity {
    private static final String TAG = WebViewActivity.class.getSimpleName();
    private static final int PROCESS_BAR_MAX = 100;
    private WebView mWebView;
    private ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);
        mWebView = findViewById(R.id.web_view);

        // 设置支持js否则有些网页无法打开
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setWebViewClient(new MyClient());
        mWebView.setWebChromeClient(new MyWebChromeClient());
        // 加载网络url
        mWebView.loadUrl("https://www.baidu.com/");

        progressBar = findViewById(R.id.progress_bar);
        progressBar.setVisibility(View.VISIBLE);
    }

    class MyClient extends WebViewClient {
    }

    class MyWebChromeClient extends WebChromeClient {
        // 监听网页进度 newProgress进度值在0-100
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            super.onProgressChanged(view, newProgress);
            Log.d(TAG, "newProgress:" + newProgress);
            // 进行进度条更新
            if (newProgress == PROCESS_BAR_MAX) {
                progressBar.setVisibility(View.GONE);
            }
            progressBar.setProgress(newProgress);
            // 如果想展示加载动画，则增加一个drawable布局后，在onCreate时展示，在progress=100时View.GONE即可
        }
    }
}

自定义进度条设置

变更系统进度样式

上文布局中使用的是系统横向进度条，属性style可以配置多种系统样式。

<style name="Widget.ProgressBar.Large">
<style name="Widget.ProgressBar.Small">
<style name="Widget.ProgressBar.Inverse">
<style name="Widget.ProgressBar.Large.Inverse">
<style name="Widget.ProgressBar.Small.Inverse">
<style name="Widget.ProgressBar.Small.Title">
<style name="Widget.ProgressBar.Horizontal">

如故需要配置进度条背景颜色，比如一个渐变的彩色进度条。可以通过progressDrawable配置。例如配置渐变样式：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        android:drawable="@color/transparent"/>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:angle="0"
                    android:centerY="0.75"
                    android:endColor="@color/color_700"
                    android:startColor="@color/color_200"/>
            </shape>
        </clip>
    </item>
</layer-list>

使用加载动画替换进度条

使用加载动画替换进度条，就很省事了，只要在WebChromeClient#onProgressChanged中监听进度数值0时开始加载动画，100时将动画控价View.GONE即可。加载gif动画的方法可以百度一个Glide控件使用说明，十分简单。

ImageView img = linearLayout.findViewById(R.id.progress_img);
Glide.with(img).asGif().load(R.drawable.progress).into(img);

源码

WebViewActivity.java
ctivity_web_view.xml