webview添加网页加载进度条

最近在android项目中使用webview嵌套了一个抽奖活动网页，活动上线，运行良好（改了N次需求和突发bug)，还好这种模式的活动，只需要修改网页，不需要重新打包发布市场，这也是这种模式开发的优势之一。后来据产品哥反馈说加载网页无进度提示，好吧，这个当时真没考虑这么多，这个要加加..想当然以为轻松搞定之....其实还是比轻松要复杂点...

1、首先自定义一个WebView控件

 1 /**
 2  * 带进度条的Webivew
 3  * @author lirunzi@163.com
 4  */
 5 @SuppressWarnings("deprecation")
 6 public class ProgressWebView extends WebView {
 7     private final static String TAG = ProgressWebView.class.getSimpleName();
 8
 9     private ProgressBar progressBar;
10     private Context context;
11
12     public ProgressWebView(Context context, AttributeSet attrs) {
13         super(context, attrs);
14         this.context = context;
15         progressBar = new ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal);
16         progressBar.setLayoutParams(new AbsoluteLayout.LayoutParams(AbsoluteLayout.LayoutParams.MATCH_PARENT, 3, 0, 0));
17         progressBar.setProgressDrawable(getResources().getDrawable(R.drawable.wevbview_progressbar));
18         addView(progressBar);
19         setWebChromeClient(new WebChromeClient());
20     }
21
22     public class WebChromeClient extends android.webkit.WebChromeClient {
23         @Override
24         public void onProgressChanged(WebView view, int newProgress) {
25             Log.d(TAG, "newProgress" + newProgress);
26             if (newProgress == 100) {
27                 progressBar.setVisibility(GONE);
28             } else {
29                 if (progressBar.getVisibility() == GONE)
30                     progressBar.setVisibility(VISIBLE);
31                 progressBar.setProgress(newProgress);
32             }
33             super.onProgressChanged(view, newProgress);
34         }
35
36         // 处理javascript中的console.log
37         @Override
38         public boolean onConsoleMessage(ConsoleMessage cm){
39             android.util.Log.d(TAG, "webview console " + cm.lineNumber() + " of " + cm.sourceId() + " : " + cm.message());
40             return true;
41         }
42
43         // 处理javascript中的alert()
44         @Override
45         public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
46             ToastUtil.showMessage(context, message, Toast.LENGTH_SHORT, Gravity.CENTER);
47             result.cancel();
48             return true;
49         }
50
51     }
52
53     @Override
54     protected void onScrollChanged(int l, int t, int oldl, int oldt) {
55         LayoutParams lp = (LayoutParams) progressBar.getLayoutParams();
56         lp.x = l;
57         lp.y = t;
58         progressBar.setLayoutParams(lp);
59         super.onScrollChanged(l, t, oldl, oldt);
60     }
61 }

2、在需要使用webview的layout文件中引入这个控件

1  <cn.net.huami.ui.view.ProgressWebView
2             android:id="@+id/them_webview"
3              android:layout_width="match_parent"
4              android:layout_height="match_parent" />

3、添加个drawable文件，修改progress控制的进度条样式

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 3     <!-- 背景 -->
 4     <item android:id="@android:id/background">
 5         <shape>
 6             <solid android:color="@color/default_bg" />
 7         </shape>
 8     </item>
 9     <!-- 进度条 -->
10     <item android:id="@android:id/progress">
11         <clip>
12             <shape>
13                 <solid android:color="#2E8AE7" />
14             </shape>
15         </clip>
16     </item>
17 </layer-list>

4、在activity或fragment中使用这个控件的相关代码

 1 ProgressWebView webView = (ProgressWebView)findViewById(R.id.them_webview);
 2
 3 webView.setDownloadListener(new DownloadListener() {
 4             @Override
 5             public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {
 6                 if (url != null && url.startsWith("http://"))
 7                     startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
 8             }
 9         });
10  webView.loadUrl("网页url");

转载于:https://www.cnblogs.com/hubli/p/4835549.html

webview添加网页加载进度条相关推荐

NProgress.js - 前端全站进度条插件 - 给你的网站添加一个加载进度条
0x00 前言前几天给博客换了@Veen Zhao大佬的Cuteen主题,非常好看,但是因为不想让自己的博客和其他人的千篇一律,于是决定在Cuteen主题的前提下逐渐设计一些自己需要的东西.正巧前几 ...
php 页面加载进度条,HTML5/CSS3 网页加载进度条的实现，下载进度条等经典案例
今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...
android webview设置加载进度条
1.自定义属性文件--attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources& ...
js网页顶部线性页面加载进度条,jquery头部线性进度条总结
前言网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 头部LoadingBar线性进度条总结上面的代码只是静态效 ...
pace.js网页自动加载进度条插件-好东西
pace.js – 网页自动加载进度条插件源码地址 https://github.com/HubSpot/pace 入Pace.js以及主题文件 Pace.js公开的API列表, Pace.star ...
CSS3超酷网页Loading加载进度条动画效果
在jQuery之家上发现的一款css3效果. CSS3 animation超酷网页Loading加载进度条动画效果 >>查看演示 > ...
WKWebView Safari调试、JS互调、加载进度条、JS中alert、confirm、prompt
主要内容 Safari调试 swift/OC与JS互调增加加载进度条支持JS中alert.confirm.prompt Safari调试设置 -> safari --> 高级,开启J ...
Vue项目实战06：nprogress页面加载进度条
博客: https://lvsige.top/ nprogress页面加载进度条前言很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们 ...

webview添加网页加载进度条

webview添加网页加载进度条相关推荐

最新文章

热门文章