年前有个小需求，要对有些域名的H5进行加载流程优化，通过展示H5加载动画来安抚用户焦躁的心情，以提高用户体验。虽然不能理解加个动画咋就优化了用户体验，但需求还是得做的。想着这是个基础的小功能，独立性比较好，遂记录下来，以资来者。源码见文末。
进度条基本用法
布局
一般加载进度条和webview会放在一起布局，也有为了统一管理将它放在actionBar控件中的，但是考虑到一个app中webview容器不宜过多的因素以及方便理解，还是用简单的线性布局进行处理。
android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> android:id="@+id/progress_bar" style="@android:style/Widget.ProgressBar.Horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" /> android:id="@+id/web_view" android:layout_width="match_parent" android:layout_height="match_parent" />
上述布局中使用的是系统横向进度条，如果不配置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可以配置多种系统样式。