1. 程式人生 > >Android 開源框架Universal-Image-Loader完全解析(一)--- 基本介紹及使用

Android 開源框架Universal-Image-Loader完全解析(一)--- 基本介紹及使用

               

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

package com.example.uil;import com.nostra13.universalimageloader.core.ImageLoader;import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;import
android.app.Application;public class MyApplication extends Application @Override public void onCreate() {  super.onCreate();  //建立預設的ImageLoader配置引數  ImageLoaderConfiguration configuration = ImageLoaderConfiguration    .createDefault(this);    //Initialize ImageLoader with configuration.  ImageLoader.getInstance().init(configuration); }}
ImageLoaderConfiguration是圖片載入器ImageLoader的配置引數,使用了建造者模式,這裡是直接使用了createDefault()方法建立一個預設的ImageLoaderConfiguration,當然我們還可以自己設定ImageLoaderConfiguration,設定如下
File cacheDir = StorageUtils.getCacheDirectory(context);ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context)        .memoryCacheExtraOptions(480, 800) // default = device screen dimensions        .diskCacheExtraOptions(480, 800, CompressFormat.JPEG, 75, null)        .taskExecutor(...)        .taskExecutorForCachedImages(...)        .threadPoolSize(3) // default        .threadPriority(Thread.NORM_PRIORITY - 1) // default        .tasksProcessingOrder(QueueProcessingType.FIFO) // default        .denyCacheImageMultipleSizesInMemory()        .memoryCache(new LruMemoryCache(2 * 1024 * 1024))        .memoryCacheSize(2 * 1024 * 1024)        .memoryCacheSizePercentage(13) // default        .diskCache(new UnlimitedDiscCache(cacheDir)) // default        .diskCacheSize(50 * 1024 * 1024)        .diskCacheFileCount(100)        .diskCacheFileNameGenerator(new HashCodeFileNameGenerator()) // default        .imageDownloader(new BaseImageDownloader(context)) // default        .imageDecoder(new BaseImageDecoder()) // default        .defaultDisplayImageOptions(DisplayImageOptions.createSimple()) // default        .writeDebugLogs()        .build();

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

配置Android Manifest檔案

<manifest>    <uses-permission android:name="android.permission.INTERNET" />    <!-- Include next permission if you want to allow UIL to cache images on SD card -->    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />    ...    <application android:name="MyApplication">        ...    </application></manifest>
接下來我們就可以來載入圖片了,首先我們定義好Activity的佈局檔案
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <ImageView        android:layout_gravity="center"        android:id="@+id/image"        android:src="@drawable/ic_empty"        android:layout_width="wrap_content"        android:layout_height="wrap_content" /></FrameLayout>

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

.

loadimage()載入圖片

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

