Android Volley框架（二）：ImageRequest、ImageLoader、NetworkImageView

Volley加载图片可以通过三种方式：ImageRequest、ImageLoader、NetworkImageView

直接上代码，使用说明见注释：

第一步 搭建环境

下载jar包，新建工程，导入volley.jar

第二步 AndroidManifest.xml 文件

打开网络权限  (<uses-permission android:name="android.permission.INTERNET" />)

引入MyApplication  (android:name="com.example.volleyfrademo.MyApplication")

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.volleyfrademo"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="21" />
    
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" 
        android:name="com.example.volleyfrademo.MyApplication">
        <activity
            android:name=".<span style="font-family: Arial;">MainActivity</span>"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

第三步 MyApplication.java 文件

package com.example.volleyfrademo;

import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.VolleyLog;
import com.android.volley.toolbox.Volley;

import android.app.Application;
import android.text.TextUtils;

public class MyApplication extends Application {

	public static final String TAG = "MyApplication";
	private RequestQueue queues;
	private static MyApplication instance;
	
	@Override
	public void onCreate() {
		super.onCreate();
		instance = this;
	}
	
	public static synchronized MyApplication getInstance() {
        return instance;
    }
	
	public RequestQueue getRequestQueue(){
		if (queues == null) {
			queues = Volley.newRequestQueue(getApplicationContext());
        }
		return queues;
	}
	
	public <T> void addToRequestQueue(Request<T> req, String tag) {
        req.setTag(TextUtils.isEmpty(tag) ? TAG : tag);
        VolleyLog.d("Adding request to queue: %s", req.getUrl());
        getRequestQueue().add(req);
	}
	
	public <T> void addToRequestQueue(Request<T> req) {
        req.setTag(TAG);
        getRequestQueue().add(req);
    }
	
	public void cancelPendingRequests(Object tag) {
        if (queues != null) {
        	queues.cancelAll(tag);
        }
    }
}

第四步 activity_image.xml 文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.volleyfrademo.MainActivity" >

    <ImageView
        android:id="@+id/img_resp1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    
    <com.android.volley.toolbox.NetworkImageView   
        android:id="@+id/network_image_view"  
        android:layout_width="400dp"  
        android:layout_height="wrap_content"  
        android:layout_gravity="center_horizontal" />
    
    <Button
        android:id="@+id/btn_imagerequest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="通过ImageRequest加载图片" />
    
    <Button
        android:id="@+id/btn_imageloader"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="通过ImageLoader加载图片,无缓存" />
    
    <Button
        android:id="@+id/btn_imageloader2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="通过ImageLoader加载图片,有缓存" />
    
    <Button
        android:id="@+id/btn_networkimageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="通过NetworkImageView加载图片，无缓存" />
    
    <Button
        android:id="@+id/btn_networkimageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="通过NetworkImageView加载图片,有缓存" />
    
</LinearLayout>

第五步 ImageActivity.java文件

package com.example.volleyfrademo;

import com.android.volley.VolleyError;
import com.android.volley.Response.ErrorListener;
import com.android.volley.Response.Listener;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.ImageRequest;
import com.android.volley.toolbox.NetworkImageView;
import com.android.volley.toolbox.ImageLoader.ImageCache;
import com.android.volley.toolbox.ImageLoader.ImageListener;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

public class ImageActivity extends Activity implements OnClickListener{

	private ImageView img_resp1;
	private NetworkImageView networkImageView;
	private Button btn_imagerequest, btn_imageloader, btn_imageloader2, btn_networkimageView, btn_networkimageView2;
	
