Android Universal Image Loader 使用

Android Universal Image Loader 使用
1. 功能介紹1.1 Android Universal Image Loader

Android Universal Image Loader 是一個強大的、可高度定製的圖片緩衝，本文簡稱為UIL。
簡單的說 UIL 就做了一件事——擷取圖片並顯示在相應的控制項上。

1.2 基本使用1.2.1 初始化

添加完依賴後在Application或Activity中初始化ImageLoader，如下：

public class YourApplication extends Application {    @Override    public void onCreate() {        super.onCreate();        ImageLoaderConfiguration configuration = new ImageLoaderConfiguration.Builder(this)            // 添加你的配置需求            .build();        ImageLoader.getInstance().init(configuration);    }}

其中 configuration 表示ImageLoader的配置資訊，可包括圖片最大尺寸、線程池、緩衝、下載器、解碼器等等。

ImageLoaderConfiguration是圖片載入器ImageLoader的配置參數，使用了建造者模式，這裡是直接使用了createDefault()方法建立一個預設的ImageLoaderConfiguration，當然我們還可以自己設定ImageLoaderConfiguration，設定如下

 

 

[java] view plaincopy

1. File cacheDir = StorageUtils.getCacheDirectory(context);
2. ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context)
3. .memoryCacheExtraOptions(480, 800) // default = device screen dimensions
4. .diskCacheExtraOptions(480, 800, CompressFormat.JPEG, 75, null)
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使用單例模式。

    
    1.2.2 Manifest 配置

                        ……    

    添加網路許可權。如果允許磁碟緩衝，需要添加寫外設的許可權。

    1.2.3 下載顯示圖片

    下載圖片，解析為 Bitmap 並在 ImageView 中顯示。

    imageLoader.displayImage(imageUri, imageView);

    下載圖片，解析為 Bitmap 傳遞給回調介面。

    imageLoader.loadImage(imageUri, new SimpleImageLoadingListener() {    @Override    public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {        // 圖片處理    }});

    以上是簡單使用，更複雜 API 見本文詳細設計。

     

     

    2. 基本使用

     

     

    2.1 loadimage()載入圖片

     

     

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

     

    [java] view plaincopy
    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 plaincopy
        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 plaincopy
            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(100, 100);
            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 plaincopy
                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 plaincopy
                    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(100, 100);
                    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等，

                         

                         

                        2.2 displayImage()載入圖片

                         

                         

                        接下來我們就來看看網狀圖片載入的另一個方法displayImage()，代碼如下

                         

                        [java] view plaincopy
                        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 plaincopy
                            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 plaincopy
                                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()得到圖片的載入進度。
                                   

                                    

                                    

                                   3. 載入其他來源的圖片

                                    

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

                                    

                                   [java] view plaincopy
                                   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 = "http://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 plaincopy
                                       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");
                                          
                                          4 .GirdView,ListView載入圖片

                                           

                                           

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

                                           

                                          [java] view plaincopy
                                          1. listView.setOnScrollListener(new PauseOnScrollListener(imageLoader, pauseOnScroll, pauseOnFling));
                                          2. gridView.setOnScrollListener(new PauseOnScrollListener(imageLoader, pauseOnScroll, pauseOnFling)); 第一個參數就是我們的圖片載入對象ImageLoader, 第二個是控制是否在滑動過程中暫停載入圖片，如果需要暫停傳true就行了，第三個參數控制猛的滑動介面的時候圖片是否載入
                                             

                                              

                                             參考：

                                             http://blog.csdn.net/xiaanming/article/details/26810303 Android 開源架構Universal-Image-Loader完全解（一）--- 基本介紹及使用

                                             http://www.codekk.com/open-source-project-analysis/detail/Android/huxian99/Android%20Universal%20Image%20Loader%20%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90 Android Universal Image Loader 源碼分析