Volley框架使用之请求大量图片

最新推荐文章于 2017-10-25 13:53:47 发布

置顶 yuanzeyao

最新推荐文章于 2017-10-25 13:53:47 发布

阅读量6.3k

点赞数 3

分类专栏： Android

本文链接：https://blog.csdn.net/yuanzeyao/article/details/26142025

版权

Android 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

尊重原创 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等控件显示大量图片时，如果对缓存处理不当，是非常容易出现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);
    }
  }

}

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