常用5大 Android网络加载图片组件的优缺点比较---Glide、Fresco、Picasso、android--Volley、UniVersal--image--loader

android开发的过程中加载网络图片是一件十分令人头疼的事情,在网上有着许多关于加载网络图片的开源库,可以让我们十分方便的加载网络图片。在这里我简单介绍一下Glide、Fresco、Picasso、android-Volley、Universal-Image-Loader的一些理解及其基本的用法:

1.Glide  在泰国举行的google开发者论坛上,google为我们介绍的一款网络图片加载开源库,其作者是bumptech。Glide与Picasso相似度很大,甚至可以说Glide是Picasso的克隆版。Glide 是一个高效、开源、 Android设备上的媒体管理框架,它遵循BSD、MIT以及Apache 2.0协议发布。Glide具有获取、解码和展示视频剧照、图片、动画等功能,它还有灵活的API,这些API使开发者能够将Glide应用在几乎任何网络协议栈里。创建Glide的主要目的有两个,一个是实现平滑的图片列表滚动效果,另一个是支持远程图片的获取、大小调整和展示。近日,Glide 3.0发布,现已提供 jar包下载 ,同时还支持使用Gradle以及Maven进行构建。该版本包括很多值得关注的新功能,如支持Gif 动画和视频剧照解码、智能的暂停和重新开始请求、支持缩略图等,具体新增功能如下如下:

  • GIF 动画的解码 :通过调用Glide.with(context).load(“图片路径“)方法,GIF动画图片可以自动显示为动画效果。如果想有更多的控制,还可以使用Glide.with(context).load(“图片路径“).asBitmap()方法加载静态图片,使用Glide.with(context).load(“图片路径“).asGif()方法加载动画图片
  • 本地视频剧照的解码: 通过调用Glide.with(context).load(“图片路径“)方法,Glide能够支持Android设备中的所有视频剧照的加载和展示
  • 缩略图的支持: 为了减少在同一个view组件里同时加载多张图片的时间,可以调用Glide.with(context).load(“图片路径“).thumbnail(“缩略比例“).into(“view组件“)方法加载一个缩略图,还可以控制thumbnail()中的参数的大小,以控制显示不同比例大小的缩略图
  • Activity 生命周期的集成: 当Activity暂停和重启时,Glide能够做到智能的暂停和重新开始请求,并且当Android设备的连接状态变化时,所有失败的请求能够自动重新请求
  • 转码的支持: Glide的toBytes() 和transcode() 两个方法可以用来获取、解码和变换背景图片,并且transcode() 方法还能够改变图片的样式
  • 动画的支持: 新增支持图片的淡入淡出动画效果(调用crossFade()方法)和查看动画的属性的功能
  • OkHttp 和Volley 的支持: 默认选择HttpUrlConnection作为网络协议栈,还可以选择OkHttp和Volley作为网络协议栈
  • 其他功能: 如在图片加载过程中,使用Drawables对象作为占位符、图片请求的优化、图片的宽度和高度可重新设定、缩略图和原图的缓存等功能

另外,请大家注意,除了以上新引入的功能外,还具有Glide 2.x系列版本的所有功能,如背景图片的加载、内存和磁盘间的高效缓存、使用位图和资源池提高加载性能, 更多Glide3.7相关信息请登陆GitHub上的 Wiki页面 查看。

Glide的基本使用:Glide需要依赖Support Library v4

Glide.with(context)
    .load("http://inthecheesefactory.com/uploads/source/glidepicasso/cover.jpg")
    .into(ivImg);

Glide的with方法不光接受Context,还接受Activity 和 Fragment,Context会自动的从他们获取。

with

同时将Activity/Fragment作为with()参数的好处是:图片加载会和Activity/Fragment的生命周期保持一致,比如Paused状态在暂停加载,在Resumed的时候又自动重新加载。所以我建议传参的时候传递Activity 和 Fragment给Glide,而不是Context。

