1. 程式人生 > >圖片載入三方庫ImageLoader,Fresco,Picasso,Glide

圖片載入三方庫ImageLoader,Fresco,Picasso,Glide

1.影象_UIL

  • 使用步驟:

    1. 新增依賴: compile ‘com.nostra13.universalimageloader:universal-image-loader:1.9.5’
    2. 新增許可權:

      - 

      - 

    3. 在Application或Activity中進行初始化配置

      // ImageLoaderConfiguration 詳細配置
      File cacheDir = StorageUtils.getOwnCacheDirectory(getApplicationContext(), "imageloader/Cache"); // 自定義快取資料夾
      ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context)
           .memoryCacheExtraOptions(480, 800) // 指定快取到記憶體時圖片的大小,預設是螢幕尺寸的長寬
           .diskCacheExtraOptions(480, 800, null) // 指定快取到硬碟時圖片的大小,並不建議使用
           .taskExecutor(new Executor()) // 自定義一個執行緒來載入和顯示圖片
           .taskExecutorForCachedImages(new Executor())// 自定義一個執行緒來快取圖片
           .threadPoolSize(3) // default, 指定執行緒池大小
           .threadPriority(Thread.NORM_PRIORITY - 2) // default ,指定執行緒優先順序 
           .tasksProcessingOrder(QueueProcessingType.FIFO) // default , 指定載入顯示圖片的任務佇列的型別
           .denyCacheImageMultipleSizesInMemory() // 禁止在記憶體中快取同一張圖片的多個尺寸型別
           .memoryCache(new LruMemoryCache(2 * 1024 * 1024)) // 指定記憶體快取的大小,預設值為1/8 應用的最大可用記憶體
           .memoryCacheSize(2 * 1024 * 1024) 
           .memoryCacheSizePercentage(13) // default
           .diskCache(new UnlimitedDiskCache(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() // 是否顯示Log
           .build();
      
      // ImageLoaderConfiguration 簡單初始化
      ImageLoaderConfiguration configuration = ImageLoaderConfiguration.createDefault(this);
      // 初始化配置
      ImageLoader.getInstance().init(configuration);  
      
    4. DisplayImageOptions 引數詳解:

      DisplayImageOptions options = new DisplayImageOptions.Builder()
          .showImageOnLoading(R.drawable.ic_stub) // 圖片正在載入時顯示的圖片資源ID
          .showImageForEmptyUri(R.drawable.ic_empty) // URI為空時顯示的圖片資源ID
          .showImageOnFail(R.drawable.ic_error) // 圖片載入失敗時顯示的圖片資源ID
          .resetViewBeforeLoading(false)  // default 圖片在下載前是否重置,復位
          .delayBeforeLoading(1000) // 圖片開始載入前的延時.預設是0
          .cacheInMemory(false) // default , 是否快取在記憶體中, 預設不快取
          .cacheOnDisk(false) // default , 是否快取在硬碟 , 預設不快取
          .preProcessor(new BitmapProcessor) // 設定圖片快取在記憶體前的圖片處理器
          .postProcessor(new BitmapProcessor) // 設定圖片在快取到記憶體以後 , 顯示在介面之前的圖片處理器
          .extraForDownloader(...) // 為圖片下載設定輔助引數
          .considerExifParams(false) // default , 設定是否考慮JPEG圖片的EXIF引數資訊,預設不考慮
          .imageScaleType(ImageScaleType.IN_SAMPLE_POWER_OF_2) // default , 指定圖片縮放的方式,ListView/GridView/Gallery推薦使用此預設值
          .bitmapConfig(Bitmap.Config.ARGB_8888) // default , 指定圖片的質量,預設是 ARGB_8888
          .decodingOptions(...) // 指定圖片的解碼方式
          .displayer(new SimpleBitmapDisplayer()) // default , 設定圖片顯示的方式,用於自定義
          .handler(new Handler()) // default ,設定圖片顯示的方式和ImageLoadingListener的監聽, 用於自定義
          .build();
      
    5. 顯示圖片的方法:

      ImageLoader.getInstance().loadImage(String uri, ImageLoadingListener listener)  
      
          displayImage(String uri, ImageView imageView)
          displayImage(String uri, ImageView imageView, DisplayImageOptions options)
          displayImage(String uri, ImageView imageView, DisplayImageOptions options,
              ImageLoadingListener listener, ImageLoadingProgressListener progressListener) 
      
    6. 特殊用法:

      1. 顯示圓形圖片.使用該效果,必須顯式指定圖片的寬高

        DisplayImageOptions options = new DisplayImageOptions.Builder()
                .displayer(new CircleBitmapDisplayer())
                .build();
        
      2. 顯示圓角圖片.使用該效果,必須顯式指定圖片的寬高

        DisplayImageOptions options = new DisplayImageOptions.Builder()
                .displayer(new RoundedBitmapDisplayer(90))
                .build();
        
      3. 顯示圓角縮放圖片.使用該效果,必須顯式指定圖片的寬高

        DisplayImageOptions options = new DisplayImageOptions.Builder()
                .displayer(new RoundedVignetteBitmapDisplayer(90,180))
                .build();
        
      4. 顯示漸顯圖片

        DisplayImageOptions options = new DisplayImageOptions.Builder()
                .displayer(new FadeInBitmapDisplayer(3000))
                .build();
        

2.影象_Fresco

  • 使用步驟

    1. 新增依賴: compile ‘com.facebook.fresco:fresco:0.9.0+’
    2. 新增許可權

      <uses-permission android:name="android.permission.INTERNET"/>
      
    3. 在Application初始化或在Activity 的setContentView()方法之前,進行初始化

      Fresco.initialize(this);
      
    4. 在佈局檔案中新增圖片控制元件.寬高必須顯示指定,否則圖片無法顯示.

      <com.facebook.drawee.view.SimpleDraweeView
          android:id="@+id/my_image_view"
          android:layout_width="200dp"
          android:layout_height="200dp"
          fresco:placeholderImage="@mipmap/ic_launcher" />
      
    5. 在Java程式碼中指定圖片的路徑.顯示圖片.SimpleDraweeView接收的路徑引數為URI,所以需要一次轉換.

      Uri uri = Uri.parse(URL_IMG2);
      SimpleDraweeView view = (SimpleDraweeView) findViewById(R.id.my_image_view);
      view.setImageURI(uri);
      
    6. XML方式配置引數.除圖片地址以外,其他所有顯示選項都可以在佈局檔案中指定

      <com.facebook.drawee.view.SimpleDraweeView
          android:id="@+id/my_image_view"
          android:layout_width="20dp"
          android:layout_height="20dp"
          fresco:actualImageScaleType="focusCrop"// 圖片的縮放方式.
          fresco:backgroundImage="@color/blue" //背景圖.不支援縮放.XML僅能指定一張背景圖.如果使用Java程式碼指定的話,可以指定多個背景,顯示方式類似FrameLayout,多個背景圖按照順序一級一級層疊上去.
          fresco:fadeDuration="300" // 漸顯圖片的時間
          fresco:failureImage="@drawable/error" // 圖片載入失敗顯示的圖片
          fresco:failureImageScaleType="centerInside" //// 圖片載入失敗顯示的圖片的縮放型別
          fresco:overlayImage="@drawable/watermark" // 層疊圖,最後疊加在圖片之上.不支援縮放.XML僅能指定一張.如果使用Java程式碼指定的話,可以指定多個,顯示方式類似FrameLayout,多個圖按照順序一級一級層疊上去.
          fresco:placeholderImage="@color/wait_color"  // 圖片載入成功之前顯示的佔位圖
          fresco:placeholderImageScaleType="fitCenter" // 圖片載入成功之前顯示的佔位圖的縮放型別
          fresco:pressedStateOverlayImage="@color/red" // 設定按壓狀態下的層疊圖.不支援縮放.
          fresco:progressBarAutoRotateInterval="1000" // 進度條圖片旋轉顯示時長
          fresco:progressBarImage="@drawable/progress_bar" // 進度條圖片
          fresco:progressBarImageScaleType="centerInside" //進度條圖片的縮放型別
          fresco:retryImage="@drawable/retrying" // 當圖片載入失敗的時候,顯示該圖片提示使用者點選重新載入圖片
          fresco:retryImageScaleType="centerCrop" // 提示圖片的縮放型別
          fresco:roundAsCircle="false" // 顯示圓形圖片
          fresco:roundBottomLeft="false" // roundedCornerRadius屬性設定後,四個角都會有圓角,如果左下角不需要設定為false.
          fresco:roundBottomRight="true" // roundedCornerRadius屬性設定後,四個角都會有圓角,如果右下角不需要設定為false.
          fresco:roundTopLeft="true" // roundedCornerRadius屬性設定後,四個角都會有圓角,如果左上角不需要設定為false.
          fresco:roundTopRight="false" // roundedCornerRadius屬性設定後,四個角都會有圓角,如果右上角不需要設定為false.
          fresco:roundWithOverlayColor="@color/corner_color" // 設定圖片圓角後空出區域的顏色.如示例圖中的紅色部分
          fresco:roundedCornerRadius="1dp" // 設定圖片圓角角度,設定該屬性後四個角都會生效
          fresco:roundingBorderColor="@color/border_color" // 設定圓角後,邊框的顏色.
          fresco:roundingBorderWidth="2dp" /> // 設定圓角後,外邊框的寬高
      

      Logo

    7. Java程式碼配置引數.

          GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder
                  .newInstance(getResources())
                  .setRetryImage(getResources().getDrawable(R.mipmap.ic_launcher))
                  .build();
      
          imageivew.setHierarchy(hierarchy);
      
    8. 特殊用法:

      1. 顯示漸進式JPEG圖片

        ProgressiveJpegConfig pjpegConfig = new ProgressiveJpegConfig() {
            @Override
            // 返回下一個需要解碼的掃描次數
            public int getNextScanNumberToDecode(int scanNumber) {
                return scanNumber + 2;
            }
        
            // 確定多少個掃描次數之後的圖片才能開始顯示
            public QualityInfo getQualityInfo(int scanNumber) {
                boolean isGoodEnough = (scanNumber >= 5);
                return ImmutableQualityInfo.of(scanNumber, isGoodEnough, false);
            }
        };
        // ImagePipelineConfig配置如何載入影象
        ImagePipelineConfig config = ImagePipelineConfig.newBuilder(this)
                .setProgressiveJpegConfig(pjpegConfig)
                .build();
        
        img_uri = Uri.parse(URL_IMG2);
        //  顯式地指定允許漸進式JPEG圖片載入
        ImageRequest request = ImageRequestBuilder
                .newBuilderWithSource(img_uri)
                .setProgressiveRenderingEnabled(true)
                .build();
        // 構建顯示圖片所用到的DraweeController
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setImageRequest(request)
                .setOldController(simpleDraweeView.getController())
                .build();
        
        simpleDraweeView.setController(controller);
        
      2. 顯示GIF圖片.Fresco 支援 GIF 和 WebP 格式的動畫圖片.如果你希望圖片下載完之後自動播放,同時,當View從螢幕移除時,停止播放,只需要在 image request 中簡單設定,示例程式碼:

        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setUri(URL_GIF)
                .setAutoPlayAnimations(true)
                .build();
        simpleDraweeView.setController(controller);
        

3.影象_Picasso

  • 使用步驟

    1. 新增依賴 compile ‘com.squareup.picasso:picasso:2.5.2’
    2. 新增許可權:

      <uses-permission android:name="android.permission.INTERNET"/>
      
    3. 載入圖片,示例程式碼:

      Picasso
              .with(this)// 指定Context
              .load(URL_IMG3) //指定圖片URL
              .placeholder(R.mipmap.ic_launcher) //指定圖片未載入成功前顯示的圖片
              .error(R.mipmap.ic_launcher)// 指定圖片載入失敗顯示的圖片
              .resize(300, 300)// 指定圖片的尺寸
              .fit()// 指定圖片縮放型別為fit
              .centerCrop()// 指定圖片縮放型別為centerCrop
              .centerInside()// 指定圖片縮放型別為centerInside
              .memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE)// 指定記憶體快取策略
              .priority(Picasso.Priority.HIGH)// 指定優先順序
              .into(imageView); // 指定顯示圖片的ImageView
      
    4. 顯示圓形圖片.示例程式碼:

          // 自定義Transformation
          Transformation transform = new Transformation() {
              @Override
              public Bitmap transform(Bitmap source) {
                  int size = Math.min(source.getWidth(), source.getHeight());
                  int x = (source.getWidth() - size) / 2;
                  int y = (source.getHeight() - size) / 2;
                  Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
                  if (squaredBitmap != source) {
                      source.recycle();
                  }
                  Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());
                  Canvas canvas = new Canvas(bitmap);
                  Paint paint = new Paint();
                  BitmapShader shader = new BitmapShader(squaredBitmap,
                          BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
                  paint.setShader(shader);
                  paint.setAntiAlias(true);
                  float r = size / 2f;
                  canvas.drawCircle(r, r, r, paint);
                  squaredBitmap.recycle();
                  return bitmap;
              }
      
              @Override
              public String key() {
                  return "circle";
              }
          };
          Picasso
                  .with(this)// 指定Context
                  .load(URL_IMG2) //指定圖片URL
                  .transform(transform) // 指定圖片轉換器
                  .into(imageView); // 指定顯示圖片的ImageView
      
    5. 顯示圓角圖片

      class RoundedTransformation implements com.squareup.picasso.Transformation {
          private final int radius;
          private final int margin;  // dp
      
          // radius is corner radii in dp
          // margin is the board in dp
          public RoundedTransformation(final int radius, final int margin) {
              this.radius = radius;
              this.margin = margin;
          }
      
          @Override
          public Bitmap transform(final Bitmap source) {
              final Paint paint = new Paint();
              paint.setAntiAlias(true);
              paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
      
              Bitmap output = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
              Canvas canvas = new Canvas(output);
              canvas.drawRoundRect(new RectF(margin, margin, source.getWidth() - margin, source.getHeight() - margin), radius, radius, paint);
      
              if (source != output) {
                  source.recycle();
              }
      
              return output;
          }
      
          @Override
          public String key() {
              return "rounded(radius=" + radius + ", margin=" + margin + ")";
          }
      }
      Picasso
              .with(this)// 指定Context
              .load(URL_IMG2) //指定圖片URL
              .transform(new RoundedTransformation(360,0)) // 指定圖片轉換器
              .into(imageView); // 指定顯示圖片的ImageView
      

4.影象_Glide

  • 使用步驟

    1. 新增依賴 compile ‘com.github.bumptech.glide:glide:3.7.0’ , 同時還依賴於supportV4.如果沒有請自行新增
    2. 新增許可權:

      <uses-permission android:name="android.permission.INTERNET"/>
      
    3. 載入圖片.示例程式碼:

      Glide
              .with(this) // 指定Context
              .load(URL_GIF)// 指定圖片的URL
              .placeholder(R.mipmap.ic_launcher)// 指定圖片未成功載入前顯示的圖片
              .error(R.mipmap.ic_launcher)// 指定圖片載入失敗顯示的圖片
              .override(300, 300)//指定圖片的尺寸
              .fitCenter()//指定圖片縮放型別為fitCenter
              .centerCrop()// 指定圖片縮放型別為centerCrop
              .skipMemoryCache(true)// 跳過記憶體快取
              .diskCacheStrategy(DiskCacheStrategy.NONE)//跳過磁碟快取
              .diskCacheStrategy(DiskCacheStrategy.SOURCE)//僅僅只快取原來的全解析度的影象
              .diskCacheStrategy(DiskCacheStrategy.RESULT)//僅僅快取最終的影象
              .diskCacheStrategy(DiskCacheStrategy.ALL)//快取所有版本的影象
              .priority(Priority.HIGH)//指定優先順序.Glide 將會用他們作為一個準則,並儘可能的處理這些請求,但是它不能保證所有的圖片都會按照所要求的順序載入。優先順序排序:IMMEDIATE > HIGH > NORMAL > LOW
              .into(imageView);//指定顯示圖片的ImageView
      
    4. 顯示圓形圖片

      class GlideCircleTransform extends BitmapTransformation {
          public GlideCircleTransform(Context context) {
              super(context);
          }
      
          @Override
          protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
              return circleCrop(pool, toTransform);
          }
      
          private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
              if (source == null) return null;
      
              int size = Math.min(source.getWidth(), source.getHeight());
              int x = (source.getWidth() - size) / 2;
              int y = (source.getHeight() - size) / 2;
      
              // TODO this could be acquired from the pool too
              Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);
      
              Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);
              if (result == null) {
                  result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
              }
      
              Canvas canvas = new Canvas(result);
              Paint paint = new Paint();
              paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
              paint.setAntiAlias(true);
              float r = size / 2f;
              canvas.drawCircle(r, r, r, paint);
              return result;
          }
      
          @Override
          public String getId() {
              return getClass().getName();
          }
      }
      
      Glide
              .with(this) // 指定Context
              .load(URL_GIF)// 指定圖片的URL
              .transform(new GlideCircleTransform(this)) // 指定自定義BitmapTransformation
              .into(imageView);//指定顯示圖片的ImageView
      
    5. 顯示圓角圖片

      class GlideRoundTransform extends BitmapTransformation {
      
          private static float radius = 0f;
      
          public GlideRoundTransform(Context context) {
              this(context, 4);
          }
      
          public GlideRoundTransform(Context context, int dp) {
              super(context);
              this.radius = Resources.getSystem().getDisplayMetrics().density * dp;
          }
      
          @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
              return roundCrop(pool, toTransform);
          }
      
          private static Bitmap roundCrop(BitmapPool pool, Bitmap source) {
              if (source == null) return null;
      
              Bitmap result = pool.get(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
              if (result == null) {
                  result = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
              }
      
              Canvas canvas = new Canvas(result);
              Paint paint = new Paint();
              paint.setShader(new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
              paint.setAntiAlias(true);
              RectF rectF = new RectF(0f, 0f, source.getWidth(), source.getHeight());
              canvas.drawRoundRect(rectF, radius, radius, paint);
              return result;
          }
      
          @Override public String getId() {
              return getClass().getName() + Math.round(radius);
          }
      }
      
      Glide
              .with(this) // 指定Context
              .load(URL_GIF)// 指定圖片的URL
              .transform(new GlideRoundTransform(this,30)) // 指定自定義BitmapTransformation
              .into(imageView);//指定顯示圖片的ImageView
      
    6. 更改Glide預設配置的步驟:

      1. 建立一個GlideModule的實現類,並在其中更改自己需要的設定.示例程式碼:

        public class SimpleGlideModule implements GlideModule {
            @Override
            public void applyOptions(Context context, GlideBuilder builder) {
                // 更改Bitmap圖片壓縮質量為8888,預設為565
                builder.setDecodeFormat(DecodeFormat.PREFER_ARGB_8888);
            }
        
            @Override
            public void registerComponents(Context context, Glide glide) {
                // todo
            }
        }
        
      2. 在manifet/Application中新增一個meta-data節點.name值為剛剛建立的GlideModule實現類的完整包名+類名,value值為GlideModule.示例程式碼:

        <meta-data
            android:name="com.alpha.glidedemo.SimpleGlideModule"
            android:value="GlideModule" />
        
      3. 之後Glide載入圖片的時候將會按照新的設定載入.

影象庫對比

  • 快速載入圖片推薦Glide
  • 對圖片質量要求較高推薦Picasso
  • 如果應用載入的圖片很多,推薦Fresco > Glide > Picasso