Android开发之搜芽项目的图片载入问题(使用Volley进行网络图片载入)

搜芽的移动开发这几天进度相对来说很的快。

可是美中不足的就是网络图片的载入问题。

我有两套方案：

1）沿用迅雷动漫的图片载入。迅雷动漫也是用的一个开源的库。可是不知道是我使用出了问题还是真的是它的问题。

在我迅速的下拉和回倒的时候。

不确定的会出现崩溃。

logcat显示loadImage里面出现了内存溢出.out of memory.。这个我想应该不是我的问题。

2）採用外包的AsyncImageLoader。这个文件我没有细致看。

然后实验结果是，载入图片巨慢。并且easy导致卡顿。

所以，我将希望转向了universal-image-loader和volley。

听说volley还封装了异步http。

并且是google公司的，所以。我选择了volley

一篇值得观赏的文章是：http://blog.csdn.net/sun1021976312/article/details/24672707

说真的。

本文的理论部分，也是转自它。

我们在后面进行封装，然后使用然后展示效果。

Volley是将AsyncHttpClient和Universal-Image-Loader的长处集成于一身的一个框架。我们都知道。Universal-Image-Loader具备很强大的载入网络图片的功能。而使用Volley，我们也能够实现基本类似的效果，而且在性能上也豪不逊色于Universal-Image-Loader，以下我们就来详细学习一下吧。

1. ImageRequest的使用方法

前面我们已经学习过了StringRequest和JsonRequest的使用方法，而且总结出了它们的使用方法都是很类似的。基本就是进行下面三步操作就可以：

1. 创建一个RequestQueue对象。

2. 创建一个Request对象。

3. 将Request对象加入到RequestQueue里面。

当中，StringRequest和JsonRequest都是继承自Request的。所以它们的使用方法才会如此类似。那么不用多说，今天我们要学习的ImageRequest，相信你从名字上就已经猜出来了，它也是继承自Request的，因此它的使用方法也是基本同样的。首先须要获取到一个RequestQueue对象。能够调用例如以下方法获取到：

[java] view
plaincopy

1. RequestQueue mQueue = Volley.newRequestQueue(context);

接下来自然要去new出一个ImageRequest对象了，代码例如以下所看到的：

[java] view
plaincopy

1. ImageRequest imageRequest = new ImageRequest(
2. "http://developer.android.com/images/home/aw_dac.png",
3. new Response.Listener<Bitmap>() {
4. @Override
5. public void onResponse(Bitmap response) {
6. imageView.setImageBitmap(response);
7. }
8. }, 0, 0, Config.RGB_565, new Response.ErrorListener() {
9. @Override
10. public void onErrorResponse(VolleyError error) {
11. imageView.setImageResource(R.drawable.default_image);
12. }
13. });

能够看到。ImageRequest的构造函数接收六个參数。第一个參数就是图片的URL地址，这个没什么须要解释的。第二个參数是图片请求成功的回调，这里我们把返回的Bitmap參数设置到ImageView中。第三第四个參数分别用于指定同意图片最大的宽度和高度，假设指定的网络图片的宽度或高度大于这里的最大值，则会对图片进行压缩，指定成0的话就表示无论图片有多大，都不会进行压缩。第五个參数用于指定图片的颜色属性。Bitmap.Config下的几个常量都能够在这里使用，当中ARGB_8888能够展示最好的颜色属性，每一个图片像素占领4个字节的大小，而RGB_565则表示每一个图片像素占领2个字节大小。第六个參数是图片请求失败的回调，这里我们当请求失败时在ImageView中显示一张默认图片。

最后将这个ImageRequest对象加入到RequestQueue里就能够了，例如以下所看到的：

[java] view
plaincopy

1. mQueue.add(imageRequest);

如今假设执行一下程序，并尝试发出这样一条网络请求，非常快就能看到网络上的图片在ImageView中显示出来了，例如以下图所看到的：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3VvbGluX2Jsb2c=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" style="border:none; max-width:100%">

2. ImageLoader的使用方法

