安卓项目实战之：网络图片适配方案

1，UI给的切图上有明确标注图片宽高尺寸的

此时分两种情况：
1，xml中ImageView的宽度小于屏幕宽度
通常指的是作为列表Item的一个图片元素出现，或者其他布局情况下的一个图片元素等，解决方案如下：

<ImageView
   android:id="@+id/iv_detail_img"
   android:layout_width="70dp"
   android:layout_height="50dp"
   android:scaleType="fitXY"/>

直接在布局文件中给图片设置固定宽高并配合scaleType属性即可实现，该宽高值即为UI切图上标注的宽高值，当然了如果UI切图上标注的宽高值单位是px，那么我们需要先将其转换成dp值，关于如何转换以及实际项目中与UI相关的其他内容，可以查看本人整理的博客：安卓项目实战之与UI那点事：图片适配你必须要了解的知识点 。

scaleType指定了ImageView如何显示图片，包括是否进行缩放、等比缩放、缩放后展示的位置等，设置的方式有两种包括：
1.在xml中设置android:scaleType=”fitXY”
2.或在代码中调用.setScaleType(ImageView.ScaleType.fitXY);
Android提供了八种三大类scaleType的属性值，各属性介绍如下表：

注：matrix模式需要创建一个矩阵用于指定原图如何展示。其实前面的7种模式都是通过ImageView在内部生成了相应的矩阵，即是提供了该模式的一种特定值，使用该模式只要传入相应的矩阵，就能实现上述七种显示属性所实现的效果。具体使用方法如下：

imageView.setScaleType(ImageView.ScaleType.MATRIX);//设置为矩阵模式
Matrix matrix = new Matrix();//创建一个矩阵
matrix.setTranslate(50, 50)//平移
matrix.preRotate(90);//旋转
imageView.setImageMatrix(matrix);//应用该矩阵

2，xml中ImageView的宽度等于屏幕宽度
比如Banner图，以及item中图片元素的宽度为match_parent的情况，此时我们需要根据UI给的切图上标注的固定宽高值去计算得到一个宽高比，然后在代码中根据该宽高比去动态设置图片的高度，示例代码如下:
首先在xml中设置宽度填充，高度自适应

<ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

然后代码中根据宽高比动态设置高度：

DisplayMetrics dm = new DisplayMetrics();
mActivity.getWindowManager().getDefaultDisplay().getMetrics(dm); //获取手机屏幕的大小
LinearLayout.LayoutParams linearParams = (LinearLayout.LayoutParams) banner.getLayoutParams();
linearParams.height = (dm.widthPixels*366)/720;
banner.setLayoutParams(linearParams);

上面LinearLayout控件为banner控件的父容器。

2，宽度填充屏幕，高度不确定，即高度需要自适应

方案一：如果是使用Glide框架来加载网络图片的，那么在加载过程中可以动态计算原图的宽高比，再根据该宽高比计算出在宽度等于屏幕宽度情况下的高度值，或者一般后台返回的图片信息就是直接包含原图宽高属性的。

方案二：使用WebView加载图片进行适配，实际项目中的使用场景：

最近公司项目中新闻模块需要用WebView来加载，而且服务端返回的是String类型的html代码，包含各种标签，各种转义符，一开始直接用loadDataWithBaseURL()加载的时候，出现各种<、>，后面一查，是因为转义符的关系，那直接用String类的replace()方法替换成对应的<、>，就搞定了。

但是当新闻里面的图片大于屏幕宽度时，会出现横向滚动条，图片也只显示部分，向右滚动屏幕才能看到剩余的图片内容，这样极不方便，也不美观。

网上搜索了一番，有种解决方案是直接把整个WebView的绽放比例变小，适配屏幕，这样出来的图片是适配屏幕了，但是文字就变得非常小，完全就是把PC端网页塞进手机的感觉了。

最后终于找到了另外一种解决方案：让PC端在img标签里面配置一下最大宽度就可以解决了，如下：

<style>
 
img{
 max-width:80%;
 height:auto;
}

</style>

让负责后台的人员添加css来限制图片的大小，例如如上设置，这样每张图片的最大宽度只有设备的80%那么宽了，你可以设置成其它值，注意，是设置max-width的属性值。

如果后台人员不方便进行修改的话我们安卓开发人员也是可以进行修改的，只需要调用如下代码就可以：

htmlData = htmlData.replace("<img", "<img style='max-width:100%;height:auto;'");

在每个img标签里面，加上最大宽度和高度的控制，最大宽度比例可以根据需要自由设置。