默认Bitmap格式是RGB_565

Glide默认的Bitmap格式是RGB_565 ,比ARGB_8888格式的内存开销要小一半。下面是Picasso在ARGB8888下与Glide在RGB565下的内存开销图(应用自身占用了8m,因此以8为基准线比较):

ram1_1

如果你对默认的RGB_565效果还比较满意,可以不做任何事,但是如果你觉得难以接受,可以创建一个新的GlideModule将Bitmap格式转换到ARGB_8888

public class GlideConfiguration implements GlideModule {
 
    @Override
    public void applyOptions(Context context, GlideBuilder builder) {
        // Apply options to the builder here.
        builder.setDecodeFormat(DecodeFormat.PREFER_ARGB_8888);
    }
    @Override
    public void registerComponents(Context context, Glide glide) {
        // register ModelLoaders here.
    }
}

同时在AndroidManifest.xml中将GlideModule定义为meta-data

<meta-data android:name="com.inthecheesefactory.lab.glidepicasso.GlideConfiguration" 

android:value="GlideModule"/>

Glide,它会为每种大小的ImageView缓存一次。尽管一张图片已经缓存了一次,但是假如你要在另外一个地方再次以不同尺寸显示,需要重新下载,调整成新尺寸的大小,然后将这个尺寸的也缓存起来。

具体说来就是:假如在第一个页面有一个200x200的ImageView,在第二个页面有一个100x100的ImageView,这两个ImageView本来是要显示同一张图片,却需要下载两次。

不过,你可以改变这种行为,让Glide既缓存全尺寸又缓存其他尺寸:

