自定义WebView实现进度条显示和错误处理

2024-05-24 19:58
文章标签 实现 自定义 显示 错误处理 进度条 webview

本文主要是介绍自定义WebView实现进度条显示和错误处理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

现在项目中越来越多地使用到了Android+H5混合开发，基于公司发展的趋势，很有必要更深入地了解WebView了。

  1. 首先我们先来了解一下WebView是什么？
    A View that displays web pages.
    这是官方Api给出的一个解释，通过这句话我们可以知道WebView是一个用来显示web页面的视图控件。
  2. 再次我们看下WebView的类关系
    WebView的类继承示意图
    通过这个图片我们知道WebView是一个布局控件，可以像LinearLayout或RelativeLayout一样添加View。(我们今天就是通过这个特性对WebView进行改造自定义)
  3. 需要解决的问题
    我们使用原生的WebView加载网页的时候，有三点会让我们感到很无奈，一是没有进度条表示网页加载进度，二是加载网页出错后会显示不太友好的错误提示页面，三是没有网页加载超时设置。因此我们需要对其进行改造自定义，方便我们在项目中更快更好地运用。
  4. 效果示意图
    网页加载中
    网页加载失败

一言不和，要贴代码了。

自定义属性–这个属性值的位置放在

<?xml version="1.0" encoding="utf-8"?>
<resources><attr name="progress_color" format="color" /><attr name="progress_height" format="dimension" /><attr name="error_text_color" format="color" /><attr name="error_text_size" format="dimension" /><attr name="error_text" format="string" /><declare-styleable name="loadWebView"><attr name="progress_color" /><attr name="progress_height" /><attr name="error_text_color" /><attr name="error_text_size" /><attr name="error_text" /></declare-styleable></resources>

LoadWebView的代码实现