final ImageView mImageView = (ImageView) findViewById(R.id.image);  String imageUrl = "https://lh6.googleusercontent.com/-55osAWw3x0Q/URquUtcFr5I/AAAAAAAAAbs/rWlj1RUKrYI/s1024/A%252520Photographer.jpg";    ImageLoader.getInstance().loadImage(imageUrl, new ImageLoadingListener() {      @Override   public void onLoadingStarted(String imageUri, View view) {       }      @Override   public void onLoadingFailed(String imageUri, View view,     FailReason failReason) {       }      @Override   public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {    mImageView.setImageBitmap(loadedImage);   }      @Override   public void onLoadingCancelled(String imageUri, View view) {       }  });
傳入圖片的url和ImageLoaderListener, 在回撥方法onLoadingComplete()中將loadedImage設定到ImageView上面就行了,如果你覺得傳入ImageLoaderListener太複雜了,我們可以使用SimpleImageLoadingListener類,該類提供了ImageLoaderListener介面方法的空實現,使用的是預設介面卡模式
final ImageView mImageView = (ImageView) findViewById(R.id.image);  String imageUrl = "https://lh6.googleusercontent.com/-55osAWw3x0Q/URquUtcFr5I/AAAAAAAAAbs/rWlj1RUKrYI/s1024/A%252520Photographer.jpg";    ImageLoader.getInstance().loadImage(imageUrl, new SimpleImageLoadingListener(){   @Override   public void onLoadingComplete(String imageUri, View view,     Bitmap loadedImage) {    super.onLoadingComplete(imageUri, view, loadedImage);    mImageView.setImageBitmap(loadedImage);   }     });
如果我們要指定圖片的大小該怎麼辦呢,這也好辦,初始化一個ImageSize物件,指定圖片的寬和高,程式碼如下
final ImageView mImageView = (ImageView) findViewById(R.id.image);  String imageUrl = "https://lh6.googleusercontent.com/-55osAWw3x0Q/URquUtcFr5I/AAAAAAAAAbs/rWlj1RUKrYI/s1024/A%252520Photographer.jpg";    ImageSize mImageSize = new ImageSize(100, 100);    ImageLoader.getInstance().loadImage(imageUrl, mImageSize, new SimpleImageLoadingListener(){   @Override   public void onLoadingComplete(String imageUri, View view,     Bitmap loadedImage) {    super.onLoadingComplete(imageUri, view, loadedImage);    mImageView.setImageBitmap(loadedImage);   }     });

上面只是很簡單的使用ImageLoader來載入網路圖片,在實際的開發中,我們並不會這麼使用,那我們平常會怎麼使用呢?我們會用到DisplayImageOptions,他可以配置一些圖片顯示的選項,比如圖片在載入中ImageView顯示的圖片,是否需要使用記憶體快取,是否需要使用檔案快取等等,可供我們選擇的配置如下

DisplayImageOptions options = new DisplayImageOptions.Builder()        .showImageOnLoading(R.drawable.ic_stub) // resource or drawable        .showImageForEmptyUri(R.drawable.ic_empty) // resource or drawable        .showImageOnFail(R.drawable.ic_error) // resource or drawable        .resetViewBeforeLoading(false// default        .delayBeforeLoading(1000)        .cacheInMemory(false) // default        .cacheOnDisk(false) // default        .preProcessor(...)        .postProcessor(...)        .extraForDownloader(...)        .considerExifParams(false) // default        .imageScaleType(ImageScaleType.IN_SAMPLE_POWER_OF_2) // default        .bitmapConfig(Bitmap.Config.ARGB_8888) // default        .decodingOptions(...)        .displayer(new SimpleBitmapDisplayer()) // default        .handler(new Handler()) // default        .build();
我們將上面的程式碼稍微修改下
final ImageView mImageView = (ImageView) findViewById(R.id.image);  String imageUrl = "https://lh6.googleusercontent.com/-55osAWw3x0Q/URquUtcFr5I/AAAAAAAAAbs/rWlj1RUKrYI/s1024/A%252520Photographer.jpg";  ImageSize mImageSize = new ImageSize(100, 100);    //顯示圖片的配置  DisplayImageOptions options = new DisplayImageOptions.Builder()    .cacheInMemory(true)    .cacheOnDisk(true)    .bitmapConfig(Bitmap.Config.RGB_565)    .build();    ImageLoader.getInstance().loadImage(imageUrl, mImageSize, options, new SimpleImageLoadingListener(){   @Override   public void onLoadingComplete(String imageUri, View view,     Bitmap loadedImage) {    super.onLoadingComplete(imageUri, view, loadedImage);    mImageView.setImageBitmap(loadedImage);   }     });

我們使用了DisplayImageOptions來配置顯示圖片的一些選項,這裡我添加了將圖片快取到記憶體中已經快取圖片到檔案系統中,這樣我們就不用擔心每次都從網路中去載入圖片了,是不是很方便呢,但是DisplayImageOptions選項中有些選項對於loadImage()方法是無效的,比如showImageOnLoading, showImageForEmptyUri等,