Glide. with ( this )  
     .load( "http://nuuneoi.com/uploads/source/playstore/cover.jpg"
     .diskCacheStrategy(DiskCacheStrategy.ALL)  
     .into(ivImgGlide);  

下次在任何ImageView中加载图片的时候,全尺寸的图片将从缓存中取出,重新调整大小,然后缓存。

Glide的这种方式优点是加载显示非常快。

2.Fresco

Facebook最近推出了一款用于Android应用中展示图片的强大图片库Fresco,它能够从网络、本地存储和本地资源中加载图片。而且,为了节省数据和CPU,它拥有三级缓存。

Fresco 是一个强大的图片加载组件。

Fresco 中设计有一个叫做 image pipeline 的模块。它负责从网络,从本地文件系统,本地资源加载图片。为了最大限度节省空间和CPU时间,它含有3级缓存设计(2级内存,1级文件)。

Fresco 中设计有一个叫做 Drawees 模块,方便地显示loading图,当图片不再显示在屏幕上时,及时地释放内存和空间占用。

Fresco 支持 Android2.3(API level 9) 及其以上系统。

特性

内存管理

解压后的图片,即Android中的Bitmap,占用大量的内存。大的内存占用势必引发更加频繁的GC。在5.0以下,GC将会显著地引发界面卡顿。

在5.0以下系统,Fresco将图片放到一个特别的内存区域。当然,在图片不显示的时候,占用的内存会自动被释放。这会使得APP更加流畅,减少因图片内存占用而引发的OOM。

Fresco 在低端机器上表现一样出色,你再也不用因图片内存占用而思前想后。

图片的渐进式呈现

渐进式的JPEG图片格式已经流行数年了,渐进式图片格式先呈现大致的图片轮廓,然后随着图片下载的继续,呈现逐渐清晰的图片,这对于移动设备,尤其是慢网络有极大的利好,可带来更好的用户体验。

Android 本身的图片库不支持此格式,但是Fresco支持。使用时,和往常一样,仅仅需要提供一个图片的URI即可,剩下的事情,Fresco会处理。

Gif图和WebP格式

是的,支持加载Gif图,支持WebP格式。

图像的呈现

Fresco 的 Drawees 设计,带来一些有用的特性:

  • 自定义居中焦点(对人脸等图片显示非常有帮助)
  • 圆角图,当然圆圈也行。
  • 下载失败之后,点击重现下载
  • 自定义占位图,自定义overlay, 或者进度条
  • 指定用户按压时的overlay

图像的加载

Fresco 的 image pipeline 设计,允许用户在多方面控制图片的加载:

  • 为同一个图片指定不同的远程路径,或者使用已经存在本地缓存中的图片
  • 先显示一个低解析度的图片,等高清图下载完之后再显示高清图
  • 加载完成回调通知
  • 对于本地图,如有EXIF缩略图,在大图加载完成之前,可先显示缩略图
  • 缩放或者旋转图片
  • 处理已下载的图片
  • WebP 支持

Fresco的使用:

activity_main.xml :

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:fresco="http://schemas.android.com/apk/res-auto"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_margin="20dp"  
  5.     android:layout_height="match_parent">  
  6.     <com.facebook.drawee.view.SimpleDraweeView  
  7.         android:id="@+id/main_sdv1"  
  8.         android:layout_width="100dp"  
  9.         android:layout_height="100dp"  
  10.         fresco:actualImageScaleType="focusCrop"  
  11.         fresco:placeholderImage="@mipmap/default_error"  
  12.         fresco:placeholderImageScaleType="focusCrop"  
  13.         fresco:progressBarImage="@mipmap/icon_progress_bar"  
  14.         fresco:progressBarImageScaleType="focusCrop"  
  15.         fresco:progressBarAutoRotateInterval="5000"  
  16.         fresco:failureImage="@mipmap/icon_failure"  
  17.         fresco:failureImageScaleType="focusCrop"  
  18.         fresco:retryImageScaleType="focusCrop"  
  19.         fresco:fadeDuration="5000"  
  20.         ></com.facebook.drawee.view.SimpleDraweeView>  
  21.     <com.facebook.drawee.view.SimpleDraweeView  
  22.         android:id="@+id/main_sdv2"  
  23.         android:layout_marginTop="20dp"  
  24.         android:layout_below="@+id/main_sdv1"  
  25.         android:layout_width="100dp"  
  26.         android:layout_height="100dp"  
  27.         fresco:actualImageScaleType="focusCrop"  
  28.         fresco:placeholderImage="@mipmap/default_error"  
  29.         fresco:placeholderImageScaleType="focusCrop"  
  30.         fresco:progressBarImage="@mipmap/icon_progress_bar"  
  31.         fresco:progressBarImageScaleType="focusCrop"  
  32.         fresco:progressBarAutoRotateInterval="5000"  
  33.         fresco:failureImage="@mipmap/icon_failure"  
  34.         fresco:failureImageScaleType="focusCrop"  
  35.         fresco:retryImage="@mipmap/icon_retry"  
  36.         fresco:retryImageScaleType="focusCrop"  
  37.         fresco:fadeDuration="5000"  
  38.         fresco:backgroundImage="@android:color/holo_orange_light"  
  39.         fresco:roundAsCircle="true"  
  40.         fresco:roundedCornerRadius="30dp"  
  41.         fresco:roundTopLeft="true"  
  42.         fresco:roundTopRight="true"  
  43.         fresco:roundBottomLeft="true"  
  44.         fresco:roundBottomRight="true"  
  45.         fresco:roundingBorderWidth="10dp"  
  46.         fresco:roundingBorderColor="#008dd7"  
  47.         ></com.facebook.drawee.view.SimpleDraweeView>  
  48.     <com.facebook.drawee.view.SimpleDraweeView  
  49.         android:id="@+id/main_sdv3"  
  50.         android:layout_marginTop="20dp"  
  51.         android:layout_below="@+id/main_sdv2"  
  52.         android:layout_width="100dp"  
  53.         android:layout_height="100dp"  
  54.         fresco:actualImageScaleType="focusCrop"  
  55.         fresco:placeholderImage="@mipmap/default_error"  
  56.         fresco:placeholderImageScaleType="focusCrop"  
  57.         fresco:progressBarImage="@mipmap/icon_progress_bar"  
  58.         fresco:progressBarImageScaleType="focusCrop"  
  59.         fresco:progressBarAutoRotateInterval="5000"  
  60.         fresco:failureImage="@mipmap/icon_failure"  
  61.         fresco:failureImageScaleType="focusCrop"  
  62.         fresco:retryImage="@mipmap/icon_retry"  
  63.         fresco:retryImageScaleType="focusCrop"  
  64.         fresco:fadeDuration="5000"  
  65.         fresco:backgroundImage="@android:color/holo_orange_light"  
  66.         fresco:roundAsCircle="true"  
  67.         fresco:roundedCornerRadius="30dp"  
  68.         fresco:roundTopLeft="true"  
  69.         fresco:roundTopRight="true"  
  70.         fresco:roundBottomLeft="true"  
  71.         fresco:roundBottomRight="true"  
  72.         fresco:roundingBorderWidth="10dp"  
  73.         fresco:roundingBorderColor="#008dd7"  
  74.         ></com.facebook.drawee.view.SimpleDraweeView>  
  75. </RelativeLayout>
MainActivity文件
  1. import android.app.Activity;  
  2. import android.net.Uri;  
  3. import android.os.Bundle;  
  4. import com.facebook.drawee.backends.pipeline.Fresco;  
  5. import com.facebook.drawee.interfaces.DraweeController;  
  6. import com.facebook.drawee.view.SimpleDraweeView;  
  7. public class MainActivity extends Activity {  
  8.     private SimpleDraweeView simpleDraweeView;  
  9.     @Override  
  10.     protected void onCreate(Bundle savedInstanceState) {  
  11.         super.onCreate(savedInstanceState);  
  12.         Fresco.initialize(this);  
  13.         setContentView(R.layout.activity_main);  
  14.         initView();  
  15.     }  
  16.     private void initView() {  
  17.         //创建SimpleDraweeView对象  
  18.         simpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_sdv);  
  19.         //创建将要下载的图片的URI  
  20.         Uri imageUri = Uri.parse("http://avatar.csdn.net/5/D/9/1_vatty748895431.jpg");  
  21.         //开始下载  
  22.         simpleDraweeView.setImageURI(imageUri);  
  23.         //创建DraweeController  
  24.         DraweeController controller = Fresco.newDraweeControllerBuilder()  
  25.                 //重试之后要加载的图片URI地址  
  26.                 .setUri(imageUri)  
  27.                         //设置点击重试是否开启  
  28.                 .setTapToRetryEnabled(true)  
  29.                         //设置旧的Controller  
  30.                 .setOldController(simpleDraweeView.getController())  
  31.                         //构建  
  32.                 .build();  
  33.         //设置DraweeController  
  34.         simpleDraweeView.setController(controller);  
  35.     }  
  36. }  