	private String urlImageRequest = "http://p2.so.qhimg.com/t01258fd340b7d71ab7.gif";
	private String urlImageLoader = "http://img2.auyou.cn/grgl/hypic/200804/20084111205833137.jpg";
	private String urlImageLoader2 = "http://img.qzone.la/uploads/allimg/111103/1-111103025922-50.jpg";
	private String urlNetworkImageView = "http://att.bbs.duowan.com/forum/201309/07/160720kwxxsqlla4wjaxzs.jpg";
	private String urlNetworkImageView2 = "http://img4.duitang.com/uploads/item/201404/19/20140419172144_AGZNk.thumb.224_0.jpeg";
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_image);
		initView();
		setEvent();
	}

	private void initView() {
		img_resp1 = (ImageView) findViewById(R.id.img_resp1);
		networkImageView = (NetworkImageView) findViewById(R.id.network_image_view);
		btn_imagerequest = (Button) findViewById(R.id.btn_imagerequest);
		btn_imageloader = (Button) findViewById(R.id.btn_imageloader);
		btn_imageloader2 = (Button) findViewById(R.id.btn_imageloader2);
		btn_networkimageView = (Button) findViewById(R.id.btn_networkimageView);		
		btn_networkimageView2 = (Button) findViewById(R.id.btn_networkimageView2);		
	}

	private void setEvent() {
		btn_imagerequest.setOnClickListener(this);
		btn_imageloader.setOnClickListener(this);
		btn_imageloader2.setOnClickListener(this);
		btn_networkimageView.setOnClickListener(this);
		btn_networkimageView2.setOnClickListener(this);
		
	}

	@Override
	public void onClick(View v) {
		switch(v.getId()){
		case R.id.btn_imagerequest:
			volley_ImageRequest();
			break;
		case R.id.btn_imageloader:
			volley_ImageLoader();
			break;
		case R.id.btn_imageloader2:
			volley_ImageLoader2();
			break;
		case R.id.btn_networkimageView:
			volley_NetworkImageView();
			break;
		case R.id.btn_networkimageView2:
			volley_NetworkImageView2();
			break;
		}
	}

	/**
	 * ImageRequest 加载图片
	 * ImageRequest的构造函数接收六个参数:
	 * 		第一个参数就是图片的URL地址，这个没什么需要解释的;
	 * 		第二个参数是图片请求成功的回调，这里我们把返回的Bitmap参数设置到ImageView中;
	 * 		第三第、四个参数分别用于指定允许图片最大的宽度和高度，如果指定的网络图片的宽度或高度大于这里的最大值，则会对图片进行压缩，指定成0的话就表示不管图片有多大，都不会进行压缩;
	 * 		第五个参数用于指定图片的颜色属性，Bitmap.Config下的几个常量都可以在这里使用，其中ARGB_8888可以展示最好的颜色属性，每个图片像素占据4个字节的大小，而RGB_565则表示每个图片像素占据2个字节大小;
	 * 		第六个参数是图片请求失败的回调，这里我们当请求失败时在ImageView中显示一张默认图片。
	 */
	private void volley_ImageRequest() {
		ImageRequest request = new ImageRequest(urlImageRequest, new Listener<Bitmap>() {
			@Override
			public void onResponse(Bitmap response) {
				img_resp1.setImageBitmap(response);
			}
		}, 0, 0, Config.RGB_565, new ErrorListener() {
			@Override
			public void onErrorResponse(VolleyError error) {
				Toast.makeText(ImageActivity.this, error.toString(), 3000).show();
				img_resp1.setImageResource(R.drawable.ic_launcher);
			}
		});
		request.setTag("volley_ImageRequest");
		MyApplication.getInstance().addToRequestQueue(request);	
		
	}

	/**
	 * ImageLoader 加载图片,无缓存
	 */
	private void volley_ImageLoader(){
		/*
		 * ImageLoader的构造函数接收两个参数:
		 * 		第一个参数就是RequestQueue对象
		 *		第二个参数是一个ImageCache对象，这里我们先new出一个空的ImageCache的实现即可
		 */
		ImageLoader imgloader = new ImageLoader(MyApplication.getInstance().getRequestQueue(), new ImageCache() {
			@Override
			public void putBitmap(String url, Bitmap bitmap) {
				
			}
			@Override
			public Bitmap getBitmap(String url) {
				return null;
			}
		});
		/*
		 * 我们通过调用ImageLoader的getImageListener()方法能够获取到一个ImageListener对象
		 * getImageListener()方法接收三个参数:
		 * 		第一个参数指定用于显示图片的ImageView控件
		 * 		第二个参数指定加载图片的过程中显示的图片
		 * 		第三个参数指定加载图片失败的情况下显示的图片
		 */
		ImageListener listener = ImageLoader.getImageListener(img_resp1, R.drawable.ic_launcher, R.drawable.ic_launcher);
		/*
		 * get()方法接收两个参数:
		 * 		第一个参数就是图片的URL地址
		 * 		第二个参数则是刚刚获取到的ImageListener对象。
		 * 当然，如果你想对图片的大小进行限制，也可以使用get()方法的重载，指定图片允许的最大宽度和高度 imgloader.get(url, listener, 200, 200)
		 */
		imgloader.get(urlImageLoader, listener);
	}

	/**
	 * ImageLoader 加载图片,有缓存
	 */
	private void volley_ImageLoader2(){
		/*
		 * ImageLoader的构造函数接收两个参数:
		 * 		第一个参数就是RequestQueue对象
		 *		第二个参数是一个ImageCache对象，这里我们先new出一个已经设置好的BitmapCache()
		 */
		ImageLoader imgloader = new ImageLoader(MyApplication.getInstance().getRequestQueue(), new BitmapCache());
		ImageListener listener = ImageLoader.getImageListener(img_resp1, R.drawable.ic_launcher, R.drawable.ic_launcher);
		imgloader.get(urlImageLoader2, listener);
	}

	/**
	 * NetworkImageView 加载图片,无缓存,图片大小在xml中限制
	 */
	private void volley_NetworkImageView(){
		//无缓存
		ImageLoader imgloader = new ImageLoader(MyApplication.getInstance().getRequestQueue(), new ImageCache() {
			@Override
			public void putBitmap(String url, Bitmap bitmap) {
				
			}
			@Override
			public Bitmap getBitmap(String url) {
				return null;
			}
		});
		
		networkImageView.setDefaultImageResId(R.drawable.default_image);  
		networkImageView.setErrorImageResId(R.drawable.failed_image);  
		networkImageView.setTag("volley_NetworkImageView"); 
		networkImageView.setImageUrl(urlNetworkImageView, imgloader);  
		
	}

	/**
	 * NetworkImageView 加载图片,有缓存,图片大小在xml中限制
	 */
	private void volley_NetworkImageView2() {
		//有缓存
		ImageLoader imgloader = new ImageLoader(MyApplication.getInstance().getRequestQueue(), new BitmapCache());
		
		networkImageView.setDefaultImageResId(R.drawable.default_image);  
		networkImageView.setErrorImageResId(R.drawable.failed_image);  
		networkImageView.setTag("volley_NetworkImageView2"); 
		networkImageView.setImageUrl(urlNetworkImageView2, imgloader);  
		
	}
}

第六步 BitmapCache.java

package com.example.volleyfrademo;

import android.graphics.Bitmap;
import android.util.LruCache;

import com.android.volley.toolbox.ImageLoader.ImageCache;
/**
 * 对应volley_ImageLoader2
 * 
 * 新建一个BitmapCache并实现了ImageCache接口
 * 这里我们将缓存图片的大小设置为10M
 * 
 * @author jiatao
 */
public class BitmapCache implements ImageCache{

	private LruCache<String, Bitmap> mCache;  
	  
    public BitmapCache() {  
        int maxSize = 10 * 1024 * 1024;  
        mCache = new LruCache<String, Bitmap>(maxSize) {  
            @Override  
            protected int sizeOf(String key, Bitmap bitmap) {  
                return bitmap.getRowBytes() * bitmap.getHeight();  
            }  
        };  
    }  
  
    @Override  
    public Bitmap getBitmap(String url) {  
        return mCache.get(url);  
    }  
  
    @Override  
    public void putBitmap(String url, Bitmap bitmap) {  
        mCache.put(url, bitmap);  
    } 
}