目前使用在android中的图片加载框架有不少,有ImageLoader,Glide,Picasso,这些框架被用在了很多的项目当中,可是当Glide或者是Picasso去加载几千张的图片时候,依然造成了图片加载卡顿的现象,所以这里就要介绍给大家一个非常优秀的、功能十分强大的,在加载几千张图片依然流畅的图片加载框架Fresco,这个框架的出自Facebook的开发团队,目前在github的star数已经达到了上万。
项目地址:https://github.com/facebook/fresco
接下来就来体验一下Fresco的使用
(一)最简单的使用
-
在你的app级别的.gradle文件中添加fresco的依赖
compile'com.facebook.fresco:fresco:1.1.0'
-
创建App类,继承自系统中的Application类,重写onCreate()方法,并在清单文件中配置App类
//最简单的Fresco初始化 Fresco.initialize(this);
Fresco还重载了两个初始化的方法,另外两种初始化在后文中再讲
-
Fresco对于图片加载并不是像其他的图片加载框架一样,直接将图片加载到ImageView中,而是加载到它内置的一个继承自View的DraweeView控件上。然而我们想要使用Fresco中一些强大的功能的话,需要用到的是DraweeView的一个子类SimpleDraweeView。
在布局文件中使用SimpleDraweeView<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/sdv" android:layout_width="100dp" android:layout_height="100dp" />
这边需要注意的是在DraweeView的layout_width和layout_height并不支持wrap_content属性,一旦你使用了这个属性,将会导致view的onLayout()方法重新执行,出现画面的跳跃
加载图片
Fresco能够加载以下类型的图片
类型 | SCHEME | 示例 |
---|---|---|
远程图片 | http://, https:// | HttpURLConnection 或者参考 使用其他网络加载方案 |
本地文件 | file:// | FileInputStream |
Content provider | content:// | ContentResolver |
asset目录下的资源 | asset:// | AssetManager |
res目录下的资源 | res:// | Resources.openRawResource |
Uri中指定图片数据 | data:mime/type;base64 | 数据类型必须符合 rfc2397规定 (仅支持 UTF-8) |
这个案例我们就去加载网络中的图片,我随便在网络上找了一张图片去加载
加载网络图片还需要在manifests文件中增加访问网络图片的权限
<uses-permission android:name="android.permission.INTERNET"/>
在activity中进行图片加载操作
SimpleDraweeView sdv = (SimpleDraweeView) findViewById(R.id.sdv);
sdv.setImageURI("http://pic.58pic.com/58pic/13/77/09/53K58PICEMN_1024.jpg");
对于加载其他类型的图片,用以下规则
String imageUri = "http://site.com/image.png"; // 网络图片
String imageUri = "file:///mnt/sdcard/image.png"; //SD卡图片
String imageUri = "content://media/external/audio/albumart/13"; // 媒体文件夹
String imageUri = "assets:///image.png"; // assets
String imageUri = "res://" + context.getPackageName()+"/" +R.drawable.image; // drawable文件
运行app,发现图片成功被加载。
(二)SimpleDraweeView的属性介绍
上面介绍了Fresco最简单的用法,接下来就来说下SimpleDrawwwView的所有属性,这些属性体现了Fresco强大的地方
属性 | 说明 | 取值 | |
---|---|---|---|
fadeDuration | 渐进式加载JPEG图片的时间,对于其他格式的图片 渐进式是无效果的 | 整数类型,单位s | |
actualImageUri | 图片的uri地址 | ||
actualImageScaleType | 图片的缩放的形式 | 见上表 | |
placeholderImage | 设置占位图 | ||
failureImage | 设置加载出现错误后显示的图片 | ||
failureImageScaleType | 设置加载出现错误后显示的图片的缩放形式 | 见上表 | |
retryImage | 重试加载图 当显示这个图使,加载错误图片并不显示,当重试次数达到4次时,显示加载错误图 | ||
retryImageScaleType | 重试加载图的缩放形式 | 见上表 | |
progressBarImage | 进度条图片 | ||
progressBarImageScaleType | 进度条图片缩放形式 | 见上表 | |
progressBarAutoRotateInterval | 进度条旋转时长 | ||
backgroundImage | 背景图 | ||
overlayImage | 叠加图 | ||
pressedStateOverlayImage | 图片按下显示的图 | ||
roundAsCircle | 图片显示为圆形 | boolean 默认false | |
roundedCornerRadius | 图片显示为圆角图的圆角半径 | 整数类型 | |
roundTopLeft | 图片左上角是否需要圆角 | ||
roundTopRight | 图片右上角是否需要圆角 | ||
roundBottomLeft | 图片左下角是否需要圆角 | ||
roundBottomRight | 图片右下角是否需要圆角 | ||
roundWithOverlayColor | 圆形图片带叠加图 | ||
roundingBorderWidth | 将图片显示为圆形的宽度 | ||
roundingBorderColor | 图片显示成圆形后边框颜色 | ||
viewAspectRatio | 宽高比,加这个属性后,layout_width或layout_height中的一个可以是wrap_content |
对于这些属性的使用就补贴代码了,大家可以自己尝试一下
(三)对于GIF与WEBP的支持
Fresco不仅支持常见的图片格式,还支持GIF和WEBP格式的图片
如果你想要你的应用支持gif和webp格式图片,那么需要添加以下依赖:
// 支持 GIF 动图,需要添加
compile 'com.facebook.fresco:animated-gif:1.1.0'
// 支持 WebP (静态图+动图),需要添加
compile 'com.facebook.fresco:animated-webp:1.1.0'
compile 'com.facebook.fresco:webpsupport:1.1.0'
// 仅支持 WebP 静态图,需要添加
compile 'com.facebook.fresco:webpsupport:1.1.0'
(四)切换网络底层
Fresco网络加载库默认是使用的是HttpUrlConnection,但是它支持开发者切换网络加载库
切换网络底层,讲到切换网络底层就要回到Fresco的初始化的重载方法,这里使用两个参数的初始化方法
Fresco.initialize(Context context,@Nullable ImagePipelineConfig imagePipelineConfig);
这里可以看到需要一个ImagePipelineConfig对象,Fresco将图片加载的工作交给ImagePipelineConfig类去做,所以对图片加载的配置都是通过这个类来完成的。
ImagePipelineConfig的对象不能直接new,而是通过其内部提供的Builder类的build()方法来构造出对象。
所以切换底层,用以下这个类就能完成。
在这里,我将网络底层切换为okhttp。
查看文档,发现切换网络底层需要我们去自定义类继承NetworkFetchProducer类去完成,不过Fresco非常人性化的为我们提供依赖,可以快速的将网络底层切换为okhttp。
在app的.gradle依赖:
//网络加载切换为okhttp2
compile "com.facebook.fresco:imagepipeline-okhttp:1.1.0"
//网络加载切换为okhttp3
compile "com.facebook.fresco:imagepipeline-okhttp3:0.1.1.0"
重写onCreate()方法
ImagePipelineConfig frescoConfig = OkHttpImagePipelineConfigFactory.newBuilder(this,okHttpClient).build();
Fresco.initialize(this,frescoConfig);
参考文献:Fresco官方使用文档 https://www.fresco-cn.org/docs/index.html