Android WebView学习

 

1、关于WebView的使用：

• ****与JS交互****
• 拨打电话、发送短信、发送邮件
• 上传图片(版本兼容)
• 进度条设置
• 字体大小设置
• 返回网页上一层、显示网页标题
• 全屏播放网络视频

首页

2、文章说明

WebView的使用已经是老生常谈了，看到很多文章说了用法，但我很少看到全的或者是项目中可以直接使用的，都是看了很多后，自己把功能都集合在一起。这里是一份比较全面的WebView项目应用篇，其中已经解决了应用时出现的很多bug，希望能对大家有帮助。

3、项目地址

WebViewStudy

4、内容详细介绍

4.1 电话短信邮件

电话短信邮件&与JS交互测试.png

给WebView设置WebViewClient：

1. webView.setWebViewClient(new MyWebViewClient(this));

2.  

其中MyWebViewClient内容：

1. /**

2. * 监听网页链接:

3. * - 优酷视频直接跳到自带浏览器

4. * - 根据标识:打电话、发短信、发邮件

5. * - 进度条的显示

6. * - 加载完成后，添加javascript监听

7. */

8. public class MyWebViewClient extends WebViewClient {

9.  

10. private IWebPageView iWebPageView;

11. private WebViewActivity activity;

12.  

13. public MyWebViewClient(IWebPageView iWebPageView) {

14. this.iWebPageView = iWebPageView;

15. activity = (WebViewActivity) iWebPageView;

16.  

17. }

18.  

19. @SuppressWarnings("deprecation")

20. @Override

21. public boolean shouldOverrideUrlLoading(WebView view, String url) {

22. // 优酷视频跳转浏览器播放

23. if (url.startsWith("http://v.youku.com/")) {

24. Intent intent = new Intent();

25. intent.setAction("android.intent.action.VIEW");

26. intent.addCategory("android.intent.category.DEFAULT");

27. intent.addCategory("android.intent.category.BROWSABLE");

28. Uri content_url = Uri.parse(url);

29. intent.setData(content_url);

30. activity.startActivity(intent);

31. return true;

32.  

33. // 电话、短信、邮箱

34. } else if (url.startsWith(WebView.SCHEME_TEL) || url.startsWith("sms:") || url.startsWith(WebView.SCHEME_MAILTO)) {

35. try {

36. Intent intent = new Intent(Intent.ACTION_VIEW);

37. intent.setData(Uri.parse(url));

38. activity.startActivity(intent);

39. } catch (ActivityNotFoundException ignored) {

40. }

41. return true;

42. }

43. iWebPageView.startProgress();

44. view.loadUrl(url);

45. return false;

46. }

47.  
48.  

49. @Override

50. public void onPageFinished(WebView view, String url) {

51. if (activity.progress90) {

52. iWebPageView.hindProgressBar();

53. } else {

54. activity.pageFinish = true;

55. }

56. if (!CheckNetwork.isNetworkConnected(activity)) {

57. iWebPageView.hindProgressBar();

58. }

59. // html加载完成之后，添加监听图片的点击js函数

60. iWebPageView.addImageClickListener();

61. super.onPageFinished(view, url);

62. }

63.  

64. // 视频全屏播放按返回页面被放大的问题

65. @Override

66. public void onScaleChanged(WebView view, float oldScale, float newScale) {

67. super.onScaleChanged(view, oldScale, newScale);

68. if(newScale - oldScale > 7) {

69. view.setInitialScale((int)(oldScale / newScale * 100)); //异常放大，缩回去。

70. }

71. }

72. }

73.  

因为有很多配置，这里把各个功能模块通过接口IWebPageView分离了出来，这样逻辑更清晰。

4.2 与JS交互

相信大家已经看到了上面"----点击了图片"的Toast，这里需要先给WebView设置JavascriptInterface：
webView.addJavascriptInterface(new ImageClickInterface(this), "injectedObject");

