平武建站

Android中的图片优化完全指南-创新互联

前言

建网站原本是网站策划师、网络程序员、网页设计师等，应用各种网络程序开发技术和网页设计技术配合操作的协同工作。创新互联公司专业提供网站设计制作、网站制作,网页设计,网站制作(企业站、响应式网站开发、电商门户网站)等服务,从网站深度策划、搜索引擎友好度优化到用户体验的提升,我们力求做到极致!

图片作为内存消耗大户，一直是开发人员尝试优化的重点对象。Bitmap的内存从3.0以前的位于native，到后来改成jvm，再到8.0又改回到native。fresco花费很多精力在5.0系统之前把Bitmap内存改回到native，高版本上面则遵循系统实现，却又被官方打脸。

jvm每个进程都有内存上限，而native则没有限制（不是没有影响，至少不会oom），所以把内存大户Bitmap挪到native可能是很多人的梦想，但native的管理和实现明显比jvm更为复杂，除非有现成实现，很少有人去动这一块。行业里面的大部分图片库都没有涉及这块，大部分的程序员也秉着够用就好的态度用了很多年，这说明程序员也是会偷懒的。官方的策略修改到底原因几何，其实我也没搜到相关说明，有知道的同学欢迎留言。

概念


图片占用的内存：图片高度 * 图片宽度 * 一个像素占用的内存大小这个公式代表一个图片最终占用的内存大小，项目中的优化图片占用内存都是通过这个三个参数来优化的。

第一条规则：把Bitmap保存到native


一个app里面的图片都会有尺寸，一般情况下面图片的尺寸就是view的大小，而view的大小在我们使用dp单位后在不同的机器上面表现出来的实际像素都有差别，为了节约流量开销，加快返回速度，同时符合按需加载的原则，我们应该只加载实际view尺寸大小的图片。一般图片存储提供商都会提供在线压缩服务，我们只需要在请求链接里面加上参数即可。这里还有个问题我们一般请求加载图片的代码都是写在Activity的onCreate，或者Adapter的getView函数里面，这个时候其实是获取不到view尺寸的（还未measure），这里有几种做法：

使用目测：比如一个列表是左右图片布局的，那就可以请求屏幕一半宽度的尺寸图片

view使用了固定尺寸：这个没有问题，我们直接拿getLayoutParams()的width和height就可以了

view的maxWidth/maxHeight：view无法固定尺寸，我们可以在xml里面给view配置maxWidth/maxHeight来指导图片库加载什么尺寸的图片

加载图片前先measure：不怎么推荐，因为图片加载出来后view还得measure一次

一般做法是给图片加载库包装一层，根据传进来的url判断是否已经指定大小（开发者当然可以决定想加载多大图片），如果还未指定则使用上面的策略进行动态调整，如果最后还是没能加上缩放参数，则有个兜底策略，不加载超过屏幕尺寸大小。

第二条规则：按需请求


做了上面按需加载后还有个问题，会发现有时候不同的页面需要加载同一个图片url，但在尺寸上面有细微差别，结果导致请求重复（一般图片加载库都是url作为缓存key），有点弄巧成拙，反倒浪费了流量和时间。这种情况我们需要做些微调。对于A页面图片尺寸是200x200，对于B页面图片尺寸是180x180，我们认为可以使用200x200的图片缩放到180x180，这有两种做法：第一种是让开发者始终都去加载稍微大一点的图，这个要求有点高，一个页面开发的时候很难前后联系。第二种是修改图片加载库，自动完成这个事情。后者自然合理，修改图片加载库在决定使用缓存的那一步判断是否有比自己大的缓存已经存在即可，当然这个策略可以每个产品自己调整，比如也可以认为已经存在的缓存尺寸小于一定值也是可以接受也是可以的。还有复杂的情况比如缓存图片高宽比和要加强的不一样如何处理等等，策略都可以自己定，但一定有必要做这个事情。

这里还要补充一点，大型产品一般图片域名会有好几个，用来做链路择优用的，一定要记得缓存的时候用来做key的url要去掉域名影响。

再补充一点，有些特殊的使用场景可以考虑采用上面说的第一种方式来做，举个例子比如一个操作一定会加载100x100的图，然后也一定会等会加载500x500的同一张图，这种场景下面按第二种方式来处理显然会加载两次，但如果开发者这2个位置写死都加载500x500则明显更好一些。所以方法是死的，人是活的，要看实际使用场景。

还有一些特殊场景，比如程序里面有两个进程，A进程会加载500x500的图，B进程会加载不管什么尺寸的同一张图，默认情况下面这2个请求会同时发出，这就很可能会造成重复请求，这种情况下面需要做一点跨进程同步，或者简单一点其中一个进程请求做一点延迟处理。

第三条规则：合并相似请求


