专栏首页Android自学android webview加载html图片自适应手机屏幕大小&点击查看大图

android webview加载html图片自适应手机屏幕大小&点击查看大图

我们在开发中,显示信息详情时,一般后台会给出html文本,在android端一般采用webview控件来展示,但是后台给出的html文本一般是给电脑端用的,没有自适配手机,导致手机端图片显示过大,需要左右移动来查看全图。下面给出几种实用方法,达到在手机端用webview展示html中的图片,能自适应手机屏幕展示。

需要用webview控件进行展示html文本,为使文字也自适应手机屏幕大小,需要先对android webview控件的属性进行相应设置,这里bindingView.contentWv代表webview控件。

WebSettings webSettings = bindingView.contentWv.getSettings();//获取webview设置属性 webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);//把html中的内容放大webview等宽的一列中 webSettings.setJavaScriptEnabled(true);//支持js webSettings.setBuiltInZoomControls(true); // 显示放大缩小 webSettings.setSupportZoom(true); // 可以缩放

12345

WebSettings webSettings = bindingView.contentWv.getSettings();//获取webview设置属性webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);//把html中的内容放大webview等宽的一列中webSettings.setJavaScriptEnabled(true);//支持jswebSettings.setBuiltInZoomControls(true); // 显示放大缩小webSettings.setSupportZoom(true); // 可以缩放

下面介绍三种常用的方法:

方法一:直接替换html文本中img标签下图片大小

如果html中图片没有设置大小,可以采用下面简单方法,设置图片的宽高,但图片可能会变形。

content.replace("<img", "<img height=\"250px\"; width=\"100%\"");

1

content.replace("<img", "<img height=\"250px\"; width=\"100%\"");

方法二:使用Jsoup查找img标签,替换图片的宽度和高度

实现步骤:

1. 导入jsoup包

compile 'org.jsoup:jsoup:1.10.2'

1

compile 'org.jsoup:jsoup:1.10.2'

2. 在代码中添加img标签替换函数

/** * 将html文本内容中包含img标签的图片,宽度变为屏幕宽度,高度根据宽度比例自适应 **/ public static String getNewContent(String htmltext){ try { Document doc= Jsoup.parse(htmltext); Elements elements=doc.getElementsByTag("img"); for (Element element : elements) { element.attr("width","100%").attr("height","auto"); } return doc.toString(); } catch (Exception e) { return htmltext; } }

12345678910111213141516

/**      * 将html文本内容中包含img标签的图片,宽度变为屏幕宽度,高度根据宽度比例自适应    **/public static String getNewContent(String htmltext){        try {            Document doc= Jsoup.parse(htmltext);            Elements elements=doc.getElementsByTag("img");            for (Element element : elements) {                element.attr("width","100%").attr("height","auto");            }             return doc.toString();        } catch (Exception e) {            return htmltext;        }    }

3. 在webview中加载内容时调用替换函数

bindingView.contentWv.loadDataWithBaseURL(null, getNewContent(content), “text/html”, “utf-8”, null);

注意事项,在进行项目混淆时,需要添加‘-keep class org.jsoup.*’这句,否则会报错*

使用此方法,需要引入第三方库,但使用比较简单。

方法三:使用js脚本,重置img标签中图片的宽度和高度

此方法需要使用js,固webview设置属性中一定要添加下面这句

webSettings.setJavaScriptEnabled(true);//支持js

1

webSettings.setJavaScriptEnabled(true);//支持js

实现步骤:

1. 给webview重新设置WebViewClient

bindingView.contentWv.setWebViewClient(new MyWebViewClient()); bindingView.contentWv.addJavascriptInterface(new JavaScriptInterface(this), "imagelistner");//这个是给图片设置点击监听的,如果你项目需要webview中图片,点击查看大图功能,可以这么添加

12

bindingView.contentWv.setWebViewClient(new MyWebViewClient());bindingView.contentWv.addJavascriptInterface(new JavaScriptInterface(this), "imagelistner");//这个是给图片设置点击监听的,如果你项目需要webview中图片,点击查看大图功能,可以这么添加

2. 重写WebViewClient的onPageFinished方法

1