假设你认为ImageRequest已经非常好用了，那我仅仅能说你太easy满足了 ^_^。

实际上，Volley在请求网络图片方面能够做到的还远远不止这些，而ImageLoader就是一个非常好的样例。ImageLoader也能够用于载入网络上的图片，而且它的内部也是使用ImageRequest来实现的，只是ImageLoader明显要比ImageRequest更加高效，由于它不仅能够帮我们对图片进行缓存，还能够过滤掉反复的链接。避免反复发送请求。

因为ImageLoader已经不是继承自Request的了，所以它的使用方法也和我们之前学到的内容有所不同，总结起来大致能够分为下面四步：

1. 创建一个RequestQueue对象。

2. 创建一个ImageLoader对象。

3. 获取一个ImageListener对象。

4. 调用ImageLoader的get()方法载入网络上的图片。

以下我们就来依照这个步骤，学习一下ImageLoader的使用方法吧。首先第一步的创建RequestQueue对象我们已经写过非常多遍了，相信已经不用再反复介绍了。那么就从第二步開始学习吧，新建一个ImageLoader对象。代码例如以下所看到的：

[java] view
plaincopy

1. ImageLoader imageLoader = new ImageLoader(mQueue, new ImageCache() {
2. @Override
3. public void putBitmap(String url, Bitmap bitmap) {
4. }
5. @Override
6. public Bitmap getBitmap(String url) {
7. return null;
8. }
9. });

能够看到，ImageLoader的构造函数接收两个參数。第一个參数就是RequestQueue对象，第二个參数是一个ImageCache对象，这里我们先new出一个空的ImageCache的实现就可以。

接下来须要获取一个ImageListener对象，代码例如以下所看到的：

[java] view
plaincopy

1. ImageListener listener = ImageLoader.getImageListener(imageView,
2. R.drawable.default_image, R.drawable.failed_image);

我们通过调用ImageLoader的getImageListener()方法可以获取到一个ImageListener对象，getImageListener()方法接收三个參数，第一个參数指定用于显示图片的ImageView控件，第二个參数指定载入图片的过程中显示的图片，第三个參数指定载入图片失败的情况下显示的图片。

最后。调用ImageLoader的get()方法来载入图片，代码例如以下所看到的：

[java] view
plaincopy

1. imageLoader.get("http://img.my.csdn.net/uploads/201404/13/1397393290_5765.jpeg", listener);

get()方法接收两个參数。第一个參数就是图片的URL地址，第二个參数则是刚刚获取到的ImageListener对象。

当然，假设你想对图片的大小进行限制，也能够使用get()方法的重载，指定图片同意的最大宽度和高度，例如以下所看到的：

[java] view
plaincopy

1. imageLoader.get("http://img.my.csdn.net/uploads/201404/13/1397393290_5765.jpeg",
2. listener, 200, 200);

如今执行一下程序并開始载入图片，你将看到ImageView中会先显示一张默认的图片，等到网络上的图片载入完毕后。ImageView则会自己主动显示该图，效果例如以下图所看到的。

尽管如今我们已经掌握了ImageLoader的使用方法，可是刚才介绍的ImageLoader的长处却还没有使用到。为什么呢？由于这里创建的ImageCache对象是一个空的实现，全然没能起到图片缓存的作用。事实上写一个ImageCache也很easy，可是假设想要写一个性能很好的ImageCache。最好就要借助Android提供的LruCache功能了，假设你对LruCache还不了解。能够參考我之前的一篇博客Android高效载入大图、多图解决方式，有效避免程序OOM。

这里我们新建一个BitmapCache并实现了ImageCache接口，例如以下所看到的：

[java] view
plaincopy

