详解Android 教你打造高效的图片加载框架

1、概述

优秀的图片加载框架不要太多，什么uil , volley ,picasso,imageloader等等。但是作为一名合格的程序猿，必须懂其中的实现原理，于是乎，今天我就带大家一起来设计一个加载网络、本地的图片框架。有人可能会说，自己写会不会很渣，运行效率，内存溢出神马的。放心，我们拿demo说话，拼得就是速度，奏事这么任性。

关于加载本地图片，当然了，我手机图片比较少，7000来张：

1、首先肯定不能内存溢出，但是尼玛现在像素那么高，怎么才能保证呢？我相信利用lrucache统一管理你的图片是个不二的选择，所有的图片从lrucache里面取，保证所有的图片的内存不会超过预设的空间。

2、加载速度要刚刚的，我一用力，滑动到3000张的位置，你要是还在从第一张给我加载，尼玛，你以为我打dota呢。所以我们需要引入加载策略，我们不能fifo，我们选择lifo，当前呈现给用户的，最新加载；当前未呈现的，选择加载。

3、使用方便。一般图片都会使用gridview作为控件，在getview里面进行图片加载，当然了为了不错乱，可能还需要用户去自己settag，自己写回调设置图片。当然了，我们不需要这么麻烦，一句话ioadimage(imageview,path）即可，剩下的请交给我们的图片加载框架处理。

做到以上几点，关于本地的图片加载应该就木有什么问题了。

关于加载网络图片，其实原理差不多，就多了个是否启用硬盘缓存的选项，如果启用了，加载时，先从内存中查找，然后从硬盘上找，最后去网络下载。下载完成后，别忘了写入硬盘，加入内存缓存。如果没有启用，那么就直接从网络压缩获取，加入内存即可。

2、效果图

终于扯完了，接下来，简单看个效果图，关于加载本地图片的效果图：可以从android 超高仿微信图片选择器 图片该这么加载这篇博客中下载demo运行。

下面演示一个网络加载图片的例子:

80多张从网络加载的图片，可以看到我直接拖到最后，基本是呈现在用户眼前的最先加载，要是从第一张到80多，估计也是醉了。

此外：图片来自老郭的博客，感谢！！！ps:如果你觉得图片不劲爆，day day up找老郭去。

3、完全解析

1、关于图片的压缩

不管是从网络还是本地的图片，加载都需要进行压缩，然后显示：

用户要你压缩显示，会给我们什么？一个imageview，一个path，我们的职责就是压缩完成后显示上去。

1、本地图片的压缩

a、获得imageview想要显示的大小

想要压缩，我们第一步应该是获得imageview想要显示的大小，没大小肯定没办法压缩？

那么如何获得imageview想要显示的大小呢？

/** 
   * 根据imageview获适当的压缩的宽和高 
   * 
   * @param imageview 
   * @return 
   */ 
  public static imagesize getimageviewsize(imageview imageview) 
  { 
 
    imagesize imagesize = new imagesize(); 
    displaymetrics displaymetrics = imageview.getcontext().getresources() 
        .getdisplaymetrics(); 
 
    layoutparams lp = imageview.getlayoutparams(); 
 
    int width = imageview.getwidth();// 获取imageview的实际宽度 
    if (width <= 0) 
    { 
      width = lp.width;// 获取imageview在layout中声明的宽度 
    } 
    if (width <= 0) 
    { 
      // width = imageview.getmaxwidth();// 检查最大值 
      width = getimageviewfieldvalue(imageview, "mmaxwidth"); 
    } 
    if (width <= 0) 
    { 
      width = displaymetrics.widthpixels; 
    } 
 
    int height = imageview.getheight();// 获取imageview的实际高度 
    if (height <= 0) 
    { 
      height = lp.height;// 获取imageview在layout中声明的宽度 
    } 
    if (height <= 0) 
    { 
      height = getimageviewfieldvalue(imageview, "mmaxheight");// 检查最大值 
    } 
    if (height <= 0) 
    { 
      height = displaymetrics.heightpixels; 
    } 
    imagesize.width = width; 
    imagesize.height = height; 
 
    return imagesize; 
  } 
 
  public static class imagesize 
  { 
    int width; 
    int height; 
  } 

可以看到，我们拿到imageview以后：

首先企图通过getwidth获取显示的宽；有些时候，这个getwidth返回的是0；

那么我们再去看看它有没有在布局文件中书写宽；

如果布局文件中也没有精确值，那么我们再去看看它有没有设置最大值；

如果最大值也没设置，那么我们只有拿出我们的终极方案，使用我们的屏幕宽度；

总之，不能让它任性，我们一定要拿到一个合适的显示值。

可以看到这里或者最大宽度，我们用的反射，而不是getmaxwidth()；维萨呢，因为getmaxwidth竟然要api 16，我也是醉了；为了兼容性，我们采用反射的方案。反射的代码就不贴了。

b、设置合适的insamplesize

我们获得想要显示的大小，为了什么，还不是为了和图片的真正的宽高做比较，拿到一个合适的insamplesize，去对图片进行压缩么。

那么首先应该是拿到图片的宽和高：

// 获得图片的宽和高，并不把图片加载到内存中 
    bitmapfactory.options options = new bitmapfactory.options(); 
    options.injustdecodebounds = true; 
    bitmapfactory.decodefile(path, options); 

这三行就成功获取图片真正的宽和高了，存在我们的options里面；
然后我们就可以happy的去计算insamplesize了：

/** 
   * 根据需求的宽和高以及图片实际的宽和高计算samplesize 
   * 
   * @param options 
   * @param width 
   * @param height 
   * @return 
   */ 
  public static int caculateinsamplesize(options options, int reqwidth, 
      int reqheight) 
  { 
    int width = options.outwidth; 
    int height = options.outheight; 
 
    int insamplesize = 1; 
 
    if (width > reqwidth || height > reqheight) 
    { 
      int widthradio = math.round(width * 1.0f / reqwidth); 
      int heightradio = math.round(height * 1.0f / reqheight); 
 
      insamplesize = math.max(widthradio, heightradio); 
    } 
 
    return insamplesize; 
  } 

options里面存了实际的宽和高；reqwidth和reqheight就是我们之前得到的想要显示的大小；经过比较，得到一个合适的insamplesize;
有了insamplesize:

options.insamplesize = imagesizeutil.caculateinsamplesize(options, 
        width, height); 
 
    // 使用获得到的insamplesize再次解析图片 
    options.injustdecodebounds = false; 
    bitmap bitmap = bitmapfactory.decodefile(path, options); 
    return bitmap; 

经过这几行，就完成图片的压缩了。

上述是本地图片的压缩，那么如果是网络图片呢？

2、网络图片的压缩

a、直接下载存到sd卡，然后采用本地的压缩方案。这种方式当前是在硬盘缓存开启的情况下，如果没有开启呢？

b、使用bitmapfactory.decodestream(is, null, opts);

/** 
   * 根据url下载图片在指定的文件 
   * 
   * @param urlstr 
   * @param file 
   * @return 
   */ 
  public static bitmap downloadimgbyurl(string urlstr, imageview imageview) 
  { 
    fileoutputstream fos = null; 
    inputstream is = null; 
    try 
    { 
      url url = new url(urlstr); 
      httpurlconnection conn = (httpurlconnection) url.openconnection(); 
      is = new bufferedinputstream(conn.getinputstream()); 
      is.mark(is.available()); 
       
      options opts = new options(); 
      opts.injustdecodebounds = true; 
      bitmap bitmap = bitmapfactory.decodestream(is, null, opts); 
       
      //获取imageview想要显示的宽和高 
      imagesize imageviewsize = imagesizeutil.getimageviewsize(imageview); 
      opts.insamplesize = imagesizeutil.caculateinsamplesize(opts, 
          imageviewsize.width, imageviewsize.height); 
       
      opts.injustdecodebounds = false; 
      is.reset(); 
      bitmap = bitmapfactory.decodestream(is, null, opts); 
 
      conn.disconnect(); 
      return bitmap; 
 
    } catch (exception e) 
    { 
      e.printstacktrace(); 
    } finally 
    { 
      try 
      { 
        if (is != null) 
          is.close(); 
      } catch (ioexception e) 
      { 
      } 
 
      try 
      { 
        if (fos != null) 
          fos.close(); 
      } catch (ioexception e) 
      { 
      } 
    } 
 
    return null; 
 
  } 

基本和本地压缩差不多，也是两次取样，当然需要注意一点，我们的is进行了包装，以便可以进行reset()；直接返回的is是不能使用两次的。

到此，图片压缩说完了。

2、图片加载框架的架构

我们的图片压缩加载完了，那么就应该放入我们的lrucache，然后设置到我们的imageview上。

好了，接下来我们来说说我们的这个框架的架构；

1、单例，包含一个lrucache用于管理我们的图片；

2、任务队列，我们每来一次加载图片的请求，我们会封装成task存入我们的taskqueue;

3、包含一个后台线程，这个线程在第一次初始化实例的时候启动，然后会一直在后台运行；任务呢？还记得我们有个任务队列么，有队列存任务，得有人干活呀；所以，当每来一次加载图片请求的时候，我们同时发一个消息到后台线程，后台线程去使用线程池去taskqueue去取一个任务执行；

4、调度策略；3中说了，后台线程去taskqueue去取一个任务，这个任务不是随便取的，有策略可以选择，一个是fifo，一个是lifo，我倾向于后者。

好了，基本就这些结构，接下来看我们具体的实现。

3、具体的实现

1、构造方法

public static imageloader getinstance(int threadcount, type type) 
  { 
    if (minstance == null) 
    { 
      synchronized (imageloader.class) 
      { 
        if (minstance == null) 
        { 
          minstance = new imageloader(threadcount, type); 
        } 
      } 
    } 
    return minstance; 
  } 

这个就不用说了，重点看我们的构造方法

/** 
 * 图片加载类 
 * 
 * @author zhy 
 * 
 */ 
public class imageloader 
{ 
  private static imageloader minstance; 
 
  /** 
   * 图片缓存的核心对象 
   */ 
  private lrucache<string, bitmap> mlrucache; 
  /** 
   * 线程池 
   */ 
  private executorservice mthreadpool; 
  private static final int deafult_thread_count = 1; 
  /** 
   * 队列的调度方式 
   */ 
  private type mtype = type.lifo; 
  /** 
   * 任务队列 
   */ 
  private linkedlist<runnable> mtaskqueue; 
  /** 
   * 后台轮询线程 
   */ 
  private thread mpoolthread; 
  private handler mpoolthreadhandler; 
  /** 
   * ui线程中的handler 
   */ 
  private handler muihandler; 
 
  private semaphore msemaphorepoolthreadhandler = new semaphore(0); 
  private semaphore msemaphorethreadpool; 
 
  private boolean isdiskcacheenable = true; 
 
  private static final string tag = "imageloader"; 
 
  public enum type 
  { 
    fifo, lifo; 
  } 
 
  private imageloader(int threadcount, type type) 
  { 
    init(threadcount, type); 
  } 
 
  /** 
   * 初始化 
   * 
   * @param threadcount 
   * @param type 
   */ 
  private void init(int threadcount, type type) 
  { 
    initbackthread(); 
 
    // 获取我们应用的最大可用内存 
    int maxmemory = (int) runtime.getruntime().maxmemory(); 
    int cachememory = maxmemory / 8; 
    mlrucache = new lrucache<string, bitmap>(cachememory) 
    { 
      @override 
      protected int sizeof(string key, bitmap value) 
      { 
        return value.getrowbytes() * value.getheight(); 
      } 
 
    }; 
 
    // 创建线程池 
    mthreadpool = executors.newfixedthreadpool(threadcount); 
    mtaskqueue = new linkedlist<runnable>(); 
    mtype = type; 
    msemaphorethreadpool = new semaphore(threadcount); 
  } 
 
  /** 
   * 初始化后台轮询线程 
   */ 
  private void initbackthread() 
  { 
    // 后台轮询线程 
    mpoolthread = new thread() 
    { 
      @override 
      public void run() 
      { 
        looper.prepare(); 
        mpoolthreadhandler = new handler() 
        { 
          @override 
          public void handlemessage(message msg) 
          { 
            // 线程池去取出一个任务进行执行 
            mthreadpool.execute(gettask()); 
            try 
            { 
              msemaphorethreadpool.acquire(); 
            } catch (interruptedexception e) 
            { 
            } 
          } 
        }; 
        // 释放一个信号量 
        msemaphorepoolthreadhandler.release(); 
        looper.loop(); 
      }; 
    }; 
 
    mpoolthread.start(); 
  } 

在贴构造的时候，顺便贴出所有的成员变量；

在构造中我们调用init，init中可以设置后台加载图片线程数量和加载策略；init中首先初始化后台线程initbackthread(),可以看到这个后台线程，实际上是个looper最终在那不断的loop，我们还初始化了一个mpoolthreadhandler用于发送消息到此线程；

接下来就是初始化mlrucache  ， mthreadpool ，mtaskqueue 等；

2、loadimage

构造完成以后，当然是使用了，用户调用loadimage传入(final string path, final imageview imageview,final boolean isfromnet)就可以完成本地或者网络图片的加载。

/** 
   * 根据path为imageview设置图片 
   * 
   * @param path 
   * @param imageview 
   */ 
  public void loadimage(final string path, final imageview imageview, 
      final boolean isfromnet) 
  { 
    imageview.settag(path); 
    if (muihandler == null) 
    { 
      muihandler = new handler() 
      { 
        public void handlemessage(message msg) 
        { 
          // 获取得到图片，为imageview回调设置图片 
          imgbeanholder holder = (imgbeanholder) msg.obj; 
          bitmap bm = holder.bitmap; 
          imageview imageview = holder.imageview; 
          string path = holder.path; 
          // 将path与gettag存储路径进行比较 
          if (imageview.gettag().tostring().equals(path)) 
          { 
            imageview.setimagebitmap(bm); 
          } 
        }; 
      }; 
    } 
 
    // 根据path在缓存中获取bitmap 
    bitmap bm = getbitmapfromlrucache(path); 
 
    if (bm != null) 
    { 
      refreashbitmap(path, imageview, bm); 
    } else 
    { 
      addtask(buildtask(path, imageview, isfromnet)); 
    } 
 
  } 

首先我们为imageview.settag；然后初始化一个muihandler，不用猜，这个muihandler用户更新我们的imageview，因为这个方法肯定是主线程调用的。

然后调用：getbitmapfromlrucache(path);根据path在缓存中获取bitmap；如果找到那么直接去设置我们的图片；

private void refreashbitmap(final string path, final imageview imageview, 
      bitmap bm) 
  { 
    message message = message.obtain(); 
    imgbeanholder holder = new imgbeanholder(); 
    holder.bitmap = bm; 
    holder.path = path; 
    holder.imageview = imageview; 
    message.obj = holder; 
    muihandler.sendmessage(message); 
  } 

可以看到，如果找到图片，则直接使用uihandler去发送一个消息，当然了携带了一些必要的参数，然后uihandler的handlemessage中完成图片的设置；

handlemessage中拿到path,bitmap,imageview；记得必须要：

// 将path与gettag存储路径进行比较
   if (imageview.gettag().tostring().equals(path))
   {
   imageview.setimagebitmap(bm);
   }

否则会造成图片混乱。

如果没找到，则通过buildtask去新建一个任务，在addtask到任务队列。

buildtask就比较复杂了，因为还涉及到本地和网络，所以我们先看addtask代码：

private synchronized void addtask(runnable runnable) 
  { 
    mtaskqueue.add(runnable); 
    // if(mpoolthreadhandler==null)wait(); 
    try 
    { 
      if (mpoolthreadhandler == null) 
        msemaphorepoolthreadhandler.acquire(); 
    } catch (interruptedexception e) 
    { 
    } 
    mpoolthreadhandler.sendemptymessage(0x110); 
  } 

很简单，就是runnable加入taskqueue，与此同时使用mpoolthreadhandler（这个handler还记得么，用于和我们后台线程交互。）去发送一个消息给后台线程，叫它去取出一个任务执行；具体代码：

mpoolthreadhandler = new handler() 
        { 
          @override 
          public void handlemessage(message msg) 
          { 
            // 线程池去取出一个任务进行执行 
            mthreadpool.execute(gettask()); 

直接使用mthreadpool线程池，然后使用gettask去取一个任务。

/** 
   * 从任务队列取出一个方法 
   * 
   * @return 
   */ 
  private runnable gettask() 
  { 
    if (mtype == type.fifo) 
    { 
      return mtaskqueue.removefirst(); 
    } else if (mtype == type.lifo) 
    { 
      return mtaskqueue.removelast(); 
    } 
    return null; 
  } 

gettask代码也比较简单，就是根据type从任务队列头或者尾进行取任务。

现在你会不会好奇，任务里面到底什么代码？其实我们也就剩最后一段代码了buildtask

/** 
   * 根据传入的参数，新建一个任务 
   * 
   * @param path 
   * @param imageview 
   * @param isfromnet 
   * @return 
   */ 
  private runnable buildtask(final string path, final imageview imageview, 
      final boolean isfromnet) 
  { 
    return new runnable() 
    { 
      @override 
      public void run() 
      { 
        bitmap bm = null; 
        if (isfromnet) 
        { 
          file file = getdiskcachedir(imageview.getcontext(), 
              md5(path)); 
          if (file.exists())// 如果在缓存文件中发现 
          { 
            log.e(tag, "find image :" + path + " in disk cache ."); 
            bm = loadimagefromlocal(file.getabsolutepath(), 
                imageview); 
          } else 
          { 
            if (isdiskcacheenable)// 检测是否开启硬盘缓存 
            { 
              boolean downloadstate = downloadimgutils 
                  .downloadimgbyurl(path, file); 
              if (downloadstate)// 如果下载成功 
              { 
                log.e(tag, 
                    "download image :" + path 
                        + " to disk cache . path is " 
                        + file.getabsolutepath()); 
                bm = loadimagefromlocal(file.getabsolutepath(), 
                    imageview); 
              } 
            } else 
            // 直接从网络加载 
            { 
              log.e(tag, "load image :" + path + " to memory."); 
              bm = downloadimgutils.downloadimgbyurl(path, 
                  imageview); 
            } 
          } 
        } else 
        { 
          bm = loadimagefromlocal(path, imageview); 
        } 
        // 3、把图片加入到缓存 
        addbitmaptolrucache(path, bm); 
        refreashbitmap(path, imageview, bm); 
        msemaphorethreadpool.release(); 
      } 
 
       
    }; 
  } 
   
  private bitmap loadimagefromlocal(final string path, 
      final imageview imageview) 
  { 
    bitmap bm; 
    // 加载图片 
    // 图片的压缩 
    // 1、获得图片需要显示的大小 
    imagesize imagesize = imagesizeutil.getimageviewsize(imageview); 
    // 2、压缩图片 
    bm = decodesampledbitmapfrompath(path, imagesize.width, 
        imagesize.height); 
    return bm; 
  } 

我们新建任务，说明在内存中没有找到缓存的bitmap；我们的任务就是去根据path加载压缩后的bitmap返回即可，然后加入lrucache，设置回调显示。

首先我们判断是否是网络任务？

如果是，首先去硬盘缓存中找一下，（硬盘中文件名为：根据path生成的md5为名称）。

如果硬盘缓存中没有，那么去判断是否开启了硬盘缓存：

开启了的话：下载图片，使用loadimagefromlocal本地加载图片的方式进行加载（压缩的代码前面已经详细说过）；

如果没有开启：则直接从网络获取（压缩获取的代码，前面详细说过）；

如果不是网络图片：直接loadimagefromlocal本地加载图片的方式进行加载

经过上面，就获得了bitmap；然后加入addbitmaptolrucache，refreashbitmap回调显示图片。

/** 
   * 将图片加入lrucache 
   * 
   * @param path 
   * @param bm 
   */ 
  protected void addbitmaptolrucache(string path, bitmap bm) 
  { 
    if (getbitmapfromlrucache(path) == null) 
    { 
      if (bm != null) 
        mlrucache.put(path, bm); 
    } 
  } 

到此，我们所有的代码就分析完成了；

缓存的图片位置：在sd卡的android/data/项目packagename/cache中：

不过有些地方需要注意：就是在代码中，你会看到一些信号量的身影：

第一个：msemaphorepoolthreadhandler = new semaphore(0); 用于控制我们的mpoolthreadhandler的初始化完成，我们在使用mpoolthreadhandler会进行判空，如果为null，会通过msemaphorepoolthreadhandler.acquire()进行阻塞；当mpoolthreadhandler初始化结束，我们会调用.release();解除阻塞。

第二个：msemaphorethreadpool = new semaphore(threadcount);这个信号量的数量和我们加载图片的线程个数一致；每取一个任务去执行，我们会让信号量减一；每完成一个任务，会让信号量+1，再去取任务；目的是什么呢？为什么当我们的任务到来时，如果此时在没有空闲线程，任务则一直添加到taskqueue中，当线程完成任务，可以根据策略去taskqueue中去取任务，只有这样，我们的lifo才有意义。

到此，我们的图片加载框架就结束了，你可以尝试下加载本地，或者去加载网络大量的图片，拼一拼加载速度~~~

4、mainactivity

现在是使用的时刻~~

我在mainactivity中，我使用了fragment，下面我贴下fragment和布局文件的代码，具体的，大家自己看代码：

package com.example.demo_zhy_18_networkimageloader; 
import android.content.context; 
import android.os.bundle; 
import android.support.v4.app.fragment; 
import android.util.log; 
import android.view.layoutinflater; 
import android.view.view; 
import android.view.viewgroup; 
import android.widget.arrayadapter; 
import android.widget.gridview; 
import android.widget.imageview; 
 
import com.zhy.utils.imageloader; 
import com.zhy.utils.imageloader.type; 
import com.zhy.utils.images; 
 
public class listimgsfragment extends fragment 
{ 
  private gridview mgridview; 
  private string[] murlstrs = images.imagethumburls; 
  private imageloader mimageloader; 
 
  @override 
  public void oncreate(bundle savedinstancestate) 
  { 
    super.oncreate(savedinstancestate); 
    mimageloader = imageloader.getinstance(3, type.lifo); 
  } 
 
  @override 
  public view oncreateview(layoutinflater inflater, viewgroup container, 
      bundle savedinstancestate) 
  { 
    view view = inflater.inflate(r.layout.fragment_list_imgs, container, 
        false); 
    mgridview = (gridview) view.findviewbyid(r.id.id_gridview); 
    setupadapter(); 
    return view; 
  } 
 
  private void setupadapter() 
  { 
    if (getactivity() == null || mgridview == null) 
      return; 
 
    if (murlstrs != null) 
    { 
      mgridview.setadapter(new listimgitemadaper(getactivity(), 0, 
          murlstrs)); 
    } else 
    { 
      mgridview.setadapter(null); 
    } 
 
  } 
 
  private class listimgitemadaper extends arrayadapter<string> 
  { 
 
    public listimgitemadaper(context context, int resource, string[] datas) 
    { 
      super(getactivity(), 0, datas); 
      log.e("tag", "listimgitemadaper"); 
    } 
 
    @override 
    public view getview(int position, view convertview, viewgroup parent) 
    { 
      if (convertview == null) 
      { 
        convertview = getactivity().getlayoutinflater().inflate( 
            r.layout.item_fragment_list_imgs, parent, false); 
      } 
      imageview imageview = (imageview) convertview 
          .findviewbyid(r.id.id_img); 
      imageview.setimageresource(r.drawable.pictures_no); 
      mimageloader.loadimage(getitem(position), imageview, true); 
      return convertview; 
    } 
 
  } 
 
} 

可以看到我们在getview中，使用mimageloader.loadimage一行即完成了图片的加载。

fragment_list_imgs.xml

<gridview xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:tools="http://schemas.android.com/tools" 
  android:id="@+id/id_gridview" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:horizontalspacing="3dp" 
  android:verticalspacing="3dp" 
  android:numcolumns="3" 
  > 
 
</gridview> 
item_fragment_list_imgs.xml

<imageview xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:tools="http://schemas.android.com/tools" 
  android:id="@+id/id_img" 
  android:layout_width="match_parent" 
  android:layout_height="120dp" 
  android:scaletype="centercrop" > 
 
</imageview> 

好了，到此结束~~~有任何bug或者意见欢迎留言~

demo下载：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。