图片加载三方库ImageLoader,Fresco,Picasso,Glide

分手后的思念是犯贱 2022-05-25 01:17 302阅读 0赞

1.图像_UIL

  • 主页: https://github.com/nostra13/Android-Universal-Image-Loader

  • 使用步骤:

    1. 添加依赖: compile ‘com.nostra13.universalimageloader:universal-image-loader:1.9.5’

    2. 添加权限:

      -　

      -　

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

      1. // ImageLoaderConfiguration 详细配置
      2. File cacheDir = StorageUtils.getOwnCacheDirectory(getApplicationContext(), "imageloader/Cache"); // 自定义缓存文件夹
      3. ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context)
      4.      .memoryCacheExtraOptions(480, 800) // 指定缓存到内存时图片的大小,默认是屏幕尺寸的长宽
      5.      .diskCacheExtraOptions(480, 800, null) // 指定缓存到硬盘时图片的大小,并不建议使用
      6.      .taskExecutor(new Executor()) // 自定义一个线程来加载和显示图片
      7.      .taskExecutorForCachedImages(new Executor())// 自定义一个线程来缓存图片
      8.      .threadPoolSize(3) // default, 指定线程池大小
      9.      .threadPriority(Thread.NORM_PRIORITY - 2) // default ,指定线程优先级 
      10.      .tasksProcessingOrder(QueueProcessingType.FIFO) // default , 指定加载显示图片的任务队列的类型
      11.      .denyCacheImageMultipleSizesInMemory() // 禁止在内存中缓存同一张图片的多个尺寸类型
      12.      .memoryCache(new LruMemoryCache(2 * 1024 * 1024)) // 指定内存缓存的大小,默认值为1/8 应用的最大可用内存
      13.      .memoryCacheSize(2 * 1024 * 1024) 
      14.      .memoryCacheSizePercentage(13) // default
      15.      .diskCache(new UnlimitedDiskCache(cacheDir)) // default , 指定硬盘缓存的地址
      16.      .diskCacheSize(50 * 1024 * 1024) // 指定硬盘缓存的大小
      17.      .diskCacheFileCount(100) // 指定硬盘缓存的文件个数
      18.      .diskCacheFileNameGenerator(new HashCodeFileNameGenerator()) // default , 指定硬盘缓存时文件名的生成器
      19.      .imageDownloader(new BaseImageDownloader(context)) // default , 指定图片下载器
      20.      .imageDecoder(new BaseImageDecoder()) // default , 指定图片解码器
      21.      .defaultDisplayImageOptions(DisplayImageOptions.createSimple()) // default , 指定图片显示的配置
      22.      .writeDebugLogs() // 是否显示Log
      23.      .build();
      25. // ImageLoaderConfiguration 简单初始化
      26. ImageLoaderConfiguration configuration = ImageLoaderConfiguration.createDefault(this);
      27. // 初始化配置
      28. ImageLoader.getInstance().init(configuration);

    4. DisplayImageOptions 参数详解:

      1. DisplayImageOptions options = new DisplayImageOptions.Builder()
      2.     .showImageOnLoading(R.drawable.ic_stub) // 图片正在加载时显示的图片资源ID
      3.     .showImageForEmptyUri(R.drawable.ic_empty) // URI为空时显示的图片资源ID
      4.     .showImageOnFail(R.drawable.ic_error) // 图片加载失败时显示的图片资源ID
      5.     .resetViewBeforeLoading(false)  // default 图片在下载前是否重置,复位
      6.     .delayBeforeLoading(1000) // 图片开始加载前的延时.默认是0
      7.     .cacheInMemory(false) // default , 是否缓存在内存中, 默认不缓存
      8.     .cacheOnDisk(false) // default , 是否缓存在硬盘 , 默认不缓存
      9.     .preProcessor(new BitmapProcessor) // 设置图片缓存在内存前的图片处理器
      10.     .postProcessor(new BitmapProcessor) // 设置图片在缓存到内存以后 , 显示在界面之前的图片处理器
      11.     .extraForDownloader(...) // 为图片下载设置辅助参数
      12.     .considerExifParams(false) // default , 设置是否考虑JPEG图片的EXIF参数信息,默认不考虑
      13.     .imageScaleType(ImageScaleType.IN_SAMPLE_POWER_OF_2) // default , 指定图片缩放的方式,ListView/GridView/Gallery推荐使用此默认值
      14.     .bitmapConfig(Bitmap.Config.ARGB_8888) // default , 指定图片的质量,默认是 ARGB_8888
      15.     .decodingOptions(...) // 指定图片的解码方式
      16.     .displayer(new SimpleBitmapDisplayer()) // default , 设置图片显示的方式,用于自定义
      17.     .handler(new Handler()) // default ,设置图片显示的方式和ImageLoadingListener的监听, 用于自定义
      18.     .build();

    5. 显示图片的方法:

      1. ImageLoader.getInstance().loadImage(String uri, ImageLoadingListener listener)  
      3.     displayImage(String uri, ImageView imageView)
      4.     displayImage(String uri, ImageView imageView, DisplayImageOptions options)
      5.     displayImage(String uri, ImageView imageView, DisplayImageOptions options,
      6.         ImageLoadingListener listener, ImageLoadingProgressListener progressListener)

    6. 特殊用法:

      1. 显示圆形图片.使用该效果,必须显式指定图片的宽高

        1. DisplayImageOptions options = new DisplayImageOptions.Builder()
        2.         .displayer(new CircleBitmapDisplayer())
        3.         .build();

      2. 显示圆角图片.使用该效果,必须显式指定图片的宽高

        1. DisplayImageOptions options = new DisplayImageOptions.Builder()
        2.         .displayer(new RoundedBitmapDisplayer(90))
        3.         .build();

      3. 显示圆角缩放图片.使用该效果,必须显式指定图片的宽高

        1. DisplayImageOptions options = new DisplayImageOptions.Builder()
        2.         .displayer(new RoundedVignetteBitmapDisplayer(90,180))
        3.         .build();

      4. 显示渐显图片

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