1. public class BitmapCache implements ImageCache {
2. private LruCache<String, Bitmap> mCache;
3. public BitmapCache() {
4. int maxSize = 10 * 1024 * 1024;
5. mCache = new LruCache<String, Bitmap>(maxSize) {
6. @Override
7. protected int sizeOf(String key, Bitmap bitmap) {
8. return bitmap.getRowBytes() * bitmap.getHeight();
9. }
10. };
11. }
12. @Override
13. public Bitmap getBitmap(String url) {
14. return mCache.get(url);
15. }
16. @Override
17. public void putBitmap(String url, Bitmap bitmap) {
18. mCache.put(url, bitmap);
19. }
20. }

能够看到，这里我们将缓存图片的大小设置为10M。接着改动创建ImageLoader实例的代码。第二个參数传入BitmapCache的实例，例如以下所看到的：

[java] view
plaincopy

1. ImageLoader imageLoader = new ImageLoader(mQueue, new BitmapCache());

这样我们就把ImageLoader的功能优势充分利用起来了。

3. NetworkImageView的使用方法

除了以上两种方式之外，Volley还提供了第三种方式来载入网络图片。即使用NetworkImageView。不同于以上两种方式，NetworkImageView是一个自己定义控制。它是继承自ImageView的，具备ImageView控件的全部功能，而且在原生的基础之上增加了载入网络图片的功能。NetworkImageView控件的使用方法要比前两种方式更加简单，大致能够分为下面五步：

1. 创建一个RequestQueue对象。

2. 创建一个ImageLoader对象。

3. 在布局文件里加入一个NetworkImageView控件。

4. 在代码中获取该控件的实例。

5. 设置要载入的图片地址。

当中，第一第二步和ImageLoader的使用方法是全然一样的，因此这里我们就从第三步開始学习了。首先改动布局文件里的代码。在里面增加NetworkImageView控件，例如以下所看到的：

[html] view
plaincopy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. android:layout_width="fill_parent"
3. android:layout_height="fill_parent"
4. android:orientation="vertical" >
5. <Button
6. android:id="@+id/button"
7. android:layout_width="wrap_content"
8. android:layout_height="wrap_content"
9. android:text="Send Request" />
10. <com.android.volley.toolbox.NetworkImageView
11. android:id="@+id/network_image_view"
12. android:layout_width="200dp"
13. android:layout_height="200dp"
14. android:layout_gravity="center_horizontal"
15. />
16. </LinearLayout>

接着在Activity获取到这个控件的实例，这就很easy了，代码例如以下所看到的：

[java] view
plaincopy

1. networkImageView = (NetworkImageView) findViewById(R.id.network_image_view);

得到了NetworkImageView控件的实例之后，我们能够调用它的setDefaultImageResId()方法、setErrorImageResId()方法和setImageUrl()方法来分别设置载入中显示的图片。载入失败时显示的图片，以及目标图片的URL地址，例如以下所看到的：

[java] view
plaincopy

1. networkImageView.setDefaultImageResId(R.drawable.default_image);
2. networkImageView.setErrorImageResId(R.drawable.failed_image);
3. networkImageView.setImageUrl("http://img.my.csdn.net/uploads/201404/13/1397393290_5765.jpeg",
4. imageLoader);

当中，setImageUrl()方法接收两个參数，第一个參数用于指定图片的URL地址，第二个參数则是前面创建好的ImageLoader对象。

好了，就是这么简单，如今又一次执行一下程序，你将看到和使用ImageLoader来载入图片一模一样的效果，这里我就不再截图了。

这时有的朋友可能就会问了，使用ImageRequest和ImageLoader这两种方式来载入网络图片。都能够传入一个最大宽度和高度的參数来对图片进行压缩。而NetworkImageView中则全然没有提供设置最大宽度和高度的方法，那么是不是使用NetworkImageView来载入的图片都不会进行压缩呢？

事实上并非这种，NetworkImageView并不须要提供不论什么设置最大宽高的方法也可以对载入的图片进行压缩。这是因为NetworkImageView是一个控件，在载入图片的时候它会自己主动获取自身的宽高，然后对照网络图片的宽度，再决定是否须要对图片进行压缩。

也就是说，压缩过程是在内部全然自己主动化的，并不须要我们关心，NetworkImageView会始终呈现给我们一张大小刚刚好的网络图片，不会多占用不论什么一点内存，这也是NetworkImageView最简单好用的一点吧。

