universalimageloader

轉載請註明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/26810303),請尊重他人的辛勤勞動成果,謝謝!

大家好!差不多兩個來月沒有寫文章了,前段時間也是在忙換工作的事,準備筆試面試什麼的事情,現在新工作找好了,新工作自己也比較滿意,唯一遺憾的就是自己要去一個新的城市,新的環境新的開始,希望自己能儘快的適應新環境,現在在準備交接的事情,自己也有一些時間了,所以就繼續給大家分享Android方面的東西。

相信大家平時做Android應用的時候,多少會接觸到異步加載圖片,或者加載大量圖片的問題,而加載圖片我們常常會遇到許多的問題,比如說圖片的錯亂,OOM等問題,對於新手來說,這些問題解決起來會比較喫力,所以就有很多的開源圖片加載框架應運而生,比較著名的就是Universal-Image-Loader,相信很多朋友都聽過或者使用過這個強大的圖片加載框架,今天這篇文章就是對這個框架的基本介紹以及使用,主要是幫助那些沒有使用過這個框架的朋友們。該項目存在於Github上面https://github.com/nostra13/Android-Universal-Image-Loader,我們可以先看看這個開源庫存在哪些特徵

  1. 多線程下載圖片,圖片可以來源於網絡,文件系統,項目文件夾assets中以及drawable中等
  2. 支持隨意的配置ImageLoader,例如線程池,圖片下載器,內存緩存策略,硬盤緩存策略,圖片顯示選項以及其他的一些配置
  3. 支持圖片的內存緩存,文件系統緩存或者SD卡緩存
  4. 支持圖片下載過程的監聽
  5. 根據控件(ImageView)的大小對Bitmap進行裁剪,減少Bitmap佔用過多的內存
  6. 較好的控制圖片的加載過程,例如暫停圖片加載,重新開始加載圖片,一般使用在ListView,GridView中,滑動過程中暫停加載圖片,停止滑動的時候去加載圖片
  7. 提供在較慢的網絡下對圖片進行加載

當然上面列舉的特性可能不全,要想了解一些其他的特性只能通過我們的使用慢慢去發現了,接下來我們就看看這個開源庫的簡單使用吧


新建一個Android項目,下載JAR包添加到工程libs目錄下

新建一個MyApplication繼承Application,並在onCreate()中創建ImageLoader的配置參數,並初始化到ImageLoader中代碼如下

[java] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. package com.example.uil;  
  2.   
  3. import com.nostra13.universalimageloader.core.ImageLoader;  
  4. import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;  
  5.   
  6. import android.app.Application;  
  7.   
  8. public class MyApplication extends Application {  
  9.   
  10.     @Override  
  11.     public void onCreate() {  
  12.         super.onCreate();  
  13.   
  14.         //創建默認的ImageLoader配置參數  
  15.         ImageLoaderConfiguration configuration = ImageLoaderConfiguration  
  16.                 .createDefault(this);  
  17.           
  18.         //Initialize ImageLoader with configuration.  
  19.         ImageLoader.getInstance().init(configuration);  
  20.     }  
  21.   
  22. }  
ImageLoaderConfiguration是圖片加載器ImageLoader的配置參數,使用了建造者模式,這裏是直接使用了createDefault()方法創建一個默認的ImageLoaderConfiguration,當然我們還可以自己設置ImageLoaderConfiguration,設置如下