2.图像_Fresco

  • 主页: https://github.com/facebook/fresco
  • 中文文档: http://fresco-cn.org/docs/index.html

  • 使用步骤

    1. 添加依赖: compile ‘com.facebook.fresco:fresco:0.9.0+’

    2. 添加权限

      1. <uses-permission android:name="android.permission.INTERNET"/>

    3. 在Application初始化或在Activity 的setContentView()方法之前，进行初始化

      1. Fresco.initialize(this);

    4. 在布局文件中添加图片控件.宽高必须显示指定,否则图片无法显示.

      1. <com.facebook.drawee.view.SimpleDraweeView
      2.     android:id="@+id/my_image_view"
      3.     android:layout_width="200dp"
      4.     android:layout_height="200dp"
      5.     fresco:placeholderImage="@mipmap/ic_launcher" />

    5. 在Java代码中指定图片的路径.显示图片.SimpleDraweeView接收的路径参数为URI,所以需要一次转换.

      1. Uri uri = Uri.parse(URL_IMG2);
      2. SimpleDraweeView view = (SimpleDraweeView) findViewById(R.id.my_image_view);
      3. view.setImageURI(uri);

    6. XML方式配置参数.除图片地址以外,其他所有显示选项都可以在布局文件中指定

      1. <com.facebook.drawee.view.SimpleDraweeView
      2.     android:id="@+id/my_image_view"
      3.     android:layout_width="20dp"
      4.     android:layout_height="20dp"
      5.     fresco:actualImageScaleType="focusCrop"// 图片的缩放方式.
      6.     fresco:backgroundImage="@color/blue" //背景图.不支持缩放.XML仅能指定一张背景图.如果使用Java代码指定的话,可以指定多个背景,显示方式类似FrameLayout,多个背景图按照顺序一级一级层叠上去.
      7.     fresco:fadeDuration="300" // 渐显图片的时间
      8.     fresco:failureImage="@drawable/error" // 图片加载失败显示的图片
      9.     fresco:failureImageScaleType="centerInside"  图片加载失败显示的图片的缩放类型
      10.     fresco:overlayImage="@drawable/watermark" // 层叠图,最后叠加在图片之上.不支持缩放.XML仅能指定一张.如果使用Java代码指定的话,可以指定多个,显示方式类似FrameLayout,多个图按照顺序一级一级层叠上去.
      11.     fresco:placeholderImage="@color/wait_color"  // 图片加载成功之前显示的占位图
      12.     fresco:placeholderImageScaleType="fitCenter" // 图片加载成功之前显示的占位图的缩放类型
      13.     fresco:pressedStateOverlayImage="@color/red" // 设置按压状态下的层叠图.不支持缩放.
      14.     fresco:progressBarAutoRotateInterval="1000" // 进度条图片旋转显示时长
      15.     fresco:progressBarImage="@drawable/progress_bar" // 进度条图片
      16.     fresco:progressBarImageScaleType="centerInside" //进度条图片的缩放类型
      17.     fresco:retryImage="@drawable/retrying" // 当图片加载失败的时候,显示该图片提示用户点击重新加载图片
      18.     fresco:retryImageScaleType="centerCrop" // 提示图片的缩放类型
      19.     fresco:roundAsCircle="false" // 显示圆形图片
      20.     fresco:roundBottomLeft="false" // roundedCornerRadius属性设置后,四个角都会有圆角,如果左下角不需要设置为false.
      21.     fresco:roundBottomRight="true" // roundedCornerRadius属性设置后,四个角都会有圆角,如果右下角不需要设置为false.
      22.     fresco:roundTopLeft="true" // roundedCornerRadius属性设置后,四个角都会有圆角,如果左上角不需要设置为false.
      23.     fresco:roundTopRight="false" // roundedCornerRadius属性设置后,四个角都会有圆角,如果右上角不需要设置为false.
      24.     fresco:roundWithOverlayColor="@color/corner_color" // 设置图片圆角后空出区域的颜色.如示例图中的红色部分
      25.     fresco:roundedCornerRadius="1dp" // 设置图片圆角角度,设置该属性后四个角都会生效
      26.     fresco:roundingBorderColor="@color/border_color" // 设置圆角后,边框的颜色.
      27.     fresco:roundingBorderWidth="2dp" /> // 设置圆角后,外边框的宽高

      Logo

    7. Java代码配置参数.

      1. GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder
      2.             .newInstance(getResources())
      3.             .setRetryImage(getResources().getDrawable(R.mipmap.ic_launcher))
      4.             .build();
      6.     imageivew.setHierarchy(hierarchy);

    8. 特殊用法:

      1. 显示渐进式JPEG图片

        1. ProgressiveJpegConfig pjpegConfig = new ProgressiveJpegConfig() {
        2.     @Override
        3.     // 返回下一个需要解码的扫描次数
        4.     public int getNextScanNumberToDecode(int scanNumber) {
        5.         return scanNumber + 2;
        6.     }
        8.     // 确定多少个扫描次数之后的图片才能开始显示
        9.     public QualityInfo getQualityInfo(int scanNumber) {
        10.         boolean isGoodEnough = (scanNumber >= 5);
        11.         return ImmutableQualityInfo.of(scanNumber, isGoodEnough, false);
        12.     }
        13. };
        14. // ImagePipelineConfig配置如何加载图像
        15. ImagePipelineConfig config = ImagePipelineConfig.newBuilder(this)
        16.         .setProgressiveJpegConfig(pjpegConfig)
        17.         .build();
        19. img_uri = Uri.parse(URL_IMG2);
        20. //  显式地指定允许渐进式JPEG图片加载
        21. ImageRequest request = ImageRequestBuilder
        22.         .newBuilderWithSource(img_uri)
        23.         .setProgressiveRenderingEnabled(true)
        24.         .build();
        25. // 构建显示图片所用到的DraweeController
        26. DraweeController controller = Fresco.newDraweeControllerBuilder()
        27.         .setImageRequest(request)
        28.         .setOldController(simpleDraweeView.getController())
        29.         .build();
        31. simpleDraweeView.setController(controller);

      2. 显示GIF图片.Fresco 支持 GIF 和 WebP 格式的动画图片.如果你希望图片下载完之后自动播放，同时，当View从屏幕移除时，停止播放，只需要在 image request 中简单设置，示例代码:

        1. DraweeController controller = Fresco.newDraweeControllerBuilder()
        2.         .setUri(URL_GIF)
        3.         .setAutoPlayAnimations(true)
        4.         .build();
        5. simpleDraweeView.setController(controller);