private class MyWebViewClient extends WebViewClient { @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); imgReset();//重置webview中img标签的图片大小 // html加载完成之后,添加监听图片的点击js函数 addImageClickListner(); } @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } } /** * 对图片进行重置大小,宽度就是手机屏幕宽度,高度根据宽度比便自动缩放 **/ private void imgReset() { bindingView.contentWv.loadUrl("javascript:(function(){" + "var objs = document.getElementsByTagName('img'); " + "for(var i=0;i<objs.length;i++) " + "{" + "var img = objs[i]; " + " img.style.maxWidth = '100%'; img.style.height = 'auto'; " + "}" + "})()"); }

123456789101112131415161718192021222324252627282930

private class MyWebViewClient extends WebViewClient {     @Override    public void onPageFinished(WebView view, String url) {        super.onPageFinished(view, url);        imgReset();//重置webview中img标签的图片大小        // html加载完成之后,添加监听图片的点击js函数        addImageClickListner();    }     @Override    public boolean shouldOverrideUrlLoading(WebView view, String url) {        view.loadUrl(url);        return true;    }} /** * 对图片进行重置大小,宽度就是手机屏幕宽度,高度根据宽度比便自动缩放 **/private void imgReset() {        bindingView.contentWv.loadUrl("javascript:(function(){" +                "var objs = document.getElementsByTagName('img'); " +                "for(var i=0;i<objs.length;i++)  " +                "{"                + "var img = objs[i];   " +                "    img.style.maxWidth = '100%'; img.style.height = 'auto';  " +                "}" +                "})()");    }

1

1

如果只需要图片自应手机屏幕大小,现在已经结束了,完成任务了,且在webviewClient中的onPageFinished中也不需要添加addImageClickListner()方法,下面介绍的时点击webview图片查看大图。

3. 点击详情图片查看大图

(1)注入js脚本,设置图片点击函数openImage

private void addImageClickListner() { // 这段js函数的功能就是,遍历所有的img节点,并添加onclick函数,函数的功能是在图片点击的时候调用本地java接口并传递url过去 bindingView.contentWv.loadUrl("javascript:(function(){" + "var objs = document.getElementsByTagName(\"img\"); " + "for(var i=0;i<objs.length;i++) " + "{" + " objs[i].onclick=function() " + " { " + " window.imagelistner.openImage(this.src); " + " } " + "}" + "})()"); }

12345678910111213

private void addImageClickListner() {        // 这段js函数的功能就是,遍历所有的img节点,并添加onclick函数,函数的功能是在图片点击的时候调用本地java接口并传递url过去        bindingView.contentWv.loadUrl("javascript:(function(){" +                "var objs = document.getElementsByTagName(\"img\"); " +                "for(var i=0;i<objs.length;i++)  " +                "{"                + "    objs[i].onclick=function()  " +                "    {  "                + "        window.imagelistner.openImage(this.src);  " +                "    }  " +                "}" +                "})()");    }

(2)实现点击事件

public static class JavaScriptInterface { private Context context; public JavaScriptInterface(Context context) { this.context = context; } //点击图片回调方法 //必须添加注解,否则无法响应 @JavascriptInterface public void openImage(String img) { Log.i("TAG", "响应点击事件!"); Intent intent = new Intent(); intent.putExtra("image", img); intent.setClass(context, BigImageActivity.class);//BigImageActivity查看大图的类,自己定义就好 context.startActivity(intent); } }

12345678910111213141516171819

public static class JavaScriptInterface {     private Context context;     public JavaScriptInterface(Context context) {        this.context = context;    }     //点击图片回调方法    //必须添加注解,否则无法响应    @JavascriptInterface    public void openImage(String img) {        Log.i("TAG", "响应点击事件!");        Intent intent = new Intent();        intent.putExtra("image", img);        intent.setClass(context, BigImageActivity.class);//BigImageActivity查看大图的类,自己定义就好        context.startActivity(intent);    }}

我们来看下实际效果: 下面图1代表是没有进行适配的图片显示效果,可能看到图片没有显示全,需要左右移动才能查看全图:

下面图2代表是适配后的图片显示效果:

可以看出效果还是挺明显的,适配效果很好。

总结

上面三种方法,都能达到webview中图片自适应用手机屏幕大小,但三种方法,笔者更多的是采用第三种方法来实现。使用虽然复杂一些,但是不用引入第三方库,方便控制。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WebView与js交互

    在Project模式,main目录下,和java文件同级创建assets目录,assets目录下创建test.html,图片你随便找两张也放在asset是目录下...

    cMusketeer
  • WebView完全解读

    WebView是一个使用WebKit引擎(4.4之后基于Chromium)的浏览器控件。因此可以将WebView当做一个完整的浏览器使用。

    小小工匠
  • 开发Hybrid App的技术选型

    如果我们把Hybrid App理解为运行在android或者ios以及其他移动终端设备上的应用,也可以叫做H5 APP,这种开发应用的模式结合web开发技术与N...

    算法与编程之美
  • 70%以上业务由H5开发,手机QQ Hybrid 的架构如何优化演进?

    随着前端开发的兴起,QQ也逐渐演变为Web与原生终端混合的开发模式。得到Web动态运营能力的同时,QQ也在交互响应速度、后台服务压力、海量用户集的带宽冲击等方面...

    后端码匠
  • Android应用之Hybird混合开发,集成web页面的方法尝试

    1.在Android项目代码目录的app/src/main目录下面创建个assets文件夹。

    杨永贞
  • Android日常开发问题总结:这些问题火候不够,随时变成删库跑路!

    日常开发中碰到了各种开发问题,捡选了一部分分享出来。有些问题非常简单,属于编码规范类,有些属于特定情况下碰到的问题,不是很常见。不太准确的地方,欢迎共同探讨下~

    Android技术干货分享
  • Android点击WebView实现图片缩放及滑动浏览效果

    最近做的项目有一个要求,就是在WebView中显示的html,需要在点击其中的图片时进行放大,并进行缩放和滑动 浏览,我第一想到的是这是和js进行交互的事情...

    砸漏
  • Android WebView 踩坑日记,字体怎么突然变小了???

    最近,端内在做 webView 统一的时候,个性签名中的 WebView 替换为 CustomWebView 之后,发现字体突然变小。

    程序员徐公
  • 仅需四步它就属于你!—WebView最详解

    新的一天,新的文章,各位花粉肯定已经准备好学习新的知识了,那么今天依旧为大家带来一个实际项目中也非常实用的控件。现在市面上的 App里几乎都内置了 Web网页,...

    下码看花
  • Android开发笔记(六十四)网页加载与JS调用

    如果一个网站已经有现成的网页及业务逻辑,那么使用WebView将其内嵌到app中,省去了app重画页面与http通信的事情,无疑是更经济的做法。WebVie...

    用户4464237
  • Android的webview研究

    最近做的项目大量用到了 webview ,用网页来布局。 Android 的 webview 是基于 webkit 内核,不过他的运行效果和 firefox 上...

    chroya
  • Android中WebView的基本配置与填坑记录大全

    在应用程序开发过程中,经常会采用webview来展现某些界面,这样就可以不受发布版本控制,实时更新,遇到问题可以快速修复。

    砸漏
  • 解决Android WebView拦截url,视频播放加载失败的问题

    需求:Android调用webView加载网页的时候,拦截某一个链接不执行此链接,执行指定跳转到其他activity页面。

    砸漏
  • WebView深度学习(一)之WebView的基本使用以及Android和js的交互

    //设置WebView缓存(当加载 html 页面时,WebView会在/data/data/包名目录下生成 database 与 cache 两个文件夹,请求...

    AWeiLoveAndroid
  • Android:最全面的 Webview 详解

    注意: 每个 Application 只调用一次 WebSettings.setAppCachePath(),WebSettings.setAppCacheMa...

    Carson.Ho
  • WebView深度学习(二)之全面总结WebView遇到的坑及优化

    这篇文章讲一下WebView遇到的那些坑,带领各位爬坑。这里如果有你没遇到的问题,欢迎留言告诉我,我尽我所能帮你解决。感谢大家支持。

    AWeiLoveAndroid
  • Native地图与Web融合技术的应用与实践

    有用户反馈美团打车地图的性能有一些问题,美团打车技术团队在调研分析之后,采用了一套Native地图与Web的融合框架,不仅实现了用户手势事件智能分发的机制,还解...

    美团技术团队
  • QQ天气H5-前端完整解析

    手Q天气是在手Q 6.0版本以上新增的功能,页面会展现当天的气温情况,已经五天温度折线图以及24小时温度图表等。 并且为了更好的交互效果,天气页面会根据8种不同...

    IMWeb前端团队
  • QQ天气H5-前端完整解析

    前言: 什么是手Q天气 手Q天气是在手Q 6.0版本以上新增的功能,页面会展现当天的气温情况,已经五天温度折线图以及24小时温度图表等。 并且为了更好的交互效果...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券