使用Fresco有一些需要注意的地方:
1、一定不要忘了Fresco库的初始化:

  1. Fresco.initialize(this);  
Fresco.initialize(this);
通常这一句将在Application的onCreate中是比较合适的,如果只有一个Activity,那么加在Activity里也可以,但要在setContentView之前,也就是要先初始化库,才能完成布局文件的加载。
SimpleDraweeView的width和height属性必须是明确值,而不能直接用wrap_content这种内容填充的数值,当然有一种情况例外,就是宽度和高度有一个是固定的,然后设置了二者的比例,则

另一个可以用wrap_content,其实相当于二者都是固定的。
  1. mSimpleDraweeView.setAspectRatio(1.33f); // 设置宽高比为4:3  
总结:
XML属性 意义
fadeDuration 淡入淡出动画持续时间(单位:毫秒ms)
actualImageScaleType 实际图像的缩放类型
placeholderImage 占位图
placeholderImageScaleType 占位图的缩放类型
progressBarImage 进度图
progressBarImageScaleType 进度图的缩放类型
progressBarAutoRotateInterval 进度图自动旋转间隔时间(单位:毫秒ms)
failureImage 失败图
failureImageScaleType 失败图的缩放类型
retryImage 重试图
retryImageScaleType 重试图的缩放类型
backgroundImage 背景图
overlayImage 叠加图
pressedStateOverlayImage 按压状态下所显示的叠加图
roundAsCircle 设置为圆形图
roundedCornerRadius 圆角半径
roundTopLeft 左上角是否为圆角
roundTopRight 右上角是否为圆角
roundBottomLeft 左下角是否为圆角
roundBottomRight 右下角是否为圆角
roundingBorderWidth 圆形或者圆角图边框的宽度
roundingBorderColor 圆形或者圆角图边框的颜色
roundWithOverlayColor 圆形或者圆角图底下的叠加颜色(只能设置颜色)
viewAspectRatio 控件纵横比