[java] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. File cacheDir = StorageUtils.getCacheDirectory(context);  
  2. ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context)  
  3.         .memoryCacheExtraOptions(480800// default = device screen dimensions  
  4.         .diskCacheExtraOptions(480800, CompressFormat.JPEG, 75null)  
  5.         .taskExecutor(...)  
  6.         .taskExecutorForCachedImages(...)  
  7.         .threadPoolSize(3// default  
  8.         .threadPriority(Thread.NORM_PRIORITY - 1// default  
  9.         .tasksProcessingOrder(QueueProcessingType.FIFO) // default  
  10.         .denyCacheImageMultipleSizesInMemory()  
  11.         .memoryCache(new LruMemoryCache(2 * 1024 * 1024))  
  12.         .memoryCacheSize(2 * 1024 * 1024)  
  13.         .memoryCacheSizePercentage(13// default  
  14.         .diskCache(new UnlimitedDiscCache(cacheDir)) // default  
  15.         .diskCacheSize(50 * 1024 * 1024)  
  16.         .diskCacheFileCount(100)  
  17.         .diskCacheFileNameGenerator(new HashCodeFileNameGenerator()) // default  
  18.         .imageDownloader(new BaseImageDownloader(context)) // default  
  19.         .imageDecoder(new BaseImageDecoder()) // default  
  20.         .defaultDisplayImageOptions(DisplayImageOptions.createSimple()) // default  
  21.         .writeDebugLogs()  
  22.         .build();  

上面的這些就是所有的選項配置,我們在項目中不需要每一個都自己設置,一般使用createDefault()創建的ImageLoaderConfiguration就能使用,然後調用ImageLoader的init()方法將ImageLoaderConfiguration參數傳遞進去,ImageLoader使用單例模式。


配置Android Manifest文件

[html] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. <manifest>  
  2.     <uses-permission android:name="android.permission.INTERNET" />  
  3.     <!-- Include next permission if you want to allow UIL to cache images on SD card -->  
  4.     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />  
  5.     ...  
  6.     <application android:name="MyApplication">  
  7.         ...  
  8.     </application>  
  9. </manifest>  

接下來我們就可以來加載圖片了,首先我們定義好Activity的佈局文件

[html] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent">  
  5.   
  6.     <ImageView  
  7.         android:layout_gravity="center"  
  8.         android:id="@+id/image"  
  9.         android:src="@drawable/ic_empty"  
  10.         android:layout_width="wrap_content"  
  11.         android:layout_height="wrap_content" />  
  12.   
  13. </FrameLayout>  

裏面只有一個ImageView,很簡單,接下來我們就去加載圖片,我們會發現ImageLader提供了幾個圖片加載的方法,主要是這幾個displayImage(), loadImage(),loadImageSync(),loadImageSync()方法是同步的,android4.0有個特性,網絡操作不能在主線程,所以loadImageSync()方法我們就不去使用

.

loadimage()加載圖片


我們先使用ImageLoader的loadImage()方法來加載網絡圖片

[java] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. final ImageView mImageView = (ImageView) findViewById(R.id.image);  
  2.         String imageUrl = "https://lh6.googleusercontent.com/-55osAWw3x0Q/URquUtcFr5I/AAAAAAAAAbs/rWlj1RUKrYI/s1024/A%252520Photographer.jpg";  
  3.           
  4.         ImageLoader.getInstance().loadImage(imageUrl, new ImageLoadingListener() {  
  5.               
  6.             @Override  
  7.             public void onLoadingStarted(String imageUri, View view) {  
  8.                   
  9.             }  
  10.               
  11.             @Override  
  12.             public void onLoadingFailed(String imageUri, View view,  
  13.                     FailReason failReason) {  
  14.                   
  15.             }  
  16.               
  17.             @Override  
  18.             public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {  
  19.                 mImageView.setImageBitmap(loadedImage);  
  20.             }  
  21.               
  22.             @Override  
  23.             public void onLoadingCancelled(String imageUri, View view) {  
  24.                   
  25.             }  
  26.         });  
傳入圖片的url和ImageLoaderListener, 在回調方法onLoadingComplete()中將loadedImage設置到ImageView上面就行了,如果你覺得傳入ImageLoaderListener太複雜了,我們可以使用SimpleImageLoadingListener類,該類提供了ImageLoaderListener接口方法的空實現,使用的是缺省適配器模式

[java] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. final ImageView mImageView = (ImageView) findViewById(R.id.image);  
  2.         String imageUrl = "https://lh6.googleusercontent.com/-55osAWw3x0Q/URquUtcFr5I/AAAAAAAAAbs/rWlj1RUKrYI/s1024/A%252520Photographer.jpg";  
  3.           
  4.         ImageLoader.getInstance().loadImage(imageUrl, new SimpleImageLoadingListener(){  
  5.   
  6.             @Override  
  7.             public void onLoadingComplete(String imageUri, View view,  
  8.                     Bitmap loadedImage) {  
  9.                 super.onLoadingComplete(imageUri, view, loadedImage);  
  10.                 mImageView.setImageBitmap(loadedImage);  
  11.             }  
  12.               
  13.         });  
如果我們要指定圖片的大小該怎麼辦呢,這也好辦,初始化一個ImageSize對象,指定圖片的寬和高,代碼如下

[java] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. final ImageView mImageView = (ImageView) findViewById(R.id.image);  
  2.         String imageUrl = "https://lh6.googleusercontent.com/-55osAWw3x0Q/URquUtcFr5I/AAAAAAAAAbs/rWlj1RUKrYI/s1024/A%252520Photographer.jpg";  
  3.           
  4.         ImageSize mImageSize = new ImageSize(100100);  
  5.           
  6.         ImageLoader.getInstance().loadImage(imageUrl, mImageSize, new SimpleImageLoadingListener(){  
  7.   
  8.             @Override  
  9.             public void onLoadingComplete(String imageUri, View view,  
  10.                     Bitmap loadedImage) {  
  11.                 super.onLoadingComplete(imageUri, view, loadedImage);  
  12.                 mImageView.setImageBitmap(loadedImage);  
  13.             }  
  14.               
  15.         });  

上面只是很簡單的使用ImageLoader來加載網絡圖片,在實際的開發中,我們並不會這麼使用,那我們平常會怎麼使用呢?我們會用到DisplayImageOptions,他可以配置一些圖片顯示的選項,比如圖片在加載中ImageView顯示的圖片,是否需要使用內存緩存,是否需要使用文件緩存等等,可供我們選擇的配置如下

[java] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. DisplayImageOptions options = new DisplayImageOptions.Builder()  
  2.         .showImageOnLoading(R.drawable.ic_stub) // resource or drawable  
  3.         .showImageForEmptyUri(R.drawable.ic_empty) // resource or drawable  
  4.         .showImageOnFail(R.drawable.ic_error) // resource or drawable  
  5.         .resetViewBeforeLoading(false)  // default  
  6.         .delayBeforeLoading(1000)  
  7.         .cacheInMemory(false// default  
  8.         .cacheOnDisk(false// default  
  9.         .preProcessor(...)  
  10.         .postProcessor(...)  
  11.         .extraForDownloader(...)  
  12.         .considerExifParams(false// default  
  13.         .imageScaleType(ImageScaleType.IN_SAMPLE_POWER_OF_2) // default  
  14.         .bitmapConfig(Bitmap.Config.ARGB_8888) // default  
  15.         .decodingOptions(...)  
  16.         .displayer(new SimpleBitmapDisplayer()) // default  
  17.         .handler(new Handler()) // default  
  18.         .build();  

我們將上面的代碼稍微修改下

[java] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. final ImageView mImageView = (ImageView) findViewById(R.id.image);  
  2.         String imageUrl = "https://lh6.googleusercontent.com/-55osAWw3x0Q/URquUtcFr5I/AAAAAAAAAbs/rWlj1RUKrYI/s1024/A%252520Photographer.jpg";  
  3.         ImageSize mImageSize = new ImageSize(100100);  
  4.           
  5.         //顯示圖片的配置  
  6.         DisplayImageOptions options = new DisplayImageOptions.Builder()  
  7.                 .cacheInMemory(true)  
  8.                 .cacheOnDisk(true)  
  9.                 .bitmapConfig(Bitmap.Config.RGB_565)  
  10.                 .build();  
  11.           
  12.         ImageLoader.getInstance().loadImage(imageUrl, mImageSize, options, new SimpleImageLoadingListener(){  
  13.   
  14.             @Override  
  15.             public void onLoadingComplete(String imageUri, View view,  
  16.                     Bitmap loadedImage) {  
  17.                 super.onLoadingComplete(imageUri, view, loadedImage);  
  18.                 mImageView.setImageBitmap(loadedImage);  
  19.             }  
  20.               
  21.         });  

我們使用了DisplayImageOptions來配置顯示圖片的一些選項,這裏我添加了將圖片緩存到內存中已經緩存圖片到文件系統中,這樣我們就不用擔心每次都從網絡中去加載圖片了,是不是很方便呢,但是DisplayImageOptions選項中有些選項對於loadImage()方法是無效的,比如showImageOnLoading, showImageForEmptyUri等,


displayImage()加載圖片


接下來我們就來看看網絡圖片加載的另一個方法displayImage(),代碼如下

[java] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. final ImageView mImageView = (ImageView) findViewById(R.id.image);  
  2.         String imageUrl = "https://lh6.googleusercontent.com/-55osAWw3x0Q/URquUtcFr5I/AAAAAAAAAbs/rWlj1RUKrYI/s1024/A%252520Photographer.jpg";  
  3.           
  4.         //顯示圖片的配置  
  5.         DisplayImageOptions options = new DisplayImageOptions.Builder()  
  6.                 .showImageOnLoading(R.drawable.ic_stub)  
  7.                 .showImageOnFail(R.drawable.ic_error)  
  8.                 .cacheInMemory(true)  
  9.                 .cacheOnDisk(true)  
  10.                 .bitmapConfig(Bitmap.Config.RGB_565)  
  11.                 .build();  
  12.           
  13.         ImageLoader.getInstance().displayImage(imageUrl, mImageView, options);  

從上面的代碼中,我們可以看出,使用displayImage()比使用loadImage()方便很多,也不需要添加ImageLoadingListener接口,我們也不需要手動設置ImageView顯示Bitmap對象,直接將ImageView作爲參數傳遞到displayImage()中就行了,圖片顯示的配置選項中,我們添加了一個圖片加載中ImageVIew上面顯示的圖片,以及圖片加載出現錯誤顯示的圖片,效果如下,剛開始顯示ic_stub圖片,如果圖片加載成功顯示圖片,加載產生錯誤顯示ic_error



這個方法使用起來比較方便,而且使用displayImage()方法 他會根據控件的大小和imageScaleType來自動裁剪圖片,我們修改下MyApplication,開啓Log打印

[java] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. public class MyApplication extends Application {  
  2.   
  3.     @Override  
  4.     public void onCreate() {  
  5.         super.onCreate();  
  6.   
  7.         //創建默認的ImageLoader配置參數  
  8.         ImageLoaderConfiguration configuration = new ImageLoaderConfiguration.Builder(this)  
  9.         .writeDebugLogs() //打印log信息  
  10.         .build();  
  11.           
  12.           
  13.         //Initialize ImageLoader with configuration.  
  14.         ImageLoader.getInstance().init(configuration);  
  15.     }  
  16.   
  17. }  

我們來看下圖片加載的Log信息


第一條信息中,告訴我們開始加載圖片,打印出圖片的url以及圖片的最大寬度和高度,圖片的寬高默認是設備的寬高,當然如果我們很清楚圖片的大小,我們也可以去設置這個大小,在ImageLoaderConfiguration的選項中memoryCacheExtraOptions(int maxImageWidthForMemoryCache, int maxImageHeightForMemoryCache)

第二條信息顯示我們加載的圖片來源於網絡

第三條信息顯示圖片的原始大小爲1024 x 682 經過裁剪變成了512 x 341 

第四條顯示圖片加入到了內存緩存中,我這裏沒有加入到sd卡中,所以沒有加入文件緩存的Log


我們在加載網絡圖片的時候,經常有需要顯示圖片下載進度的需求,Universal-Image-Loader當然也提供這樣的功能,只需要在displayImage()方法中傳入ImageLoadingProgressListener接口就行了,代碼如下

[java] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. imageLoader.displayImage(imageUrl, mImageView, options, new SimpleImageLoadingListener(), new ImageLoadingProgressListener() {  
  2.               
  3.             @Override  
  4.             public void onProgressUpdate(String imageUri, View view, int current,  
  5.                     int total) {  
  6.                   
  7.             }  
  8.         });  
由於displayImage()方法中帶ImageLoadingProgressListener參數的方法都有帶ImageLoadingListener參數,所以我這裏直接new 一個SimpleImageLoadingListener,然後我們就可以在回調方法onProgressUpdate()得到圖片的加載進度。


加載其他來源的圖片


使用Universal-Image-Loader框架不僅可以加載網絡圖片,還可以加載sd卡中的圖片,Content provider等,使用也很簡單,只是將圖片的url稍加的改變下就行了,下面是加載文件系統的圖片

[java] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. //顯示圖片的配置  
  2.         DisplayImageOptions options = new DisplayImageOptions.Builder()  
  3.                 .showImageOnLoading(R.drawable.ic_stub)  
  4.                 .showImageOnFail(R.drawable.ic_error)  
  5.                 .cacheInMemory(true)  
  6.                 .cacheOnDisk(true)  
  7.                 .bitmapConfig(Bitmap.Config.RGB_565)  
  8.                 .build();  
  9.           
  10.         final ImageView mImageView = (ImageView) findViewById(R.id.image);  
  11.         String imagePath = "/mnt/sdcard/image.png";  
  12.         String imageUrl = Scheme.FILE.wrap(imagePath);  
  13.           
  14. //      String imageUrl = "https://img-my.csdn.net/uploads/201309/01/1378037235_7476.jpg";  
  15.           
  16.         imageLoader.displayImage(imageUrl, mImageView, options);  
當然還有來源於Content provider,drawable,assets中,使用的時候也很簡單,我們只需要給每個圖片來源的地方加上Scheme包裹起來(Content provider除外),然後當做圖片的url傳遞到imageLoader中,Universal-Image-Loader框架會根據不同的Scheme獲取到輸入流

[java] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. //圖片來源於Content provider  
  2.         String contentprividerUrl = "content://media/external/audio/albumart/13";  
  3.           
  4.         //圖片來源於assets  
  5.         String assetsUrl = Scheme.ASSETS.wrap("image.png");  
  6.           
  7.         //圖片來源於  
  8.         String drawableUrl = Scheme.DRAWABLE.wrap("R.drawable.image");  


GirdView,ListView加載圖片


相信大部分人都是使用GridView,ListView來顯示大量的圖片,而當我們快速滑動GridView,ListView,我們希望能停止圖片的加載,而在GridView,ListView停止滑動的時候加載當前界面的圖片,這個框架當然也提供這個功能,使用起來也很簡單,它提供了PauseOnScrollListener這個類來控制ListView,GridView滑動過程中停止去加載圖片,該類使用的是代理模式

[java] view plain copy
 在CODE上查看代碼片派生到我的代碼片
  1. listView.setOnScrollListener(new PauseOnScrollListener(imageLoader, pauseOnScroll, pauseOnFling));  
  2.         gridView.setOnScrollListener(new PauseOnScrollListener(imageLoader, pauseOnScroll, pauseOnFling));  
第一個參數就是我們的圖片加載對象ImageLoader, 第二個是控制是否在滑動過程中暫停加載圖片,如果需要暫停傳true就行了,第三個參數控制猛的滑動界面的時候圖片是否加載


OutOfMemoryError


雖然這個框架有很好的緩存機制,有效的避免了OOM的產生,一般的情況下產生OOM的概率比較小,但是並不能保證OutOfMemoryError永遠不發生,這個框架對於OutOfMemoryError做了簡單的catch,保證我們的程序遇到OOM而不被crash掉,但是如果我們使用該框架經常發生OOM,我們應該怎麼去改善呢?

  • 減少線程池中線程的個數,在ImageLoaderConfiguration中的(.threadPoolSize)中配置,推薦配置1-5
  • 在DisplayImageOptions選項中配置bitmapConfig爲Bitmap.Config.RGB_565,因爲默認是ARGB_8888, 使用RGB_565會比使用ARGB_8888少消耗2倍的內存
  • 在ImageLoaderConfiguration中配置圖片的內存緩存爲memoryCache(new WeakMemoryCache()) 或者不使用內存緩存
  • 在DisplayImageOptions選項中設置.imageScaleType(ImageScaleType.IN_SAMPLE_INT)或者imageScaleType(ImageScaleType.EXACTLY)

通過上面這些,相信大家對Universal-Image-Loader框架的使用已經非常的瞭解了,我們在使用該框架的時候儘量的使用displayImage()方法去加載圖片,loadImage()是將圖片對象回調到ImageLoadingListener接口的onLoadingComplete()方法中,需要我們手動去設置到ImageView上面,displayImage()方法中,對ImageView對象使用的是Weak references,方便垃圾回收器回收ImageView對象,如果我們要加載固定大小的圖片的時候,使用loadImage()方法需要傳遞一個ImageSize對象,而displayImage()方法會根據ImageView對象的測量值,或者android:layout_width and android:layout_height設定的值,或者android:maxWidth and/or android:maxHeight設定的值來裁剪圖片

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章