自定义带进度条的WebView

最新推荐文章于 2021-01-23 18:08:12 发布
最新推荐文章于 2021-01-23 18:08:12 发布
阅读量282 收藏 1
点赞数 1
文章标签： webview progress custom 自定义进度条webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28940471/article/details/77558681
版权

直接上代码：


package com.baosight.iplat4mandroid.core.uitls.customWebView;

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.WebResourceError;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.LinearLayout;
import android.widget.ProgressBar;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.baosight.iplat4mandroid.R;

import java.util.ArrayList;
import java.util.LinkedList;
import java.util.List;

/*********************************************************

 自定义WebView(实现加载进度显示、加载错误处理、加载超时处理)
 *********************************************************/
public class LoadWebView extends WebView {
    private String mMimeType = "text/html";
    /** 编码*/
    private String mEncoding = "UTF-8";
    /** 进度条进度默认的颜色--*/
    private static final int DEF_BAR_COLOR_REACH = 0xFF00BFFF;
    /** 刷新背景颜色*/
    private static final int ERRO_BACKGROUND = 0xFFFFFFFF;
    /** 进度条默认的高度*/
    private static final int DEF_BAR_HEIGHT = 2;// dp
    private static final String DEF_ERROR_TEXT = "刷新\n\n请检查你的网络或点击刷新";
    /** 错误显示文字颜色*/
    private static final int DEF_ERROR_TEXT_COLOR = 0xFF808080;// 红色
    /** 错误显示文字字体大小*/
    private static final int DEF_ERROR_TEXT_SIZE = 10;// sp
    private 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 mUrlErrorStart = "about:blank";
    /** 错误显示的TextView*/
    private TextView mTvError;
    /** WebView显示错误页面时候，需要设置一个空字符串，否则不同的手机有可能会出现不同的文字*/
    private String mHintFail = "";
    /** 错误页面提醒文字*/
    private String mErrorText;
    /** 错误提醒文字大小*/
    private int mErrorTextSize;
    /** 错误提醒文字颜色*/
    private int mErrorTextColor;
    private TextView mTextDes;
    public Boolean flag = true;
    public LoadWebView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        mContext = context;
        this.setWebViewClient(mWebViewClient);
        this.setWebChromeClient(mWebChromeClient);
        obtainStyledAttributes(context, attrs, defStyle);
        initProgressBar();
        addErrorTextView();
        mUrlList = new LinkedList<String>();
        flag = true;
    }

    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);
        mTextDes = new TextView(mContext);
        RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(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.setBackgroundColor(ERRO_BACKGROUND);
        mTvError.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                flag = true;
                String url = getLastUrl();
                LoadWebView.this.loadUrl(url);
            }
        });

        mTextDes.setVisibility(INVISIBLE);
        mTextDes.setText(mErrorText);
        mTextDes.setTextSize(mErrorTextSize);
        mTextDes.setTextColor(mErrorTextColor);
        this.addView(mTvError, lp);

    }

//    @Override
//    public void setWebChromeClient(WebChromeClient client) {
//        super.setWebChromeClient(client);
//    }

    /** WebView的client*/
    public WebViewClient mWebViewClient = new WebViewClient() {
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            hideErrorTextView();
        }
        @Override
        public void onPageFinished(WebView view, String url) {

            if (url.startsWith(mUrlErrorStart))
                showErrorTextView();
            else {
                checkBack(url);
                addUrlList(url);
            }
        }
        @Override
        public void onReceivedError(WebView view, int errorCode, String description, String url) {
            // 加载错误时，进行错误页面的加载
            showErrorTextView();
            loadDataWithBaseURL(null, mHintFail, mMimeType, mEncoding, null);

        }

    };



    public WebChromeClient mWebChromeClient = new WebChromeClient() {
        @Override
        public void onProgressChanged(WebView view, int progress) {
            mProgressBar.setProgress(progress);
            if (progress == 100) {
                if (mProgressBar.getVisibility() == VISIBLE) {
                    // 延迟隐藏进度条
                    handler.postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            mProgressBar.setVisibility(INVISIBLE);
                        }
                    }, 200);
                }
            } else {
                mProgressBar.setVisibility(VISIBLE);
            }
        }
    };


    private Handler handler = new Handler();

    /**
     * <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 RelativeLayout.LayoutParams(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&&flag)
            mTvError.setVisibility(INVISIBLE);
    }
    private void showErrorTextView() {
        flag = false;
        mTvError.setVisibility(VISIBLE);
    }
    /**
     * <p>checkBack</p>
     * @Description:   检查是否可以回退
     * @param url
     */
    private void checkBack(String url) {
        String backUrl = getBackUrl();
        if (TextUtils.equals(url, backUrl)){
            removeUrlTop();
        }

    }
    /**
     * (非 Javadoc) <p>Title: goBack</p> <p>Description:
     * url页面回退(重写webView的goBack方法)，并删除上一级url</p>
     */
    @Override
    public 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);
        else
            return mUrlList.get(size - 2);
    }

    /** (非 Javadoc)
     * <p>Title: canGoBack</p>
     * <p>Description: 判断是否可以回退
     *                 1.如果自定义url列表只有一个对象的时候，则表示不能回退了
     *                 2.其他情况，调用WebView的super方法进行判定
     * </p>
     * @return
     * @see WebView#canGoBack()
     */
    @Override
    public 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;
        else
            return 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));
    }
}

