Volley该框架使用了大量的请求图片

尊重原创 http://write.blog.csdn.net/postedit/26142025

代码下载：http://download.csdn.net/detail/yuanzeyao2008/7363999

假设你希望了解Volley框架的原理，欢迎阅读

volley源代码框架浅析(一)

volley源代码框架浅析(二)

volley源代码框架浅析(三)

前面已经说过，Volley框架能够用来请求String,XML,Json,Image以及一些自己定义的类型，这篇文章主要解说使用Volley请求大量图片。并使用GridView展示出来。这个功能在非常多应用中都会用到，如PPS等类型的播放器，淘宝等等。

像这类应用无非就是要解决一下问题：

1、避免OOM,在使用GridView等控件显示大量图片时，假设对缓存处理不当，是很easy出现OOM的。
2、GridView错位显示，比方GridView中的某个ImageView等待某一个图片（没有返回）。然而你此时又滑动了GridView,那么此时的GridView中的ImageView须要的是另外一张图片，假设你之前的图片已经返回回来是不能显示出来的。
把这两个问题攻克了，此类问题也就差点儿相同了，剩下的就是效率问题了，这点Volley已经处理好了，我们须要处理的就是以上两点

1、解决OOM
我就顺便讲解说决OOM的经常使用策略吧
OOM出现的情况可能是显示的图片非常大可是数量不是非常多。也有可能是显示的图片非常多可是图片不是非常大，我们先看第一种情况
http://developer.android.com/training/displaying-bitmaps/load-bitmap.html
我们直接看官网怎么处理这个问题。我翻译了一下


对于某些图片。分辨率往往比我们须要的高，比方我们使用Galley控件展示我们使用手机拍摄的照片时，这些照片的分辨率都比我们的屏幕分辨率高，所以在显示的时候我们应该减少这些图片的分辨率，由于此时高分辨率的图片在视觉上不会给我们带来不论什么区别。反而会占用我们移动设备的珍贵内存。以下我们就学习怎样将高分辨率的图片减少它的分辨率

BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds = true;
BitmapFactory.decodeResource(getResources(), R.id.myimage, options);
int imageHeight = options.outHeight;
int imageWidth = options.outWidth;
String imageType = options.outMimeType;

我们在使用BitmapFactory读取图片数据的时候，假设我们把options.inJustDecodeBounds设置为true,那么BitmapFactory仅仅会读取图片的高度和宽度等信息。不会将图片数据读入内存

options另一个属性options.inSampleSize,BitmapFactory在解析图片数据的时候，会将图片的宽度和高度变为原来的1/inSampleSize,这样图片大大小就会变为1/(inSampleSize*inSampleSize),比方inSampleSize=2 那么图片大小会变为原来的1/4
那么inSampleSize这个值怎么获取呢。通过下面算法就可以

/**
	optiosns 就是上面我得到的options
	reqWidth 就是我们须要图片的宽度
	reqHeight 就是我们须要图片的高度
*/
public static int calculateInSampleSize(
            BitmapFactory.Options options, int reqWidth, int reqHeight) {
    // Raw height and width of image
    final int height = options.outHeight;
    final int width = options.outWidth;
    int inSampleSize = 1;

    if (height > reqHeight || width > reqWidth) {

        final int halfHeight = height / 2;
        final int halfWidth = width / 2;

        // Calculate the largest inSampleSize value that is a power of 2 and keeps both
        // height and width larger than the requested height and width.
        while ((halfHeight / inSampleSize) > reqHeight
                && (halfWidth / inSampleSize) > reqWidth) {
            inSampleSize *= 2;
        }
    }

    return inSampleSize;
}

解析图片至须要的宽度和高度

public static Bitmap decodeSampledBitmapFromResource(Resources res, int resId,
        int reqWidth, int reqHeight) {

    // First decode with inJustDecodeBounds=true to check dimensions
    final BitmapFactory.Options options = new BitmapFactory.Options();
	//首先将这个值设置为true, 所以仅仅会获取高度和宽度
    options.inJustDecodeBounds = true;
    BitmapFactory.decodeResource(res, resId, options);

    // 依据须要的宽度和高度  图片的实际高度和宽度  计算缩小比例
    options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight);

    // 然后将该值设置为false,真正解析图片
    options.inJustDecodeBounds = false;
    return BitmapFactory.decodeResource(res, resId, options);
}

通过以上的步骤遍能够将图片缩小至某一大小，从而避免OOM


