Android 中 WebView 与 js 简单交互实现图文混排效果,解决图片自适应屏幕与查看大图问题
来源:互联网 发布:淘宝裤子折叠方法图解 编辑:程序博客网 时间:2024/05/18 14:14
做 Android 开发已经有一段时间了,之前一直没有时间写博客,说实话也没有这个意识.一直以来看了很多人的博客,学到了很多知识,在这里感谢下默默付出的键盘侠们.最近自己也尝试着写了几篇博文,突然感觉与人分享也是一种喜悦!!
今天来给大家讲讲如何通过 webview与 js交互来实现图文混排效果.图文混排在移动终端的开发中很常见,它可以让我们轻松的实现一些复杂的页面,比如说新闻详情页面,大家都知道新闻详情页面肯定是既有图片又有文字,如果我们通过布局来实现,那真的是不敢去想,太吓人了!!!!通过 webview我们可以轻松地将复杂的页面展示到我们的 app中,并且通过与 js的简单交互可以实现对一些链接的处理,话不多说,先上图:
首先我们需要在 xml 布局文件中定义一个 webview, 把他当做一个 控件 来使用:
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
既然是与js 交互,那么我们就要然 webview 支持js, 在代码中设置:
- 1
- 2
- 1
- 2
web view 这个类有很多设置方法,比如说支持缩放,设置显示文字的大小等等,这些设置都不是通过 webview 本身进行设置的,而是通过WebSettings这个类来实现的,所以在设置这写属性之前,我们要通过 webview来获得 websetting对象:
- 1
- 1
至于都能设置什么属性,自己去百度吧,这里就不多说的.
要想实现图文混排,我们就得用到webview的一个方法:
- 1
- 1
这个方法有四个参数,第一个参数是 baseurl, 顾名思义,他是一个网址的前缀,举个例子,如果你加载的 data 中有图片,你的图片如果是完整的路径,就是能在网页上面打开,那就不需要前缀,将 baseurl设置为 null即可,如果你的图片不是一个完整的路径,那你就得设置它的baseurl, 保证baseUrl + 你的图片路径在网页上能打开,否则webview 是不会显示要加载的图片的.
也许前面的都可以实现,但是加载图片以后出问题了,图片的尺寸超过了屏幕的大小,导致界面会左右滑动,这对于用户来说是很不友好的,那么这时候我们就得想办法让图片自适应我们的屏幕尺寸, webview 本身是有方法可以做到的:
- 1
- 1
但是!!! 该方法只支持4.4之前的版本.4.4以后的就不起作用了,这是个大坑!!为了能兼容所有该版本.我们在这里通过 webview 与js 交互的方式来实现:
首先我们通过 js的语法来循环遍历接收到的数据,提取出带有”img”标签的内容,高度我们不用去管,设置它的宽度占屏幕的100%:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
这个方法又是在哪里调用的呢?别着急,我们先想一下,图片应该是属于一个链接,那么我们就要找到webview 处理连接的方法,如下:
- 1
- 1
打开 WebViewClient可以发现里面的方法什么逻辑也没有,那么我们就要自己建一个类来该类,复写里面的方法
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
在 onPageFinished 中我们来调用刚才的方法即可.
图片自适应问题解决了,还有一个需求,那就是有的时候我们还需要点击图片开查看大图片,这时候还需要通过 js 来实现, 上面的 onPageFinished方法中可以看到有个方法addImageClickListner(), 我们的图片响应点击事件就是在这里完成的:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
这样写还没有完,还需要 js通讯接口,就是要定义上面 js语法中window.imagelistner.openImage(this.src)的 openImage()方法:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
注意:@JavascriptInterface这个注解一定要加上,否则是无法响应点击事件的,初始化该类:
- 1
- 1
最后通过 web view 添加 js 通讯接口
- 1
- 1
原文:点击打开链接
- Android 中 WebView 与 js 简单交互实现图文混排效果,解决图片自适应屏幕与查看大图问题
- Android 中 WebView 与 js 简单交互实现图文混排效果,解决图片自适应屏幕与查看大图问题
- Android textView展示html图片,实现图文混排,点击查看大图片
- Android webview与js交互上传图片
- 【Android】Android中WebView实现Java与JS交互
- Android中WebView与JS的交互
- Android中webView与JS的交互
- Android中WebView与JS交互
- Android中WebView与JS的交互
- Android 中WebView与JS交互
- Android中webview与js交互
- android java与webview中js交互
- Android中WebView与JS交互
- android中webview与js的交互
- Android中webview与js交互
- Android中webview与js双向交互
- Android中Webview与js交互
- android中WebView与JS的交互
- 关于自己定义一个图片启动app做广告。
- Python 日期和时间
- 基础代码学生管理系统IO版本代码实现
- Tomcat做一个简单的jsp(和Myeclipse)
- 阿里x-paxos基础库
- Android 中 WebView 与 js 简单交互实现图文混排效果,解决图片自适应屏幕与查看大图问题
- 矩阵快速幂专题【完结】
- 网络工具中的瑞士军刀——netcat工具简介
- 经典模型简介
- 基于深度学习的目标检测研究进展
- Eclipse 构建Maven项目详细流程(图文并茂)
- XGBOOST整理
- 设计模式(三)
- 数据库总结(一)