其中ImageClickInterface相关代码：

1. public class ImageClickInterface {

2. private Context context;

3.  

4. public ImageClickInterface(Context context) {

5. this.context = context;

6. }

7.  

8. @JavascriptInterface

9. public void imageClick(String imgUrl, String hasLink) {

10. Toast.makeText(context, "----点击了图片", Toast.LENGTH_SHORT).show();

11. // 查看大图

12. // Intent intent = new Intent(context, ViewBigImageActivity.class);

13. // intent.putStringArrayListExtra("imgUrl",imgUrl);

14. // context.startActivity(intent);

15. // Log.e("----点击了图片 url: ", "" + imgUrl);

16. }

17. }

18.  

加入监听：

1. public void addImageClickListener() {

2. // 这段js函数的功能就是，遍历所有的img节点，

3. // 并添加onclick函数，函数的功能是在图片点击的时候调用本地java接口并传递对应src和has_link里的值过去

4. webView.loadUrl("javascript:(function(){" +

5. "var objs = document.getElementsByTagName(\"img\");" +

6. "for(var i=0;i

7. "{" +

8. "objs[i].onclick=function(){window.injectedObject.imageClick(this.getAttribute(\"src\"),this.getAttribute(\"has_link\"));}" +

9. "}" +

10. "})()");

11. }

12.  

我们来看一下网页对应的源码：

1. 

2.  

大家可能觉得有点怪异..因为这是保存的本地网页，如是线上的话，是这样：

1. 

2.  

这里传递过去的是一个图片url的值，没有的属性传过去的则是null。这样我们就可以对其进行具体的操作了。

4.3 字体大小设置

1. /** 设置字体默认缩放大小(改变网页字体大小,setTextSize api14被弃用)*/

2. ws.setTextZoom(100);

3.  

其中100为默认缩放比，通过设置缩放比来控制字体大小。

4.4 上传图片(版本兼容) & 全屏播放网络视频 & 显示网页标题

这里因为篇幅原因，里面的代码很多，就不贴出来了，大家可以点击MyWebChromeClient.java，查看具体代码。

上传图片.png

4.5 返回网页上一层

返回网页上一层及退出全屏等操作：

1. @Overridepublic

2. boolean onKeyDown(int keyCode, KeyEvent event) {

3. if (keyCode == KeyEvent.KEYCODE_BACK) {

4. //全屏播放退出全屏

5. if (webChromeClient.inCustomView()) {

6. hideCustomView();

7. return true;

8. //返回网页上一页

9. } else if (webView.canGoBack()) {

10. webView.goBack();

11. return true;

12. //退出网页

13. } else {

14. webView.loadUrl("about:blank");

15. finish();

16. }

17. }

18. return false;

19. }

20.  

4.6 进度条设置

这里用的是先加载到90%再加载到100%, 具体为什么相信大家都懂吧...

1. // 进度条 假装加载到90%

2. public void startProgress90() {

3. for (int i = 0; i < 900; i++) {

4. final int progress = i + 1;

5. mProgressBar.postDelayed(new Runnable() {

6. @Override

7. public void run() {

8. mProgressBar.setProgress(progress);

9. if (progress == 900) {

10. progress90 = true;

11. if (pageFinish) {

12. startProgress90to100();

13. }

14. }

15. }

16. }, (i + 1) * 2);

17. }

18. }

19.  

再加载到100%:

1. // 加载到90%后再加载到100%

2. public void progressChanged(int newProgress) {

3. if (progress90) {

4. int progress = newProgress * 100;

5. if (progress > 900) {

6. mProgressBar.setProgress(progress);

7. if (progress == 1000) {

8. mProgressBar.setVisibility(View.GONE);

9. }

10. }

11. }

12. }

13.  

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时的清除资源操作

 

有技术困惑的小伙伴可以加群交流

 

群号：168786059

加群备注：技术交流