再来讲讲另外一种OOM，这样的OOM是由于有太多的图片，所以解决方式就是使用内存缓存和磁盘缓存
在Andorid中有两个类
LruCache和DiskLruCache这个两个类分别相应内存缓存和磁盘缓存
详细使用见
http://developer.android.com/training/displaying-bitmaps/cache-bitmap.html
到此为止OOM的问题就攻克了。以下看看错位问题
方案一：
对于每个请求的URL就设置到ImageView的tag中如imageView.setTag(url).当某一个请求成功返回一张图片时，推断ImageView的tag是否是当前请求的url
假设是的。那么就显示出来。并增加缓存。假设不是的，那么只增加缓存
方案二：
一旦GridView滑动。那么取消全部的请求，当GridView停止时。里面開始请求能够看见的ImageView须要的图片，今天的样例我就是使用另外一种方案，须要设置OnScrollListener

好了 我们如今開始写代码吧

先总结一下Volley框架的使用步骤吧
(1) 初始化RequestQueue 
(2) 创建自己的Request
(3) 将Request增加到RequestQueue中。
可是对于图片的请求步骤略微有点不同，图片的请求涉及到ImageLoader实现的，事实上ImageLoader也是通过以上三步实现图片请求的
以下我就在Appliaction中初始化Volley使用的环境吧

public class VolleyApplication extends Application 
{
  private static final String TAG = "VolleyApplication";
  //请求队列
  private RequestQueue mRequestQueue;
  private static  VolleyApplication instance;
  //用于图片请求
  private ImageLoader mImageLoader;
  //使用单例模式
  public static VolleyApplication getInstance()
  {
    return instance;
  }
  
  public RequestQueue getRequestQueue()
  {
    return mRequestQueue;
  }
  
  public ImageLoader getImageLoader()
  {
    return mImageLoader;
  }
  @Override
  public void onCreate() 
  {
    super.onCreate();
	//初始化内存缓存文件夹
    File cacheDir = new File(this.getCacheDir(), "volley");
	/**
	初始化RequestQueue,事实上这里你能够使用Volley.newRequestQueue来创建一个RequestQueue,直接使用构造函数能够定制我们须要的RequestQueue,比方线程池的大小等等
	*/
    mRequestQueue=new RequestQueue(new DiskBasedCache(cacheDir), new BasicNetwork(new HurlStack()), 3);
    
    instance=this;
    
	//初始化图片内存缓存
    MemoryCache mCache=new MemoryCache();
	//初始化ImageLoader
    mImageLoader =new ImageLoader(mRequestQueue,mCache);
	//假设调用Volley.newRequestQueue,那么以下这句能够不用调用
    mRequestQueue.start();
  }
}

使用LrcCache实现的一个图片缓存，这个基本上能够通用

public class MemoryCache implements ImageCache 
{
  private static final String TAG = "MemoryCache";
  private LruCache<String, Bitmap> mCache;
  
  public MemoryCache()
  {
	//这个取单个应用最大使用内存的1/8
    int maxSize=(int)Runtime.getRuntime().maxMemory()/8;
    mCache=new LruCache<String, Bitmap>(maxSize){
      @Override
      protected int sizeOf(String key, Bitmap value) {
	  //这种方法一定要重写，不然缓存没有效果
        return value.getHeight()*value.getRowBytes();
      }
    };
  }

  @Override
  public Bitmap getBitmap(String key) {
    return mCache.get(key);
  }

  @Override
  public void putBitmap(String key, Bitmap value) {
    mCache.put(key, value);
  }
}

那么開始写代码吧

(1) 首先给出Activity的布局吧

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
     <GridView   
        android:id="@+id/grid_image"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:columnWidth="128dip"  
        android:stretchMode="columnWidth"  
        android:numColumns="2"  
        android:verticalSpacing="1dip"  
        android:horizontalSpacing="1dip"
        android:gravity="center"  
        ></GridView> 
</LinearLayout>

(2) 然后每一个Item的布局

<?
xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content" >  
  
    <ImageView   
        android:id="@+id/photo"  
        android:layout_width="128dip"  
        android:layout_height="128dip"  
        android:src="@drawable/empty_photo"  
        android:layout_centerInParent="true"  
        />  
  
</RelativeLayout>

(3) Activity代码

public class ImageActivity extends Activity 
{
  private static final String TAG = "ImageActivity";
  private GridView mGridView;
  private ImageAdapter adapter;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.setContentView(R.layout.imagelayout);
    initViews();
  }
  
  private void initViews()
  {
    Log.i(TAG,"initViews");
    mGridView=(GridView)this.findViewById(R.id.grid_image);
    adapter=new ImageAdapter(this,mGridView);
    mGridView.setAdapter(adapter);
    
  }
}

(4) 最重要部分代码

public class ImageAdapter extends BaseAdapter implements OnScrollListener
{
  private static final String TAG = "ImageAdapter";
  private Context context;
  private String[] items=Images.imageThumbUrls;
  private GridView mGridView;
  