displayImage()載入圖片

接下來我們就來看看網路圖片載入的另一個方法displayImage(),程式碼如下

final ImageView mImageView = (ImageView) findViewById(R.id.image);  String imageUrl = "https://lh6.googleusercontent.com/-55osAWw3x0Q/URquUtcFr5I/AAAAAAAAAbs/rWlj1RUKrYI/s1024/A%252520Photographer.jpg";    //顯示圖片的配置  DisplayImageOptions options = new DisplayImageOptions.Builder()    .showImageOnLoading(R.drawable.ic_stub)    .showImageOnFail(R.drawable.ic_error)    .cacheInMemory(true)    .cacheOnDisk(true)    .bitmapConfig(Bitmap.Config.RGB_565)    .build();    ImageLoader.getInstance().displayImage(imageUrl, mImageView, options);

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

這個方法使用起來比較方便,而且使用displayImage()方法 他會根據控制元件的大小和imageScaleType來自動裁剪圖片,我們修改下MyApplication,開啟Log列印
public class MyApplication extends Application @Override public void onCreate() {  super.onCreate();  //建立預設的ImageLoader配置引數  ImageLoaderConfiguration configuration = new ImageLoaderConfiguration.Builder(this)  .writeDebugLogs() //列印log資訊  .build();      //Initialize ImageLoader with configuration.  ImageLoader.getInstance().init(configuration); }}
我們來看下圖片載入的Log資訊

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

第二條資訊顯示我們載入的圖片來源於網路

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

第四條顯示圖片加入到了記憶體快取中,我這裡沒有加入到sd卡中,所以沒有加入檔案快取的Log

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

imageLoader.displayImage(imageUrl, mImageView, options, new SimpleImageLoadingListener(), new ImageLoadingProgressListener() {      @Override   public void onProgressUpdate(String imageUri, View view, int current,     int total) {       }  });
由於displayImage()方法中帶ImageLoadingProgressListener引數的方法都有帶ImageLoadingListener引數,所以我這裡直接new 一個SimpleImageLoadingListener,然後我們就可以在回撥方法onProgressUpdate()得到圖片的載入進度。

載入其他來源的圖片

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

//顯示圖片的配置  DisplayImageOptions options = new DisplayImageOptions.Builder()    .showImageOnLoading(R.drawable.ic_stub)    .showImageOnFail(R.drawable.ic_error)    .cacheInMemory(true)    .cacheOnDisk(true)    .bitmapConfig(Bitmap.Config.RGB_565)    .build();    final ImageView mImageView = (ImageView) findViewById(R.id.image);  String imagePath = "/mnt/sdcard/image.png";  String imageUrl = Scheme.FILE.wrap(imagePath);  //  String imageUrl = "http://img.my.csdn.net/uploads/201309/01/1378037235_7476.jpg";    imageLoader.displayImage(imageUrl, mImageView, options);
當然還有來源於Content provider,drawable,assets中,使用的時候也很簡單,我們只需要給每個圖片來源的地方加上Scheme包裹起來(Content provider除外),然後當做圖片的url傳遞到imageLoader中,Universal-Image-Loader框架會根據不同的Scheme獲取到輸入流
//圖片來源於Content provider  String contentprividerUrl = "content://media/external/audio/albumart/13";    //圖片來源於assets  String assetsUrl = Scheme.ASSETS.wrap("image.png");    //圖片來源於  String drawableUrl = Scheme.DRAWABLE.wrap("R.drawable.image");
GirdView,ListView載入圖片

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

listView.setOnScrollListener(new PauseOnScrollListener(imageLoader, pauseOnScroll, pauseOnFling));  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設定的值來裁剪圖片

今天就給大家分享到這裡,有不明白的地方在下面留言,我會盡量為大家解答的,下一篇文章我將繼續更深入的分析這個框架,希望大家繼續關注!