3.Picasso    Picasso是Square公司开源的一个 Android图形缓存库

Picasso实现了图片的异步加载,并解决了Android中加载图片时常见的一些问题,它有以下特点:

  • Adapter中取消了不在视图范围内的ImageView的资源加载,因为可能会产生图片错位;
  • 使用复杂的图片转换技术降低内存的使用,比如把下载的图片转换为圆角等
  • 自带内存和硬盘的二级缓存机制

为什么要用Picasso

  Android系统作为图片资源加载的主角,它是通过图像的像素点来把图像加载到内存中的;现在一张500W的摄像头拍出的照片(2592x1936),加载到内存中需要大约19M的内存;如果你加入了信号强度不一的网络中进行了复杂的网络请求,并进行图片的缓存与其他处理,你会耗费大量的时间与精力来处理这些问题,但如果用了Picasso, 这些问题都一消而散;

小试牛刀:从网络加载一张图片

Picasso使用简单易用的接口,并有一个实现类Picasso,一个完整的功能请求至少需要三个参数;

  • with(Context context) - Context上下文在很多Android Api中都是必须的
  • load(String imageUrl) - 图片网络加载地址
  • into(ImageView targetImageView) - 想进行图片展示的ImageView

简单用例:

ImageView targetImageView = (ImageView) findViewById(R.id.imageView);
String internetUrl = "http://www.jycoder.com/json/Image/1.jpg";
Picasso
    .with(context)
    .load(internetUrl)
    .into(targetImageView);

  就是这么简单,如果你的 URL地址正确并且图片存在,在几秒中之内就能看到这张图片了;如果图片资源不存在,Picasso也会有错误的回调,现在你已经看到了只需3行代码就能加载图片了,当然这只是冰山一角,让我们继续揭开Picasso的神秘面纱;

图片的其他加载方式

  Picasso的图片不仅仅能加载网络资源,也能从本地文件,Android项目资源,以及URI地址进行图片加载,下面我们就对这三种方式进行实例说明;

从Android Resources 中加载

  代码也是三行,只需要将网络资源地址更改为一个int值地址即可,上代码:

ImageView targetImageView = (ImageView) findViewById(R.id.imageView);
int resourceId = R.mipmap.ic_launcher;
Picasso
    .with(context)
    .load(resourceId)
    .into(targetImageView);
总结:如果你的项目里面,对于图片有一些具体的要求的话,建议使用这个库,但是这个库当你需要对图片作一些具体的操作比如加载圆角矩形图片、裁剪图片为圆形时,需要你自己写一些操作,如果基础不够好的会感觉很困难。还有就是这个库我们只能看到结果,无法关心图片的下载过程。

Universal Image Loader:一个强大的图片加载库,包含各种各样的配置,最老牌,使用也最广泛。

Picasso: Square出品,必属精品。和OkHttp搭配起来更配呦!

Volley ImageLoader:Google官方出品,可惜不能加载本地图片~

Fresco:Facebook出的,天生骄傲!不是一般的强大。

Glide:Google推荐的图片加载库,专注于流畅的滚动。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值