  /**
   * 标识是否是第一次运行，假设是第一次运行 onScrollStateChanged是不调用的
   */
  private boolean isFirstEnter;
  /**
   * 第一个能够看见的item
   */
  private int firstSeeItem;
  
  /**
   * 记录上一次能够看见的第一个,由于假设已经到顶部。向下滑动GridView也会运行onScrollStateChanged 所以第一个能够见的没有变化，那么就不运行
   */
  private int orifirstItem;
  /**
   * 能够看见item的总数
   */
  private int totalSeeItem;
  
  public ImageAdapter(Context context,GridView mGridView)
  {
    this.context=context;
    this.mGridView=mGridView;
    //注冊这个是为了在滑动的时候停止下载图片，不然非常卡
    mGridView.setOnScrollListener(this);
    isFirstEnter=true;
  }

  @Override
  public int getCount() {
    return items.length;
  }

  @Override
  public Object getItem(int position) {
    return items[position];
  }

  @Override
  public long getItemId(int position) {
    return position;
  }

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    Log.v(TAG, "imagedown--->getView");
    ImageView imgView=null;
    if(convertView==null)
    {
      convertView=LayoutInflater.from(context).inflate(R.layout.imageitems, null);
    }
    imgView=(ImageView)convertView.findViewById(R.id.photo);
    imgView.setImageResource(R.drawable.empty_photo);
    //通过GridView的findViewByTag方法找到该View,防止错位发生
    imgView.setTag(items[position]);
    
    return convertView;
  }

  @Override
  public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) 
  {
    Log.v(TAG, "imagedown--->onScroll");
    firstSeeItem=firstVisibleItem;
    totalSeeItem=visibleItemCount;
    
    if(isFirstEnter && visibleItemCount>0)
    {
      orifirstItem=firstVisibleItem;
      startLoadImages(firstSeeItem,totalSeeItem);
      isFirstEnter=false;
    }
  }

  @Override
  public void onScrollStateChanged(AbsListView view, int scrollState) 
  {
    Log.v(TAG, "imagedown--->onScrollStateChanged");
    if(orifirstItem!=firstSeeItem)
    {
      if(scrollState==SCROLL_STATE_IDLE)
      {
        startLoadImages(firstSeeItem,totalSeeItem);
        orifirstItem=firstSeeItem;
      }else
      {
        ImageUtils.cancelAllImageRequests();
      }
    }
   
    
  }
  /**
  開始下载图片
  first就是第一个能够看见的position
  total就是能够看见个Item个数
  */
  private void startLoadImages(int first,int total)
  {
    Log.v(TAG, "imagedown--->startLoadImages,first-->"+first+",total-->"+total);
    for(int i=first;i<first+total;i++)
    {
      ImageUtils.loadImage(items[i], mGridView);
    }
  }
}

(5) 请求图片工具类

public class ImageUtils
{
  private static final String TAG = "ImageUtils";
  
  public static void loadImage(final String url,final GridView mGridView)
  {
      
      ImageLoader imageLoader=VolleyApplication.getInstance().getImageLoader();
      ImageListener listener=new ImageListener() {
        ImageView tmpImg=(ImageView)mGridView.findViewWithTag(url);
        @Override
        public void onErrorResponse(VolleyError arg0) {
          //假设出错。则说明都不显示（简单处理），最好准备一张出错图片
          tmpImg.setImageBitmap(null);
        }
        
        @Override
        public void onResponse(ImageContainer container, boolean arg1) {
          
          if(container!=null)
          {
             tmpImg=(ImageView)mGridView.findViewWithTag(url);
            if(tmpImg!=null)
            {
              if(container.getBitmap()==null)
              {
                tmpImg.setImageResource(R.drawable.empty_photo);
              }else
              {
                tmpImg.setImageBitmap(container.getBitmap());
              }
            }
          }
        }
      };
      ImageContainer newContainer=imageLoader.get(url, listener,128,128);
  }
  
  /**
   *  取消图片请求
   */
  public static void cancelAllImageRequests() {
    ImageLoader imageLoader = VolleyApplication.getInstance().getImageLoader();
    RequestQueue requestQueue =   VolleyApplication.getInstance().getRequestQueue();
    if(imageLoader != null && requestQueue!=null){
      int num = requestQueue.getSequenceNumber();
	  //这种方法是我自己写的，Volley里面是没有的。所以仅仅能使用我给的Volley.jar才有这个函数
      imageLoader.drain(num);
    }
  }

}

好了 今天就写到这里吧，有什么问题欢迎留言讨论。代码在前面已经提供下载了。。

。