android动态图片适配,Android适配利用webview加载后图片显示过大的问题解决

前言

最近在开发过程中，需要用webview控件来展示文章的详情页面，流程是通过请求后台数据，然后用控件加载，而后台返回的文章详情页面是直接网页端使用的，并没有对移动端进行适配，导致webview加载后文章详情展示的图片过大，需要左右移动才能查看完整的图片，这显然给用户的体验很差，这个时候就需要我们移动端进行做适配了。

先来看看没有做适配之前的效果：

我们可以看到加载后的文章详情中的图片只显示了一部分。

下面来看看解决方案：

webview的基本使用流程这里我就不重复说明了，本篇针对的是文章详情加载完成后出现的情况，这里我们使用的方法是：通过js脚本，重置img标签中图片的宽度和高度。

使用步骤：

1、此方法需要使用js,所以webview设置属性中一定要添加下面这句，不然无效。

webView.getSettings().setJavaScriptEnabled(true);//支持javascript

2、给webview重新设置WebViewClient

webView.setWebViewClient(new ArticleWebViewClient());

3、重写WebViewClient的onPageFinished方法

private class ArticleWebViewClient extends WebViewClient {

@Override

public void onPageFinished(WebView view, String url) {

super.onPageFinished(view, url);

//重置webview中img标签的图片大小

imgReset();

}

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return true;

}

/**

* 对图片进行重置大小，宽度就是手机屏幕宽度，高度根据宽度比便自动缩放

**/

private void imgReset() {

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

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

"for(var i=0;i

"{"

+ "var img = objs[i]; " +

" img.style.maxWidth = '100%'; img.style.height = 'auto'; " +

"}" +

"})()");

}

我们再来看看图片自应手机屏幕后的效果图：

总结：

我们可以看到适配后的效果还是蛮不错的，流程是加载完页面后，重置img标签中图片的宽度和高度，到这里就完成了。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

时间： 2019-07-06

android动态图片适配,Android适配利用webview加载后图片显示过大的问题解决相关推荐

android全平台编译libjpeg-turbo并基于ANativeWindow加载JPEG图片
图形图像实践 android全平台编译libjpeg-turbo并基于ANativeWindow加载JPEG图片 android全平台编译libpng并基于ANativeWindow加载PNG图片概 ...
webview加载html图片不显示图片,WebView加载网页不显示图片解决办法
对于大家来讲WebView肯定很熟悉,因为我们在日常开发中经常用到它.所以对于它的一些基本用法我就不在这啰嗦了,直接进入正题. 我遇到的问题就是在使用WebView加载网页的时候图片不显示(我手机系统 ...
利用web实现android的界面,利用WebView加载手机端网页实现APP封装
**思路 : ** 安卓端只使用一个Activity 此Activity中只包含WebView这个控件并且隐藏此Activity的标题栏这样只要我们前端对手机浏览器的适配做的很好我们这个WebV ...
Webview加载本地图片的方案对比
前言先讲讲为什么会有这篇blog,话说前几天做个模块,要求是这样的: 做一个webview的页面,功能类似于微信发朋友圈一样,要求能上传本地图片到webview中进行展示,并按用户喜好添加和删除,当 ...
flutter webview加载http图片失败处理
1.简介开始接手flutter项目,项目flutter版本2.5.3,目前最新2.10.3. 项目中使用webview为 flutter_webview_pro 1.0.0 源码修改版,已经支持we ...
WebView加载html图片不显示问题
参考链接 [1] webview加载https链接(终极解决方案,包括https链接加载http图片显示失败) [2] Android WebView 图片显示不了 http和https混合问题近期 ...
关于WebView加载URL时显示一片空白的问题
问题: 当用WebView加载URL时,WebView只是显示一片空白,而没有正常加载所需要的内容: 1>布局文件: <RelativeLayout xmlns:android=" ...
android webview加载html图片自适应手机屏幕大小点击查看大图
我们在开发中,显示信息详情时,一般后台会给出html文本,在android端一般采用webview控件来展示,但是后台给出的html文本一般是给电脑端用的,没有自适配手机,导致手机端图片显示过大,需要 ...
Android:WebView加载url网页显示不完整解决办法
WebView基本用法如果想要在APP里面加载url网页,或者html代码,首先我们会想到WebView,它的基本用法如下: webview_layout.xml <?xml version= ...

android动态图片适配,Android适配利用webview加载后图片显示过大的问题解决

android动态图片适配,Android适配利用webview加载后图片显示过大的问题解决相关推荐

最新文章

热门文章