style中配置

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <!-- 自定义webview开始-->
    <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>
    <!-- 自定义webview结束-->
</resources>

多米的大大
关注
Android自定义带进度条WebView仿微信加载过程
08-27
主要为大家详细介绍了Android自定义带进度条WebView仿微信加载过程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
自定义Material风格的带进度条webView加载效果
04-24
综上所述，"自定义Material风格的带进度条webView加载效果"涉及到Android自定义控件、事件监听、进度条控制、Material Design样式定制以及性能优化等多个方面。通过这个项目，开发者不仅可以提升应用的视觉效果，还...
自定义带进度条webView
insert的博客
02-17 299
WebView控件，自定义使用
android中自定义带进度条WebView
u010945168的博客
11-30 552
我们在使用webView时经常需要显示加载进度条,都会这样写，感觉比较麻烦。所以我就需要组合自定义View来实现，其实很简单，很好理解。我只是记录下来方便使用，不喜勿吐public class CustomWebView extends RelativeLayout { Context context; private WebView webView; private
webView 自定义进度条
weixin_41194750的博客
01-23 115
<item android:id="@android:id/background"> <shape> <corners android:radius="5dip" /> <gradient android:angle="0" android:centerColor="@color/app_theme_color" android:centerY="0..
ProgressBarWebView:带自定义渐变色进度条的WebView
05-29
- **自定义View**：ProgressBarWebView通过继承Android原生的WebView并覆盖其相关方法，实现自定义进度条的绘制。它在`onDraw()`方法中使用Canvas进行图形绘制，通过渐变颜色填充条形区域，实现颜色变化的效果。 -...
webview自定义加载进度条
qinxuexiang_blog的博客
03-11 512
我们平时在进行安卓开发使用到webview加载网页时，我们不能准确了解网页的加载进度，因此为了提高用户体验，我们在webview中加入进度条显示加载进度。如下是显示效果 布局： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/ap...
WebView 自定义错误界面，WebView 加载进度条，和Logding 效果
ailu1475的博客
12-29 114
---恢复内容开始--- 下载地址，代码就不粘贴了 http://pan.baidu.com/s/1eQncg86 ---恢复内容结束--- 我没有判断是不是网络原因，各位自行判断吧，图片错误信息，及重现加载各种美化的样式请自己写吧，右边的是加载网页的进度条 里面还有一个弹出的dialog 的加载效果， 地址 http://www.cnblogs.com/Mr-Wu...
Android Webview添加网页加载进度条实例详解
09-02
主要介绍了Android Webview添加网页加载进度条实例详解的相关资料,需要的朋友可以参考下
自定义WebView实现进度条显示和错误处理
戴戴的博客
08-11 2187
通过自定义WebView实现网页加载进度显示、网页加载错误处理
自定义带进度条WebView类似微信加载过程
ali18510953445的博客
09-15 1017
在正常开发中，我们客户端需要用webView加载网页，再遇到网络慢或者访问的服务器响应时，页面是空白的，所以为了用户更好的体验，我们可以提供一个正在加载的进度条，提示用户正在加载。 本文结构： 1、自定义webView 2、在应用中的使用 3、效果展示一、自定义webView 1、首先定义一个类，继承webView，并首先构造方法public class ProgressB
Android 自定义WebView实现进度条加载
weixin_42273922的博客
01-17 2936
前言 我们经常打开网页，顶部大部分都会出现一个进度条来告知用户这个网页的加载过程。例如我们打开微信内的文章时会看到文章顶部有一个绿色的进度条。那我们怎么去实现该功能呢？ WebView源码 public class WebView extends AbsoluteLayout implements OnGlobalFocusChangeListener, OnHierarchyChangeLis...
android中WebView加载网页设置进度条
热门推荐
rocrocflying的专栏
11-15 2万+
我们平时在进行安卓开发使用到webview加载网页时，我们不能准确了解网页的加载进度，因此为了提高用户体验，我们在webview中加入进度条显示加载进度。 程序预览界面： 一、主界面xml布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="ht
android之自定义webView之头部进度加载效果
Losileeya
04-24 6811
是不是感觉Material风格的webView加载过程中head下面有一条线跟着网页的加载很酷对不，周末休息2天也随便撸一把，这里拿自己csdn的博客主页献丑了，哈哈。 不多说先来看下效果图： 1. 颜色渐变加载进度条（夜神模拟器） 2. 绿色加载进度条（魅蓝note2） * 看图说话：* 上图是不是加载网页的时候会有一个进度条在横向加载，比以前网速不好的时候是一片空
带进度条的x5WebView
喻志强的博客
07-01 4420
带进度条的X5WebView
WebView显示进度条和加载失败了解一下
Parcelable的博客
02-27 888
前言：现在大多数APP中都会涉及到和web交互的地方，当然我这次写的不是怎么和web交互，而是加载webview的时候我们可以做的一些事。开始：一、首先来说说我们在加载webview的时候怎么加载一个进度条，就是进度条读完再显示内容。我在项目中用的方法是用progressbar实现的。方法：1，在布局中定义progressbar（很简单...）          2，在代码中声明一下（also简单...
Android自定义带进度条WebView实现详解
"Android平台下创建一个带有进度条的通用WebView组件的实践介绍" 在Android应用开发中，WebView是一个常用的组件，用于加载和展示网页内容。然而，在网页加载过程中，用户可能需要明确的反馈来了解加载进度，这就是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值