3.图像_Picasso

  • 主页: https://github.com/square/picasso

  • 使用步骤

    1. 添加依赖 compile ‘com.squareup.picasso:picasso:2.5.2’

    2. 添加权限:

      1. <uses-permission android:name="android.permission.INTERNET"/>

    3. 加载图片,示例代码:

      1. Picasso
      2.         .with(this)// 指定Context
      3.         .load(URL_IMG3) //指定图片URL
      4.         .placeholder(R.mipmap.ic_launcher) //指定图片未加载成功前显示的图片
      5.         .error(R.mipmap.ic_launcher)// 指定图片加载失败显示的图片
      6.         .resize(300, 300)// 指定图片的尺寸
      7.         .fit()// 指定图片缩放类型为fit
      8.         .centerCrop()// 指定图片缩放类型为centerCrop
      9.         .centerInside()// 指定图片缩放类型为centerInside
      10.         .memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE)// 指定内存缓存策略
      11.         .priority(Picasso.Priority.HIGH)// 指定优先级
      12.         .into(imageView); // 指定显示图片的ImageView

    4. 显示圆形图片.示例代码:

      1. // 自定义Transformation
      2.     Transformation transform = new Transformation() {
      3.         @Override
      4.         public Bitmap transform(Bitmap source) {
      5.             int size = Math.min(source.getWidth(), source.getHeight());
      6.             int x = (source.getWidth() - size) / 2;
      7.             int y = (source.getHeight() - size) / 2;
      8.             Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
      9.             if (squaredBitmap != source) {
      10.                 source.recycle();
      11.             }
      12.             Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());
      13.             Canvas canvas = new Canvas(bitmap);
      14.             Paint paint = new Paint();
      15.             BitmapShader shader = new BitmapShader(squaredBitmap,
      16.                     BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
      17.             paint.setShader(shader);
      18.             paint.setAntiAlias(true);
      19.             float r = size / 2f;
      20.             canvas.drawCircle(r, r, r, paint);
      21.             squaredBitmap.recycle();
      22.             return bitmap;
      23.         }
      25.         @Override
      26.         public String key() {
      27.             return "circle";
      28.         }
      29.     };
      30.     Picasso
      31.             .with(this)// 指定Context
      32.             .load(URL_IMG2) //指定图片URL
      33.             .transform(transform) // 指定图片转换器
      34.             .into(imageView); // 指定显示图片的ImageView

    5. 显示圆角图片

      1. class RoundedTransformation implements com.squareup.picasso.Transformation {
      2.     private final int radius;
      3.     private final int margin;  // dp
      5.     // radius is corner radii in dp
      6.     // margin is the board in dp
      7.     public RoundedTransformation(final int radius, final int margin) {
      8.         this.radius = radius;
      9.         this.margin = margin;
      10.     }
      12.     @Override
      13.     public Bitmap transform(final Bitmap source) {
      14.         final Paint paint = new Paint();
      15.         paint.setAntiAlias(true);
      16.         paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
      18.         Bitmap output = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
      19.         Canvas canvas = new Canvas(output);
      20.         canvas.drawRoundRect(new RectF(margin, margin, source.getWidth() - margin, source.getHeight() - margin), radius, radius, paint);
      22.         if (source != output) {
      23.             source.recycle();
      24.         }
      26.         return output;
      27.     }
      29.     @Override
      30.     public String key() {
      31.         return "rounded(radius=" + radius + ", margin=" + margin + ")";
      32.     }
      33. }
      34. Picasso
      35.         .with(this)// 指定Context
      36.         .load(URL_IMG2) //指定图片URL
      37.         .transform(new RoundedTransformation(360,0)) // 指定图片转换器
      38.         .into(imageView); // 指定显示图片的ImageView

