自定义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。

相关文章

Java实现检查多个时间段是否有重合

Java实现检查多个时间段是否有重合

《Java实现检查多个时间段是否有重合》这篇文章主要为大家详细介绍了如何使用Java实现检查多个时间段是否有重合,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录流程概述步骤详解China编程步骤1：定义时间段类步骤2：添加时间段步骤3：检查时间段是否有重合步骤4：输出结果示例代码结语作
阅读更多...
使用C++实现链表元素的反转

使用C++实现链表元素的反转

《使用C++实现链表元素的反转》反转链表是链表操作中一个经典的问题,也是面试中常见的考题,本文将从思路到实现一步步地讲解如何实现链表的反转,帮助初学者理解这一操作,我们将使用C++代码演示具体实现,同... 目录问题定义思路分析代码实现带头节点的链表代码讲解其他实现方式时间和空间复杂度分析总结问题定义给定
阅读更多...
Java覆盖第三方jar包中的某一个类的实现方法

Java覆盖第三方jar包中的某一个类的实现方法

《Java覆盖第三方jar包中的某一个类的实现方法》在我们日常的开发中,经常需要使用第三方的jar包,有时候我们会发现第三方的jar包中的某一个类有问题,或者我们需要定制化修改其中的逻辑,那么应该如何... 目录一、需求描述二、示例描述三、操作步骤四、验证结果五、实现原理一、需求描述需求描述如下：需要在
阅读更多...
如何使用Java实现请求deepseek

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2
阅读更多...
python使用fastapi实现多语言国际化的操作指南

python使用fastapi实现多语言国际化的操作指南

《python使用fastapi实现多语言国际化的操作指南》本文介绍了使用Python和FastAPI实现多语言国际化的操作指南,包括多语言架构技术栈、翻译管理、前端本地化、语言切换机制以及常见陷阱和... 目录多语言国际化实现指南项目多语言架构技术栈目录结构翻译工作流1. 翻译数据存储2. 翻译生成脚本
阅读更多...
如何通过Python实现一个消息队列

如何通过Python实现一个消息队列

《如何通过Python实现一个消息队列》这篇文章主要为大家详细介绍了如何通过Python实现一个简单的消息队列,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录如何通过 python 实现消息队列如何把 http 请求放在队列中执行1. 使用 queue.Queue 和 reque
阅读更多...
Python如何实现PDF隐私信息检测

Python如何实现PDF隐私信息检测

《Python如何实现PDF隐私信息检测》随着越来越多的个人信息以电子形式存储和传输,确保这些信息的安全至关重要,本文将介绍如何使用Python检测PDF文件中的隐私信息,需要的可以参考下... 目录项目背景技术栈代码解析功能说明运行结php果在当今，数据隐私保护变得尤为重要。随着越来越多的个人信息以电子形
阅读更多...
使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

《使用sql-research-assistant进行SQL数据库研究的实战指南(代码实现演示)》本文介绍了sql-research-assistant工具,该工具基于LangChain框架,集... 目录技术背景介绍核心原理解析代码实现演示安装和配置项目集成LangSmith 配置（可选）启动服务应用场景
阅读更多...
使用Python快速实现链接转word文档

使用Python快速实现链接转word文档

《使用Python快速实现链接转word文档》这篇文章主要为大家详细介绍了如何使用Python快速实现链接转word文档功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 演示代码展示from newspaper import Articlefrom docx import
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2