Android UI开发第三十六篇——使用Volley加载图片列表

Android开发者可能会使用Universal Image Loader或者Square`s newer Picasso这些第三方的库去处理图片的加载，那么Volley是怎么加载图片列表的呢，这一篇文章会介绍使用Volley加载图片列表。

在Google I/O介绍Volley的时候，Ficus Kirpatrick讲了很多关于Volley如何的有助于图片加载。但是，你会发现在Volley作为图片加载解决方案的时候，Volley虽然自己处理了L2的缓存，可是它没有处理L1的缓存。它给出了ImageCache接口类，让开发者自己根据自己的需求实现自己L1缓存，这样你可以实现LRU、FIFO等算法的缓存。

Volley加载图片时需要使用ImageLoader，ImageLoader初始化一次。展示图片的View可以使用ImageView或者Volley自定义的NetworkImageView。NetworkImageView可以使用setUrl方法获取图片。下面为两种View加载图片的方式。

使用ImageView：

public class VolleyImageViewListAdapter extends BaseAdapter{

	private static final String TAG = "VolleyListAdapter";

	private Context mContext;
	private String[] urlArrays;
	private ImageLoader mImageLoader;

	public VolleyImageViewListAdapter(Context context, String []url) {
		this.mContext = context;
		urlArrays = url;

		RequestQueue mQueue = Volley.newRequestQueue(context);
		mImageLoader = new ImageLoader(mQueue, new BitmapCache());
	}

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

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

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

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {

		ViewHolder viewHolder = null;
		if (convertView == null) {
			convertView = LayoutInflater.from(mContext).inflate(
					R.layout.volley_image_list_item, null);
			viewHolder = new ViewHolder();
			viewHolder.mTextView = (TextView) convertView
					.findViewById(R.id.tv_tips);
			viewHolder.mImageView = (ImageView) convertView
					.findViewById(R.id.iv_image);
			convertView.setTag(viewHolder);
		} else {
			viewHolder = (ViewHolder) convertView.getTag();
		}
		String url = "";
		url = urlArrays[position % urlArrays.length];

		viewHolder.mTextView.setText(position+"|"+urlArrays.length) ;
	    ImageListener listener = ImageLoader.getImageListener(viewHolder.mImageView, android.R.drawable.ic_menu_rotate, android.R.drawable.ic_delete);
        mImageLoader.get(url, listener);
		return convertView;
	}

	static class ViewHolder {
		TextView mTextView;
		ImageView mImageView;
	}

	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 value) {
	                return value.getRowBytes() * value.getHeight();
	            }  

	        };
	    }  

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

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

	}
}

使用NetworkImageView：

public class VolleyListAdapter extends BaseAdapter{

	private static final String TAG = "VolleyListAdapter";

	private Context mContext;
	private String[] urlArrays;	

	public VolleyListAdapter(Context context, String []url) {
		this.mContext = context;
		urlArrays = url;
	}

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

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

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

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {

		ViewHolder viewHolder = null;
		if (convertView == null) {
			convertView = LayoutInflater.from(mContext).inflate(
					R.layout.volley_list_item, null);
			viewHolder = new ViewHolder();
			viewHolder.mTextView = (TextView) convertView
					.findViewById(R.id.tv_tips);
			viewHolder.mImageView = (NetworkImageView) convertView
					.findViewById(R.id.iv_image);
			convertView.setTag(viewHolder);
		} else {
			viewHolder = (ViewHolder) convertView.getTag();
		}
		String url = "";
		url = urlArrays[position % urlArrays.length];

		viewHolder.mTextView.setText(position+"|"+urlArrays.length) ;
		viewHolder.mImageView.setImageUrl(url, ImageCacheManager.getInstance().getImageLoader());

		return convertView;
	}

	static class ViewHolder {
		TextView mTextView;
		NetworkImageView mImageView;
	}
}

效果图：

 

/**

* @author 张兴业

*  http://blog.csdn.net/xyz_lmn

*  iOS入门群：83702688

*  android开发进阶群：241395671

*  我的新浪微博：@张兴业TBOW

*/