package cn.org.bjca.customview;import java.util.ArrayList;
import java.util.LinkedList;
import java.util.List;import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.drawable.ClipDrawable;
import android.graphics.drawable.ColorDrawable;
import android.os.Handler;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
import android.widget.RelativeLayout;
import android.widget.TextView;/********************************************************** @文件名称:  LoadWebView.java* @包   路   径：  cn.org.bjca.customview* @类描述:  自定义WebView(实现加载进度显示、加载错误处理、加载超时处理(后期实现))* @版本: V1.1* @创建人： daizhenhong* @创建时间：2016-8-2 上午9:57:48*********************************************************/
public class LoadWebView extends WebView {/** 进度条进度默认的颜色--深天蓝*/private static final int DEF_BAR_COLOR_REACH = 0xFF00BFFF;/** 进度条默认的高度*/private static final int DEF_BAR_HEIGHT = 2;// dpprivate static final String DEF_ERROR_TEXT = "页面加载错误！点击屏幕重试！";/** 错误显示文字颜色*/private static final int DEF_ERROR_TEXT_COLOR = 0xFFFC00D1;// 红色/** 错误显示文字字体大小*/private static final int DEF_ERROR_TEXT_SIZE = 20;// spprivate String TAG = this.getClass().getSimpleName();private Context mContext;/*** 网页加载进度条*/private ProgressBar mProgressBar;/*** 进度条进度的颜色*/private int mBarReachColor;/*** 进度条高度*/private int mBarHeight;/*** 自定义的Url历史记录--不存储错误页面mUrlErrorStart的地址*/private List<String> mUrlList;private String mMimeType = "text/html";/** 编码*/private String mEncoding = "UTF-8";/** 网页加载错误时加载空白页*/private String mUrlErrorStart = "about:blank";/** 错误显示的TextView*/private TextView mTvError;/** WebView显示错误页面时候，需要设置一个空字符串，否则不同的手机有可能会出现不同的文字*/private String mHintFail = "";/** 错误页面提醒文字*/private String mErrorText;/** 错误提醒文字大小*/private int mErrorTextSize;/** 错误提醒文字颜色*/private int mErrorTextColor;public LoadWebView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);this.setWebViewClient(mWebViewClient);mContext = context;this.setWebViewClient(mWebViewClient);this.setWebChromeClient(mWebChromeClient);obtainStyledAttributes(context, attrs, defStyle);initProgressBar();addErrorTextView();mUrlList = new LinkedList<String>();}private void obtainStyledAttributes(Context context, AttributeSet attrs, int defStyle) {TypedArray ta = mContext.getTheme().obtainStyledAttributes(attrs, R.styleable.loadWebView, defStyle, 0);mBarReachColor = ta.getColor(R.styleable.loadWebView_progress_color, DEF_BAR_COLOR_REACH);mBarHeight = ta.getDimensionPixelSize(R.styleable.loadWebView_progress_height, dp2px(DEF_BAR_HEIGHT));mErrorText = ta.getString(R.styleable.loadWebView_error_text);if (TextUtils.isEmpty(mErrorText))mErrorText = DEF_ERROR_TEXT;mErrorTextColor = ta.getColor(R.styleable.loadWebView_error_text_color, DEF_ERROR_TEXT_COLOR);mErrorTextSize = ta.getDimensionPixelSize(R.styleable.loadWebView_error_text_size, sp2px(DEF_ERROR_TEXT_SIZE));}public LoadWebView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public LoadWebView(Context context) {this(context, null);}private void addErrorTextView() {if (mTvError != null)return;mTvError = new TextView(mContext);android.widget.RelativeLayout.LayoutParams lp = new android.widget.RelativeLayout.LayoutParams(android.widget.RelativeLayout.LayoutParams.MATCH_PARENT,android.view.ViewGroup.LayoutParams.MATCH_PARENT);lp.addRule(RelativeLayout.CENTER_IN_PARENT);mTvError.setVisibility(INVISIBLE);mTvError.setText(mErrorText);mTvError.setTextSize(mErrorTextSize);mTvError.setTextColor(mErrorTextColor);mTvError.setGravity(Gravity.CENTER);mTvError.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// mWebViewString url = getLastUrl();LoadWebView.this.loadUrl(url);}});this.addView(mTvError, lp);}/** WebView的client*/private WebViewClient mWebViewClient = new WebViewClient() {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);return false;}@Overridepublic void onPageStarted(WebView view, String url, Bitmap favicon) {hideErrorTextView();}@Overridepublic void onPageFinished(WebView view, String url) {if (url.startsWith(mUrlErrorStart))mTvError.setVisibility(VISIBLE);else {checkBack(url);addUrlList(url);}}@Overridepublic void onReceivedError(WebView view, int errorCode, String description, String url) {// 加载错误时，进行错误页面的加载loadDataWithBaseURL(null, mHintFail, mMimeType, mEncoding, null);}};private WebChromeClient mWebChromeClient = new WebChromeClient() {@Overridepublic void onProgressChanged(WebView view, int progress) {mProgressBar.setProgress(progress);if (progress == 100) {if (mProgressBar.getVisibility() == VISIBLE) {// 延迟隐藏进度条handler.postDelayed(new Runnable() {@Overridepublic void run() {mProgressBar.setVisibility(INVISIBLE);}}, 200);}} else {mProgressBar.setVisibility(VISIBLE);}}};private Handler handler = new Handler();/*** <p>checkBack</p>* @Description:   检查是否可以回退* @param url*/private void checkBack(String url) {String backUrl = getBackUrl();if (TextUtils.equals(url, backUrl))removeUrlTop();}/*** <p>initProgressBar</p>* @Description:   初始化进度条*/private void initProgressBar() {mProgressBar = new ProgressBar(mContext, null, android.R.attr.progressBarStyleHorizontal);// mProgressBar.setLayoutParams(new// LayoutParams(LayoutParams.MATCH_PARENT, 10, 0, 0));mProgressBar.setLayoutParams(new android.widget.RelativeLayout.LayoutParams(android.widget.RelativeLayout.LayoutParams.MATCH_PARENT, mBarHeight));ClipDrawable clipDrawable = new ClipDrawable(new ColorDrawable(mBarReachColor), Gravity.LEFT, ClipDrawable.HORIZONTAL);mProgressBar.setProgressDrawable(clipDrawable);this.addView(mProgressBar);}private void hideErrorTextView() {if (mTvError != null && mTvError.getVisibility() == VISIBLE)mTvError.setVisibility(GONE);}/*** (非 Javadoc) <p>Title: goBack</p> <p>Description:* url页面回退(重写webView的goBack方法)，并删除上一级url</p>*/@Overridepublic void goBack() {String url = getBackUrl();this.loadUrl(url);removeUrlTop();}/*** <p>removeUrlTop</p>* @Description:   移除url列表顶部的url* @return url列表*/private List<String> removeUrlTop() {if (mUrlList != null && mUrlList.size() > 1) {int size = mUrlList.size();mUrlList.remove(size - 1);}return mUrlList;}/*** <p>addUrlList</p>* @Description:   在url列表中添加url* <p> 添加规则：   1.错误页面(about:blank)不添加*             2.顶部页面相同不添加(不重复添加url--这个添加url列表的操作是在onPageFinished()中进行，有些手机在页面访问不成功会执行两次这个回调函数)* </p>* @param url      当前url* @return         url列表*/private List<String> addUrlList(String url) {if (TextUtils.isEmpty(url))return mUrlList;if (url.startsWith(mUrlErrorStart))// 如果是错误页面显示的地址，则不添加到url列表中return mUrlList;if (null == mUrlList)mUrlList = new ArrayList<String>();int size = mUrlList.size();if (size == 0)mUrlList.add(url);else if (!TextUtils.equals(getLastUrl(), url))mUrlList.add(url);return mUrlList;}/*** <p>getLastUrl</p>* @Description:   获取url列表顶部的url(最后访问的地址)* @return     最顶部的url*/private String getLastUrl() {if (null == mUrlList || mUrlList.size() == 0)return null;int size = mUrlList.size();return mUrlList.get(size - 1);}/*** <p>getBackUrl</p>* @Description:   获取上一页的url* @return 上一页的url，如果只有一个页面，则返回当前页面的url*/private String getBackUrl() {if (mUrlList == null)return null;int size = mUrlList.size();if (size == 0)return null;else if (size == 1)return mUrlList.get(0);elsereturn mUrlList.get(size - 2);}/** (非 Javadoc)* <p>Title: canGoBack</p>* <p>Description: 判断是否可以回退*                 1.如果自定义url列表只有一个对象的时候，则表示不能回退了*                 2.其他情况，调用WebView的super方法进行判定* </p>* @return* @see android.webkit.WebView#canGoBack()*/@Overridepublic boolean canGoBack() {if (mUrlList != null && mUrlList.size() == 1)return false;return super.canGoBack();}/*** <p>isErrorPage</p>* @Description:   判断当前展示的是否是错误页面* @return*/public boolean isErrorPage() {if (mTvError != null && mTvError.getVisibility() == VISIBLE)return true;elsereturn false;}/*** 将dp转换为px** @param dpVal 单位为dp的值* @return      dp对应的px值*/private int dp2px(int dpVal) {return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal, getResources().getDisplayMetrics());}/*** 将sp转换为px** @param spVal sp的值* @return 像素*/private int sp2px(int spVal) {return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spVal, getResources().getDisplayMetrics());}/*** <p>setBarReachColor</p>* @Description:   设置进度条进度的颜色* @param color    色值*/public void setBarReachColor(int color) {mBarReachColor = color;ClipDrawable clipDrawable = new ClipDrawable(new ColorDrawable(mBarReachColor), Gravity.LEFT, ClipDrawable.HORIZONTAL);mProgressBar.setProgressDrawable(clipDrawable);}/*** <p>setErrorText</p>* @Description:   设置错误页面提醒文字* @param text     文字*/public void setErrorText(String text){mTvError.setText(text);}/*** <p>setErrorTextColor</p>* @Description:   设置错误文字的颜色* @param color    颜色色值*/public void setErrorTextColor(int color){mTvError.setTextColor(color);}/*** <p>setErrorTextSize</p>* @Description:   设置错误文字的字体* @param size     错误提醒文字的字体大小(sp)*/public void setErrorTextSize(int size){mTvError.setTextSize(sp2px(size));}
}

