android iamgeview 宽度自适应 android webview 图片自适应

onPageFinish中用js调用对图片样式进行调整，这种方法是在网页加载完再调整图片样式进行二次渲染，所以会有一个短暂延时，可以看到明显的页面闪烁变化。另外一种方法是在加载网页前对网页图片样式进行修改调整，然后再用loadDataWithBaseURL加载网页，这种方法不会有二次渲染而导致的页面闪烁。

下面是用第二种方法对图片处理的一种方案。调整图片的思路是如果图片大小超过了屏幕大小就按屏幕宽度来适配，如果未超过则按原图显示。修改图片样式需要用jsoup获取图片元素信息并做修改。

 处理方法如下：

               

//获取图片大小              
    public BitmapFactory.Options getImageInfo(String imgPath) {
		BitmapFactory.Options options = new BitmapFactory.Options();
		options.inJustDecodeBounds = true;
		Bitmap bmp = BitmapFactory.decodeFile(imgPath, options);	
		return options;
	}
	
	//调整网页中图片的样式
	public String resetImageSize(String htmlContent, Context context) {
		
		Document doc = Jsoup.parse(htmlContent);
		Elements imgs = doc.getElementsByTag("img");
		if (imgs.size() != 0) {
		    WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
		    int width = wm.getDefaultDisplay().getWidth();
		    int height = wm.getDefaultDisplay().getHeight();
		    float density = context.getApplicationContext().getResources().getDisplayMetrics().density;
		       
		    String baseImagePath = "/mnt/sdcard/test/image/";		       
		    for (Element img : imgs) {
                String src = baseImagePath+img.attr("src");// 获取img中的src路径
		        
                BitmapFactory.Options option = getImageInfo(src);
		        
                String widthStyle = "100%";
		        if (option.outWidth*density < width) {
		            widthStyle = "auto";     
		        }
		        
		        img.attr("width", widthStyle);
		    }
		}
		
        return doc.toString();
		
	}

以上方法是处理网页的图片已经存储在本地的情况，最近遇到网页直接从网络获取图片并需要对图片进行自适应的情况。

开始用了以下方法来处理，主要通过获取img标签中的width属性来进行适配。

public static String resetImageSize(Context context, String htmlContent) {
    WindowManager wm = (WindowManager) context
                        .getSystemService(Context.WINDOW_SERVICE);
                @SuppressWarnings("deprecation")
                int width = wm.getDefaultDisplay().getWidth();
                @SuppressWarnings("deprecation")
                int height = wm.getDefaultDisplay().getHeight();
                float density = context.getApplicationContext()
                        .getResources().getDisplayMetrics().density;
    Document doc = Jsoup.parse(htmlContent); 
    Elements imgs = doc.getElementsByTag("img"); 
    if (imgs != null && imgs.size() > 0) { 
	    for (Element img : imgs) { 
		    String src = img.attr("src");// 获取img中的src路径 
		    String imageWidth = img.attr("width");// 获取img中的width
		    String imageHeight = img.attr("height");// 获取img中的height
		    if (StringUtil.isEmpty(imageWidth) || imageWidth.contains("%")){ 
			    continue; 
		    }
			
		    String widthStyle = "100%"; 
		    try{ 
			    float imageWidthFloat = Float.parseFloat(imageWidth); 
			    if (imageWidthFloat*density < width) { 
				    widthStyle = "auto"; 
			    } 
			    img.attr("width", widthStyle); 
			    //对高度按原比例缩放 
			    if (imageWidthFloat*density > width) { 
				    float imageHeightFloat = Float.parseFloat(imageHeight); 
				    if (imageHeightFloat > 0){ 
					    float newImageHeight = width/density * imageHeightFloat/imageWidthFloat; 
					    img.attr("height", newImageHeight+""); 
				    } 
			    } 
		    }catch(Exception e){ 
		    } 
	    } 
    }
    return doc.toString(); 
}

这种方法对img标签中有width和height设置的图片能很好的适配，但是发现云端后台给的数据中有的img标签没有width和height属性。这时候以上方法就不起作用了。后来分别尝试了设置webview的userWideViewPort和setInitialScale两种方法，发现整体缩放的效果比较差，页面显的比较小，不能很好的适配图片。

自适应
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setLoadWithOverviewMode(true);
//设置缩放比例
webview.setInitialScale(200);

最后用了以下在webview加载完后通过js对图片进行适配的处理方法，适配效果比较好。

public class MyWebViewClient extends WebViewClient {

    @Override
    public void onPageFinished(WebView view, String url) {
        view.getSettings().setJavaScriptEnabled(true);
        super.onPageFinished(view, url);        
        resetImagSize(view);
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        return super.shouldOverrideUrlLoading(view,url);
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        view.getSettings().setJavaScriptEnabled(true);
        super.onPageStarted(view, url, favicon);
    }
    
    //方法1：对宽度大于屏幕宽度的图片缩小到100%大小
    private void resetImagSize(WebView webView) {
        webView.loadUrl("javascript:(function(){"
                +"var objs = document.getElementsByTagName(\"img\"); "
                +"for(var i=0;i<objs.length;i++) "
                +"{"
                //通过js代码找到标签为img的代码块，对宽度大于屏幕宽度的图片缩放到100%大小
                + "var imageWidth=objs[i].clientWidth;var imageHeight=objs[i].clientHeight;"
                + "if (imageWidth>window.screen.width){ objs[i].style.width = '100%';objs[i].style.height = 'auto';}"
                +"}"
                +"})()");
    }

    //方法2：设置图片最大宽度为100%,此方法与方法1处理效果相同,但比方法1更简洁
    private void resetImagSize(WebView webView) {
        webView.loadUrl("javascript:(function(){"
                +"var objs = document.getElementsByTagName(\"img\"); "
                +"for(var i=0;i<objs.length;i++) "
                +"{"
                //通过js代码找到标签为img的代码块，设置图片最大宽度
                + "objs[i].style.maxWidth = '100%';objs[i].style.height = 'auto';"
                +"}"
                +"})()");
    }
}

//加载网页数据
webView.setWebViewClient(new MyWebViewClient());
webView.loadDataWithBaseURL(null, content, "text/html", "utf-8", null);