当然了，假设你不想对图片进行压缩的话。事实上也非常easy。仅仅须要在布局文件里把NetworkImageView的layout_width和layout_height都设置成wrap_content就能够了，这样NetworkImageView就会将该图片的原始大小展示出来。不会进行不论什么压缩。

实战：

首先我们要有布局用到NetworkImageView

<?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:id="@+id/category_contaner"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/xinfan_grid_bg" >

    <RelativeLayout
        android:id="@+id/category_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true" >

        <com.android.volley.toolbox.NetworkImageView
            android:id="@+id/poster"
            android:layout_width="match_parent"
            android:layout_height="@dimen/category_grid_item_height"
            android:contentDescription="@string/app_name"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/tv_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/poster"
            android:layout_centerHorizontal="true"
            android:paddingBottom="@dimen/category_item_label_lr_margin"
            android:paddingTop="@dimen/category_item_label_lr_margin"
            android:textColor="#555555"
            android:textSize="@dimen/category_item_label_font_size" />
    </RelativeLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/category_frame"
        android:layout_alignLeft="@id/category_frame"
        android:layout_alignRight="@id/category_frame"
        android:layout_alignTop="@id/category_frame"
        android:background="@drawable/poster_nofade_selector"
        android:contentDescription="@string/app_name" >
    </ImageView>

    <TextView
        android:id="@+id/tv_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="所有"
        android:textColor="@color/action_bar_title"
        android:textSize="@dimen/category_center_font_size"
        android:visibility="gone" />

</RelativeLayout>

然后因为NetworkImageView须要ImageLoader。

所以我们封装了一下它对Volley的依赖。

 package com.souya.seller.util.ex;

import android.content.Context;
import android.graphics.Bitmap;
import android.support.v4.util.LruCache;

import com.android.volley.RequestQueue;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.ImageLoader.ImageCache;
import com.android.volley.toolbox.Volley;
import com.souya.seller.app.SellerApplication;

public class VolleyImage {
	private static final String TAG = "Volley";
	private static RequestQueue mReuestQueue;
	private static ImageLoader mImageLoader;
	private static Context mContext;
	private static BitmapCache mBitmapCache;
	static {
		mContext = SellerApplication.getInstance();
		mReuestQueue = Volley.newRequestQueue(mContext);
		mBitmapCache = BitmapCache.getInstance();
		mImageLoader = new ImageLoader(mReuestQueue, mBitmapCache);
	}

	// private static VolleyImage mInstance = null;
	public VolleyImage() {
	}
	// public static VolleyImage getInstance(){
	// return new VolleyImage();
	// }
	public static ImageLoader getImageLoader(){
		return mImageLoader;
	}

}

class BitmapCache implements ImageCache {
	private LruCache<String, Bitmap> mCache;

	public BitmapCache() {
		int maxSize = 50 * 1024 * 1024;
		mCache = new LruCache<String, Bitmap>(maxSize) {

			@Override
			protected int sizeOf(String key, Bitmap bitmap) {
				return bitmap.getRowBytes() * bitmap.getHeight();
			}

		};
	}

	public static BitmapCache getInstance() {
		return new BitmapCache();
	}

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

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

}

最后是使用

holder.mPoster = (NetworkImageView) convertView.findViewById(R.id.poster);

		public void populateViews(MCloth cloth, ImageFetcher fetcher) {
			mLabel.setVisibility(View.VISIBLE);
			mLabel.setText(cloth.title);
			mCenterView.setVisibility(View.INVISIBLE);

			if (!TextUtils.isEmpty(cloth.imgUrl)) {
				//fetcher.loadImage(SOUYA_SERVER_URL + cloth.imgUrl, mPoster);
				mPoster.setImageUrl(WEBInterface.GetFullUrl(cloth.imgUrl), VolleyImage.getImageLoader());
			}

		}

效果：

非常的流畅，没有卡顿。

载入速度非常快。

贴图