Android图片加载框架Fresco的简单使用

目前使用在android中的图片加载框架有不少,有ImageLoader,Glide,Picasso,这些框架被用在了很多的项目当中,可是当Glide或者是Picasso去加载几千张的图片时候,依然造成了图片加载卡顿的现象,所以这里就要介绍给大家一个非常优秀的、功能十分强大的,在加载几千张图片依然流畅的图片加载框架Fresco,这个框架的出自Facebook的开发团队,目前在github的star数已经达到了上万。
项目地址:https://github.com/facebook/fresco
接下来就来体验一下Fresco的使用

(一)最简单的使用

  1. 在你的app级别的.gradle文件中添加fresco的依赖

     compile'com.facebook.fresco:fresco:1.1.0'
    
  2. 创建App类,继承自系统中的Application类,重写onCreate()方法,并在清单文件中配置App类

     //最简单的Fresco初始化
      Fresco.initialize(this);
    

    Fresco还重载了两个初始化的方法,另外两种初始化在后文中再讲

  3. 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()方法重新执行,出现画面的跳跃

  4. 加载图片
    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强大的地方

Paste_Image.png
属性 说明 取值
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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容