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"><ProgressBarandroid:id="@+id/progress_bar"style="@android:style/Widget.ProgressBar.Horizontal"android:layout_width="match_parent"android:layout_height="wrap_content" /><WebViewandroid: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@Overridepublic 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;@Overrideprotected 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());// 加载网络urlmWebView.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@Overridepublic 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"><itemandroid:id="@android:id/background"android:drawable="@color/transparent"/><item android:id="@android:id/progress"><clip><shape><gradientandroid: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