实在不得已要从服务端加载大图或者原始尺寸下来，或者因为上面说的策略故意加载大图下来，在decode的时候要进行采样，这个是老生常谈了，使用options.inJustDecodeBounds来获取原始尺寸，然后按需使用options.inSampleSize来采样图片到接近view尺寸。

第四条规则：按需加载


Bitmap在decode的时候可以使用inPreferredConfig指定配置格式，常见的有：


参数取值含义ALPHA_8图片中每个像素用一个字节（8位）存储，该字节存储的是图片8位的透明度值RGB_565图片中每个像素用两个字节（16位）存储，两个字节中高5位表示红色通道，中间6位表示绿色通道，低5位表示蓝色通道ARGB_4444图片中每个像素用两个字节（16位）存储，Alpha，R，G，B四个通道每个通道用4位表示ARGB_8888图片中每个像素用四个字节（32位）存储，Alpha，R，G，B四个通道每个通道用8位表示

对于质量细节要求比较高的图片可以使用ARGB_888，这也是fresco的默认配置。而对于JPG图片可以使RGB_565，从上面可以看出内存占用之间减少一半，非常有吸引力，而app里面事实上大部分应该都是JPG。但往往在和视觉的PK当中开发往往败下阵来，降低了图片质量不行！！开发总是锲而不舍，我们可以建议采用这样的策略：对于尺寸小于一定尺寸的JPG（比如300），我们使用565，而对于大图为了保留细节我们仍然使用8888。还是那句话策略是活的。

第五条规则：进一步按需加载


使用三级缓存机制，内存磁盘网络，这也是官方推荐的方式。内存缓存旨在加快访问速度，磁盘缓存避免反复请求。关于这一点就不在赘述了，基本开源图片库都会这么做

第六条规则：使用三级缓存机制


很多场景下面我们需要显示图片的一部分，或者进行图片效果叠加，比如做个倒影之类的。很多同学上来就准备createBitmap，然后把叠加效果绘制到这个临时Bitmap，或者从原始Bitmap里面先剪一部分出来生成一个新的Bitmap，再设给ImageView。或者使用createScaledBitmap进行缩放。更不小心的同学可能直接把这些操作代码写在UI线程，然后写在子线程又比较麻烦，这边推荐的是使用自定义绘制，canvas有个drawBitmap方法可以把某个区域绘制到指定位置。叠加效果也可以完全使用自定义view来自己draw，这样不会有临时Bitmap生成，效率会更高。

如果自定义view有困难，我们可以使用Drawable，只要能拿到canvas，这两种做法是一样的。
这里列举一些实例，好让大家可以进一步理解：

一个按钮有普通和按下状态，按下是普通状态上面叠加一个遮罩，不需要切两张图，按下状态的Drawable可以使用自定义Drawable的canvas先绘制普通状态的图，再在上面绘制一层颜色。或者按下状态使用LayerDrawable，这个Drawable自动帮你做了这个事情

需要把Bitmap的[0,0,200,200]的区域显示到ImageView上面，使用canvas.drawBitmap(bitmap, [0,0,200,200], [0,0,图片宽,图片高],paint)

绘制倒影，这个逻辑性比较强了，这里就不具体展开，canvas的操作学习下，结合局部绘制其实很简单

有个图片，需要在左上角显示一个角标，正常情况下面需要在左上角摆一个view，如果使用Drawable自定义绘制，canvas画一下就好，类似下面的示例代码。

给大家一个自定义绘制的例子，随心组合：

class WithLineDrawable extends DrawableWrapper {
 private MyConstantState mMyConstantState;
 private boolean mForTop;
 private Paint mLinePaint = new Paint();

 public WithLineDrawable(Drawable drawable, boolean forTop) {
 super(drawable);
 mLinePaint.setColor(getLineColor());
 mForTop = forTop;
 }

 @Override
 public void draw(Canvas canvas) {
 super.draw(canvas);
 if (mForTop) {
   canvas.drawLine(0, 0, getBounds().width(), 0, mLinePaint);
  } else {
   canvas.drawLine(0, getBounds().height(), getBounds().width(), getBounds().height(), mLinePaint);
  }
 }

 @Nullable
 @Override
 public ConstantState getConstantState() {
 if (mMyConstantState == null) {
 mMyConstantState = new MyConstantState();
  }
 return mMyConstantState;
 }

 class MyConstantState extends ConstantState {
 @NonNull
  @Override
 public Drawable newDrawable() {
 return new WithLineDrawable(getWrappedDrawable().getConstantState().newDrawable(), mForTop);
  }

 @Override
 public int getChangingConfigurations() {
 return 0;
  }
 }
}

名称栏目：Android中的图片优化完全指南-创新互联
本文路径：http://pwwzsj.com/article/iijdh.html

其他资讯