Android 关于WebView全方面的使用(项目应用篇)
来源:互联网 发布:centos 6 ssh拒绝访问 编辑:程序博客网 时间:2024/06/14 08:27
1、关于WebView的使用:
- 与JS交互
- 拨打电话、发送短信、发送邮件
- 上传图片(版本兼容)
- 进度条设置
- 字体大小设置
- 返回网页上一层、显示网页标题
- 全屏播放网络视频
2、文章说明
WebView的使用已经是老生常谈了,看到很多文章说了用法,但我很少看到全的或者是项目中可以直接使用的,都是看了很多后,自己把功能都集合在一起。这里是一份比较全面的WebView项目应用篇,其中已经解决了应用时出现的很多bug,希望能对大家有帮助。
3、项目地址
WebViewStudy
4、内容详细介绍
4.1 电话短信邮件
给WebView设置WebViewClient:
webView.setWebViewClient(new MyWebViewClient(this));
其中MyWebViewClient
内容:
/** * 监听网页链接:* - 优酷视频直接跳到自带浏览器 * - 根据标识:打电话、发短信、发邮件 * - 进度条的显示 * - 加载完成后,添加javascript监听 */public class MyWebViewClient extends WebViewClient { private IWebPageView iWebPageView; private WebViewActivity activity; public MyWebViewClient(IWebPageView iWebPageView) { this.iWebPageView = iWebPageView; activity = (WebViewActivity) iWebPageView; } @SuppressWarnings("deprecation") @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { // 优酷视频跳转浏览器播放 if (url.startsWith("http://v.youku.com/")) { Intent intent = new Intent(); intent.setAction("android.intent.action.VIEW"); intent.addCategory("android.intent.category.DEFAULT"); intent.addCategory("android.intent.category.BROWSABLE"); Uri content_url = Uri.parse(url); intent.setData(content_url); activity.startActivity(intent); return true; // 电话、短信、邮箱 } else if (url.startsWith(WebView.SCHEME_TEL) || url.startsWith("sms:") || url.startsWith(WebView.SCHEME_MAILTO)) { try { Intent intent = new Intent(Intent.ACTION_VIEW); intent.setData(Uri.parse(url)); activity.startActivity(intent); } catch (ActivityNotFoundException ignored) { } return true; } iWebPageView.startProgress(); view.loadUrl(url); return false; } @Override public void onPageFinished(WebView view, String url) { if (activity.progress90) { iWebPageView.hindProgressBar(); } else { activity.pageFinish = true; } if (!CheckNetwork.isNetworkConnected(activity)) { iWebPageView.hindProgressBar(); } // html加载完成之后,添加监听图片的点击js函数 iWebPageView.addImageClickListener(); super.onPageFinished(view, url); } // 视频全屏播放按返回页面被放大的问题 @Override public void onScaleChanged(WebView view, float oldScale, float newScale) { super.onScaleChanged(view, oldScale, newScale); if(newScale - oldScale > 7) { view.setInitialScale((int)(oldScale / newScale * 100)); //异常放大,缩回去。 } }}
因为有很多配置,这里把各个功能模块通过接口IWebPageView
分离了出来,这样逻辑更清晰。
4.2 与JS交互
相信大家已经看到了上面"----点击了图片"的Toast,这里需要先给WebView设置JavascriptInterface:webView.addJavascriptInterface(new ImageClickInterface(this), "injectedObject");
其中ImageClickInterface
相关代码:
public class ImageClickInterface { private Context context; public ImageClickInterface(Context context) { this.context = context; } @JavascriptInterface public void imageClick(String imgUrl, String hasLink) { Toast.makeText(context, "----点击了图片", Toast.LENGTH_SHORT).show(); // 查看大图// Intent intent = new Intent(context, ViewBigImageActivity.class);// intent.putStringArrayListExtra("imgUrl",imgUrl);// context.startActivity(intent);// Log.e("----点击了图片 url: ", "" + imgUrl); }}
加入监听:
public void addImageClickListener() { // 这段js函数的功能就是,遍历所有的img节点, // 并添加onclick函数,函数的功能是在图片点击的时候调用本地java接口并传递对应src和has_link里的值过去 webView.loadUrl("javascript:(function(){" + "var objs = document.getElementsByTagName(\"img\");" + "for(var i=0;i<objs.length;i++)" + "{" + "objs[i].onclick=function(){window.injectedObject.imageClick(this.getAttribute(\"src\"),this.getAttribute(\"has_link\"));}" + "}" + "})()"); }
我们来看一下网页对应的源码:
<img src="[./callsms_files/753b877c-c098-43e9-85cc-6df5bbdaaafe](./callsms_files/753b877c-c098-43e9-85cc-6df5bbdaaafe)" style="width: 100%">
大家可能觉得有点怪异..因为这是保存的本地网页,如是线上的话,是这样:
<img src='[http://7xk154.com1.z0.glb.clouddn.com/article/753b877c-c098-43e9-85cc-6df5bbdaaafe](http://7xk154.com1.z0.glb.clouddn.com/article/753b877c-c098-43e9-85cc-6df5bbdaaafe)' style='width: 100%'>
这里传递过去的是一个图片url
的值,没有的属性传过去的则是null。这样我们就可以对其进行具体的操作了。
4.3 字体大小设置
/** 设置字体默认缩放大小(改变网页字体大小,setTextSize api14被弃用)*/ws.setTextZoom(100);
其中
100
为默认缩放比,通过设置缩放比来控制字体大小。
4.4 上传图片(版本兼容) & 全屏播放网络视频 & 显示网页标题
这里因为篇幅原因,里面的代码很多,就不贴出来了,大家可以点击MyWebChromeClient.java,查看具体代码。
4.5 返回网页上一层
返回网页上一层及退出全屏等操作:
@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_BACK) { //全屏播放退出全屏 if (webChromeClient.inCustomView()) { hideCustomView(); return true; //返回网页上一页 } else if (webView.canGoBack()) { webView.goBack(); return true; //退出网页 } else { webView.loadUrl("about:blank"); finish(); } } return false;}
4.6 进度条设置
这里用的是先加载到90%再加载到100%, 具体为什么相信大家都懂吧...
// 进度条 假装加载到90%public void startProgress90() { for (int i = 0; i < 900; i++) { final int progress = i + 1; mProgressBar.postDelayed(new Runnable() { @Override public void run() { mProgressBar.setProgress(progress); if (progress == 900) { progress90 = true; if (pageFinish) { startProgress90to100(); } } } }, (i + 1) * 2); } }
再加载到100%:
// 加载到90%后再加载到100%public void progressChanged(int newProgress) { if (progress90) { int progress = newProgress * 100; if (progress > 900) { mProgressBar.setProgress(progress); if (progress == 1000) { mProgressBar.setVisibility(View.GONE); } } } }
5、推荐阅读
如很多细节不知缘由的查看这里
- https://developer.android.com/reference/android/webkit/WebSettings.html
- http://www.jianshu.com/p/32d48ca7d0e0
- http://www.apkfuns.com/android-webview%E4%B8%8Ejavascript%E4%BA%A4%E4%BA%92.html
6、所遇问题
- WebView加载网页不显示图片解决办法
- webview: 视频全屏播放按返回页面被放大的问题
- Failed to init browser shader disk cache.
- EGL_BAD_DISPLAY
- Unknown frame routing id: 3
- 找不到assets目录下资源:注意assets在哪层文件夹下!与AndroidManifest.xml同级
- 视频播放宽度比webview设置的宽度大,超过屏幕:设置ws.setLoadWithOverviewMode(false);
- onDestroy时的清除资源操作
End
最后再附一遍项目地址
- Android 关于WebView全方面的使用(项目应用篇)
- Android 关于WebView全方面的使用(项目应用篇)
- Android 关于WebView全方面的使用
- 关于写android音频方面的应用
- AndroidのNotification之全方面应用
- 关于Java的Collection 全方面了解
- Android中关于WebView的使用办法
- Android中关于WebView的使用总结
- 关于android的WebView
- 关于WebView的使用
- 关于webview的使用
- 关于DWR的使用方面
- 关于新闻类android应用webview缓存的功能需求
- 最全Android webview使用详解
- Android WebView的应用(转)
- 关于redis的一些问题,事物方面,线程,在项目中的应用等几个点
- 关于图片集成视频方面的应用
- 关于PGM在OCR方面的应用
- 资料记录-开源app
- C++中sort函数和 stable_sort函数的区别
- 虚幻4 多语言支持
- 将win32程序移植到linux注意事项
- [BZOJ1178][Apio2009]CONVENTION会议中心(单调栈+dp+set)
- Android 关于WebView全方面的使用(项目应用篇)
- Mybatis核心杂谈
- Spring 框架面试题总结
- apache的MultiViews的问题
- js笔记
- 递归建立链表单一head变量
- openCV-基础
- 设计模式-单例模式
- LightOJ1079-Just another Robbery