4.图像_Glide

  • 主页: https://github.com/bumptech/glide
  • 中文文档: http://mrfu.me/2016/02/27/Glide_Getting_Started/

  • 使用步骤

    1. 添加依赖 compile ‘com.github.bumptech.glide:glide:3.7.0’ , 同时还依赖于supportV4.如果没有请自行添加

    2. 添加权限:

      1. <uses-permission android:name="android.permission.INTERNET"/>

    3. 加载图片.示例代码:

      1. Glide
      2.         .with(this) // 指定Context
      3.         .load(URL_GIF)// 指定图片的URL
      4.         .placeholder(R.mipmap.ic_launcher)// 指定图片未成功加载前显示的图片
      5.         .error(R.mipmap.ic_launcher)// 指定图片加载失败显示的图片
      6.         .override(300, 300)//指定图片的尺寸
      7.         .fitCenter()//指定图片缩放类型为fitCenter
      8.         .centerCrop()// 指定图片缩放类型为centerCrop
      9.         .skipMemoryCache(true)// 跳过内存缓存
      10.         .diskCacheStrategy(DiskCacheStrategy.NONE)//跳过磁盘缓存
      11.         .diskCacheStrategy(DiskCacheStrategy.SOURCE)//仅仅只缓存原来的全分辨率的图像
      12.         .diskCacheStrategy(DiskCacheStrategy.RESULT)//仅仅缓存最终的图像
      13.         .diskCacheStrategy(DiskCacheStrategy.ALL)//缓存所有版本的图像
      14.         .priority(Priority.HIGH)//指定优先级.Glide 将会用他们作为一个准则，并尽可能的处理这些请求，但是它不能保证所有的图片都会按照所要求的顺序加载。优先级排序:IMMEDIATE > HIGH > NORMAL >　LOW
      15.         .into(imageView);//指定显示图片的ImageView

    4. 显示圆形图片

      1. class GlideCircleTransform extends BitmapTransformation {
      2.     public GlideCircleTransform(Context context) {
      3.         super(context);
      4.     }
      6.     @Override
      7.     protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
      8.         return circleCrop(pool, toTransform);
      9.     }
      11.     private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
      12.         if (source == null) return null;
      14.         int size = Math.min(source.getWidth(), source.getHeight());
      15.         int x = (source.getWidth() - size) / 2;
      16.         int y = (source.getHeight() - size) / 2;
      18.         // TODO this could be acquired from the pool too
      19.         Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);
      21.         Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);
      22.         if (result == null) {
      23.             result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
      24.         }
      26.         Canvas canvas = new Canvas(result);
      27.         Paint paint = new Paint();
      28.         paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
      29.         paint.setAntiAlias(true);
      30.         float r = size / 2f;
      31.         canvas.drawCircle(r, r, r, paint);
      32.         return result;
      33.     }
      35.     @Override
      36.     public String getId() {
      37.         return getClass().getName();
      38.     }
      39. }
      41. Glide
      42.         .with(this) // 指定Context
      43.         .load(URL_GIF)// 指定图片的URL
      44.         .transform(new GlideCircleTransform(this)) // 指定自定义BitmapTransformation
      45.         .into(imageView);//指定显示图片的ImageView

    5. 显示圆角图片

      1. class GlideRoundTransform extends BitmapTransformation {
      3.     private static float radius = 0f;
      5.     public GlideRoundTransform(Context context) {
      6.         this(context, 4);
      7.     }
      9.     public GlideRoundTransform(Context context, int dp) {
      10.         super(context);
      11.         this.radius = Resources.getSystem().getDisplayMetrics().density * dp;
      12.     }
      14.     @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
      15.         return roundCrop(pool, toTransform);
      16.     }
      18.     private static Bitmap roundCrop(BitmapPool pool, Bitmap source) {
      19.         if (source == null) return null;
      21.         Bitmap result = pool.get(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
      22.         if (result == null) {
      23.             result = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
      24.         }
      26.         Canvas canvas = new Canvas(result);
      27.         Paint paint = new Paint();
      28.         paint.setShader(new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
      29.         paint.setAntiAlias(true);
      30.         RectF rectF = new RectF(0f, 0f, source.getWidth(), source.getHeight());
      31.         canvas.drawRoundRect(rectF, radius, radius, paint);
      32.         return result;
      33.     }
      35.     @Override public String getId() {
      36.         return getClass().getName() + Math.round(radius);
      37.     }
      38. }
      40. Glide
      41.         .with(this) // 指定Context
      42.         .load(URL_GIF)// 指定图片的URL
      43.         .transform(new GlideRoundTransform(this,30)) // 指定自定义BitmapTransformation
      44.         .into(imageView);//指定显示图片的ImageView

    6. 更改Glide默认配置的步骤:

      1. 创建一个GlideModule的实现类,并在其中更改自己需要的设置.示例代码:

        1. public class SimpleGlideModule implements GlideModule {
        2.     @Override
        3.     public void applyOptions(Context context, GlideBuilder builder) {
        4.         // 更改Bitmap图片压缩质量为8888,默认为565
        5.         builder.setDecodeFormat(DecodeFormat.PREFER_ARGB_8888);
        6.     }
        8.     @Override
        9.     public void registerComponents(Context context, Glide glide) {
        10.         // todo
        11.     }
        12. }

      2. 在manifet/Application中添加一个meta-data节点.name值为刚刚创建的GlideModule实现类的完整包名+类名,value值为GlideModule.示例代码:

        1. <meta-data
        2.     android:name="com.alpha.glidedemo.SimpleGlideModule"
        3.     android:value="GlideModule" />
      3. 之后Glide加载图片的时候将会按照新的设置加载.

图像库对比

  • 快速加载图片推荐Glide
  • 对图片质量要求较高推荐Picasso
  • 如果应用加载的图片很多,推荐Fresco > Glide > Picasso

发表评论

表情：
评论列表 （有 0 条评论，302人围观）

还没有评论，来说两句吧...

相关阅读

    相关 图片加载库-Glide

    在泰国举行的谷歌开发者论坛上，谷歌为我们介绍了一个名叫 [Glide][] 的图片加载库，作者是bumptech。这个库被广泛的运用在google的开源项目中，包括2014年g

    怼烎@怼烎@/ 0 赞/ 376 阅读