layout中使用自定义WebView

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity" ><cn.org.bjca.customview.LoadWebViewandroid:id="@+id/wv_content"android:layout_width="match_parent"android:layout_height="match_parent" app:progress_height="5dp"app:error_text_size="16sp"app:error_text="页面加载错误，点击页面重试！"/></RelativeLayout>

其中，xmlns:app=”http://schemas.android.com/apk/res-auto”声明是为了我们可以使用自定义的属性，xmlns:app可以命名为你想要的例如xmlns:myapp之类的，但在控件中注意使用对应的前缀就行了(在Ecilpse中不能联想出自定义属性，需要手动输入，Android studio是可以的)。

结语
第一次这么认真地写功能性博客，有很多不足之处，欢迎大家指正，共同探讨。关于这个自定义WebView还有很多缺陷，会在后期不断完善，并切会不断更新记录。

这篇关于自定义WebView实现进度条显示和错误处理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/999383。

相关文章

python使用watchdog实现文件资源监控

python使用watchdog实现文件资源监控

《python使用watchdog实现文件资源监控》watchdog支持跨平台文件资源监控,可以检测指定文件夹下文件及文件夹变动,下面我们来看看Python如何使用watchdog实现文件资源监控吧... python文件监控库watchdogs简介随着Python在各种应用领域中的广泛使用，其生态环境也
阅读更多...
el-select下拉选择缓存的实现

