Android：创建带有进度条的WebView实战教程

本文将介绍如何在Android平台上实现一个带有进度条的WebView，提供加载本地和网络资源的方法，并展示自定义进度条的Drawable文件及ProgressWebView类的实现。 在Android应用开发中，WebView是一个非常重要的组件，它允许我们在应用程序内部加载和显示网页内容。在用户界面设计时，为提升用户体验，我们常常希望在加载网页的过程中显示进度条，让用户了解加载状态。以下是如何在Android中实现这一功能的步骤： 1. WebView加载网页： - 加载本地资源：你可以使用`loadUrl()`方法加载存储在`assets`目录下的HTML文件，例如： ```java loadUrl("file:///android_asset/example.html"); ``` - 加载网络资源：同样地，`loadUrl()`方法也可以用于加载网络上的URL，例如百度主页： ```java loadUrl("http://baidu.com"); ``` 2. 自定义进度条Drawable文件： 在`res/drawable`目录下创建一个XML文件，如`view_progress_webview.xml`，用于定义进度条的样式。下面是一个示例： ```xml <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/progress"> <clip> <shape> <solid android:color="#31CE15"/> <!-- 设置进度条的颜色，可以根据需要更换 --> <corners android:radius="2dp"/> <!-- 设置进度条的圆角半径 --> </shape> </clip> </item> </layer-list> ``` 这个XML文件定义了一个水平进度条，颜色可以根据项目需求进行更改。 3. 创建ProgressWebView类： 创建一个名为`ProgressWebView`的自定义WebView类，它扩展了原生的WebView，并添加了一个ProgressBar。这个类的代码片段如下： ```java public class ProgressWebView extends WebView { private ProgressBar progressBar; private Context mContext; public ProgressWebView(Context context, AttributeSet attrs) { super(context, attrs); this.mContext = context; progressBar = new ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal); progressBar.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, 5, 0, 0)); Drawable drawable = context.getResources().getDrawable(R.drawable.view_progress_webview); progressBar.setProgressDrawable(drawable); // 添加进度条到WebView的顶部 addView(progressBar); } // 监听WebView的页面加载进度 @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view, url, favicon); progressBar.setVisibility(View.VISIBLE); } // 当页面加载完成时隐藏进度条 @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); progressBar.setVisibility(View.GONE); } // 更新进度条的进度 @Override protected void onProgressChanged(int newProgress) { super.onProgressChanged(newProgress); if (newProgress == 100) { progressBar.setVisibility(View.GONE); } else { progressBar.setProgress(newProgress); } } } ``` 在这个类中，我们初始化了一个ProgressBar并将其添加到WebView的顶部，同时重写了`onPageStarted()`, `onPageFinished()` 和 `onProgressChanged()` 方法来控制进度条的显示和隐藏，以及更新进度。 通过上述步骤，你就可以创建一个具有进度条的WebView了。在实际项目中，你可能还需要处理其他事件，比如网页加载错误、设置WebView的缓存策略等。记得在布局文件中使用`ProgressWebView`替换原始的`WebView`，这样就能享受到带有进度反馈的网页加载体验了。