Android UI開發第三十六篇——使用Volley載入圖片列表

lostinai發表於2014-03-26
AndroidUI
  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：

[java] view plaincopyprint?
  1. public class VolleyImageViewListAdapter extends BaseAdapter{  
  2.   
  3.     private static final String TAG = "VolleyListAdapter";  
  4.       
  5.     private Context mContext;  
  6.     private String[] urlArrays;  
  7.     private ImageLoader mImageLoader;  
  8.   
  9.       
  10.       
  11.     public VolleyImageViewListAdapter(Context context, String []url) {  
  12.         this.mContext = context;  
  13.         urlArrays = url;  
  14.   
  15.         RequestQueue mQueue = Volley.newRequestQueue(context);    
  16.         mImageLoader = new ImageLoader(mQueue, new BitmapCache());   
  17.     }  
  18.       
  19.   
  20.     @Override  
  21.     public int getCount() {  
  22.         return urlArrays.length;  
  23.     }  
  24.   
  25.     @Override  
  26.     public Object getItem(int position) {  
  27.         return position;  
  28.     }  
  29.   
  30.     @Override  
  31.     public long getItemId(int position) {  
  32.         return position;  
  33.     }  
  34.   
  35.     @Override  
  36.     public View getView(int position, View convertView, ViewGroup parent) {  
  37.   
  38.         ViewHolder viewHolder = null;  
  39.         if (convertView == null) {  
  40.             convertView = LayoutInflater.from(mContext).inflate(  
  41.                     R.layout.volley_image_list_item, null);  
  42.             viewHolder = new ViewHolder();  
  43.             viewHolder.mTextView = (TextView) convertView  
  44.                     .findViewById(R.id.tv_tips);  
  45.             viewHolder.mImageView = (ImageView) convertView  
  46.                     .findViewById(R.id.iv_image);  
  47.             convertView.setTag(viewHolder);  
  48.         } else {  
  49.             viewHolder = (ViewHolder) convertView.getTag();  
  50.         }  
  51.         String url = "";  
  52.         url = urlArrays[position % urlArrays.length];  
  53.           
  54.   
  55.         viewHolder.mTextView.setText(position+"|"+urlArrays.length) ;  
  56.         ImageListener listener = ImageLoader.getImageListener(viewHolder.mImageView, android.R.drawable.ic_menu_rotate, android.R.drawable.ic_delete);    
  57.         mImageLoader.get(url, listener);    
  58.         return convertView;  
  59.     }  
  60.   
  61.     static class ViewHolder {  
  62.         TextView mTextView;  
  63.         ImageView mImageView;  
  64.     }  
  65.       
  66.       
  67.     public class BitmapCache implements ImageCache {    
  68.         private LruCache<String, Bitmap> mCache;    
  69.             
  70.         public BitmapCache() {    
  71.             int maxSize = 10 * 1024 * 1024;    
  72.             mCache = new LruCache<String, Bitmap>(maxSize) {    
  73.                 @Override    
  74.                 protected int sizeOf(String key, Bitmap value) {    
  75.                     return value.getRowBytes() * value.getHeight();    
  76.                 }    
  77.                     
  78.             };    
  79.         }    
  80.         
  81.         @Override    
  82.         public Bitmap getBitmap(String url) {    
  83.             return mCache.get(url);    
  84.         }    
  85.         
  86.         @Override    
  87.         public void putBitmap(String url, Bitmap bitmap) {    
  88.             mCache.put(url, bitmap);    
  89.         }    
  90.         
  91.     }    
  92. }  

使用NetworkImageView：

[java] view plaincopyprint?
  1. public class VolleyListAdapter extends BaseAdapter{  
  2.   
  3.     private static final String TAG = "VolleyListAdapter";  
  4.       
  5.     private Context mContext;  
  6.     private String[] urlArrays;   
  7.       
  8.     public VolleyListAdapter(Context context, String []url) {  
  9.         this.mContext = context;  
  10.         urlArrays = url;  
  11.     }  
  12.       
  13.     @Override  
  14.     public int getCount() {  
  15.         return urlArrays.length;  
  16.     }  
  17.   
  18.     @Override  
  19.     public Object getItem(int position) {  
  20.         return position;  
  21.     }  
  22.   
  23.     @Override  
  24.     public long getItemId(int position) {  
  25.         return position;  
  26.     }  
  27.   
  28.     @Override  
  29.     public View getView(int position, View convertView, ViewGroup parent) {  
  30.   
  31.         ViewHolder viewHolder = null;  
  32.         if (convertView == null) {  
  33.             convertView = LayoutInflater.from(mContext).inflate(  
  34.                     R.layout.volley_list_item, null);  
  35.             viewHolder = new ViewHolder();  
  36.             viewHolder.mTextView = (TextView) convertView  
  37.                     .findViewById(R.id.tv_tips);  
  38.             viewHolder.mImageView = (NetworkImageView) convertView  
  39.                     .findViewById(R.id.iv_image);  
  40.             convertView.setTag(viewHolder);  
  41.         } else {  
  42.             viewHolder = (ViewHolder) convertView.getTag();  
  43.         }  
  44.         String url = "";  
  45.         url = urlArrays[position % urlArrays.length];  
  46.   
  47.         viewHolder.mTextView.setText(position+"|"+urlArrays.length) ;     
  48.         viewHolder.mImageView.setImageUrl(url, ImageCacheManager.getInstance().getImageLoader());  
  49.           
  50.         return convertView;  
  51.     }  
  52.   
  53.     static class ViewHolder {  
  54.         TextView mTextView;  
  55.         NetworkImageView mImageView;  
  56.     }  
  57. }  

效果圖：



/**
* @author 張興業

相關文章