el-select下拉选择缓存的实现

《el-select下拉选择缓存的实现》本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录项目场景：问题描述解决方案：项目场景：从左侧列表中选取字段填入右侧下拉多选框，用户可以对右侧
阅读更多...
Python pyinstaller实现图形化打包工具

Python pyinstaller实现图形化打包工具

《Pythonpyinstaller实现图形化打包工具》：本文主要介绍一个使用PythonPYQT5制作的关于pyinstaller打包工具,代替传统的cmd黑窗口模式打包页面,实现更快捷方便的... 目录1.简介2.运行效果3.相关源码1.简介一个使用python PYQT5制作的关于pyinstall
阅读更多...
使用Python实现大文件切片上传及断点续传的方法

使用Python实现大文件切片上传及断点续传的方法

《使用Python实现大文件切片上传及断点续传的方法》本文介绍了使用Python实现大文件切片上传及断点续传的方法,包括功能模块划分（获取上传文件接口状态、临时文件夹状态信息、切片上传、切片合并）、整... 目录概要整体架构流程技术细节获取上传文件状态接口获取临时文件夹状态信息接口切片上传功能文件合并功能小
阅读更多...
python实现自动登录12306自动抢票功能

python实现自动登录12306自动抢票功能

《python实现自动登录12306自动抢票功能》随着互联网技术的发展,越来越多的人选择通过网络平台购票,特别是在中国,12306作为官方火车票预订平台,承担了巨大的访问量,对于热门线路或者节假日出行... 目录一、遇到的问题？二、改进三、进阶–展望总结一、遇到的问题？1.url-正确的表头：就是首先ur
阅读更多...
C#实现文件读写到SQLite数据库

C#实现文件读写到SQLite数据库

《C#实现文件读写到SQLite数据库》这篇文章主要为大家详细介绍了使用C#将文件读写到SQLite数据库的几种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下... 目录1. 使用 BLOB 存储文件2. 存储文件路径3. 分块存储文件《文件读写到SQLite数据库China编程的方法》博客中，介绍了文
阅读更多...
Redis主从复制实现原理分析

Redis主从复制实现原理分析

《Redis主从复制实现原理分析》Redis主从复制通过Sync和CommandPropagate阶段实现数据同步,2.8版本后引入Psync指令,根据复制偏移量进行全量或部分同步,优化了数据传输效率... 目录Redis主DodMIK从复制实现原理实现原理Psync: 2.8版本后总结Redis主从复制实
阅读更多...
JAVA利用顺序表实现“杨辉三角”的思路及代码示例

JAVA利用顺序表实现“杨辉三角”的思路及代码示例

《JAVA利用顺序表实现“杨辉三角”的思路及代码示例》杨辉三角形是中国古代数学的杰出研究成果之一,是我国北宋数学家贾宪于1050年首先发现并使用的,：本文主要介绍JAVA利用顺序表实现杨辉三角的思... 目录一：“杨辉三角”题目链接二：题解代码：三：题解思路：总结一：“杨辉三角”题目链接题目链接：点击这里
阅读更多...
基于Python实现PDF动画翻页效果的阅读器

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主
阅读更多...
SpringBoot实现基于URL和IP的访问频率限制

SpringBoot实现基于URL和IP的访问频率限制

《SpringBoot实现基于URL和IP的访问频率限制》在现代Web应用中,接口被恶意刷新或暴力请求是一种常见的攻击手段,为了保护系统资源,需要对接口的访问频率进行限制,下面我们就来看看如何使用... 目录1. 引言2. 项目依赖3. 配置 Redis4. 创建拦截器5. 注册拦截器6. 创建控制器8.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2