PS:Fresco这个框架出的有一阵子了,也是现在非常火的一款图片加载框架.听说内部实现的挺牛逼的,虽然自己还没研究原理.不过先学了一下基本的功能,感受了一下这个框架的强大之处.本篇只说一下在xml中设置属性的相关用法.

0.引入Fresco以及相关注意事项。

1.PlaceHolderImage占位图

2.FailureImage加载失败时显示的图片

3.RetryImage重新加载的图片

4.ProgressBarImage加载时显示的进度图片

5.BackgroundImage背景图

6.OverlayImage叠加图

7.多种效果结合加载图片

8.圆形头像,圆角头像以及背景叠加

9.图像边框

  先简单的介绍一下Fresco,如果只是想对网络图片进行加载以及显示一些特效,那么SimpleDraweeView就基本上可以满足我们的需求了 ,Fresco是使用Image Pipeline来实现对图片的管理和获取的,SimpleDraweeView是对ImageView的一个封装,并且内部使用了Image Pipeline管理图片的思想和方式,因此我们如果没什么特殊的需求,尽量使用SimpleDraweeView.这也是官网的一个建议。

  核心类:DraweeView(子类:SimpleDraweeView),DraweeHierarchy(子类:GenericDraweeHierarchy),DraweeController。(类似MVC)

  DraweeView:子类也就是我们的SimpleDraweeView了,用于显示在屏幕上的视图,相当于V。

  DraweeHierarchy:子类是GenericDraweeHierarchy,主要用于维护和绘制Drawable对象,以及怎样展示等等。相当于M。

  DraweeController:控制器,主要和ImageLoader交互,比如说为图片设置uri,能否在失败时重新加载等等。相当于C。

  我在这里也就基本上使用了这三个类。DraweeHierarchy,DraweeController使用了Build模式去实例化对象。核心类也就基本介绍完了,这里只是简单的介绍,不涉及原理的东西。

0.引入Fresco

compile 'com.facebook.fresco:fresco:0.14.0'

Fresco的引入比较的简单,我们只需要在build.gradle中添加就可以,Github上提供的Demo比较的难抽取,并且实际运行起来并没有过多的效果,只是针对多个图片加载框架在加载图片时的性能进行了对比。如果想看一下官方的运行效果。会在文章最后提供源代码。

 需要注意的一点就是,我们在使用Fresco之前首先要进行初始化操作。要放在布局加载之前,否则setContentView解析xml的时候会出错。

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Fresco.initialize(this);
setContentView(R.layout.activity_simple_drawee);
}

1.PlaceHolderImage

 占位图,理解起来也比较的简单,也就是在没有任何图片加载的时候显示的默认图片。

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/placeHolderImageDraweeView"
android:layout_margin="5dp"
android:layout_width="40dp"
android:layout_height="40dp"
fresco:placeholderImage="@drawable/placeholder_image"
fresco:placeholderImageScaleType="fitCenter"/>

Java代码中我们需要为这个SimpleDraweeView设置相关的控制器。这里初始化了GenericDraweeHierarchy,控制图片的淡入淡出的效果时间,同时设置控制器显示需要加载的图片的url.在加载这个过程中,我们可以看到占位图会被加载的图片替换掉。

GenericDraweeHierarchyBuilder builder = new GenericDraweeHierarchyBuilder(getResources());
/**
* 设置淡入淡出效果的显示时间
* */
GenericDraweeHierarchy hierarchy = builder.setFadeDuration(1000).build();
DraweeController placeHolderDraweeController = Fresco.newDraweeControllerBuilder()
.setUri("http://avatar.csdn.net/4/E/8/1_y1scp.jpg") //为图片设置url
.setTapToRetryEnabled(true) //设置在加载失败后,能否重试
.setOldController(placeHolderImageDraweeView.getController())
.build();
placeHolderImageDraweeView.setController(placeHolderDraweeController);
placeHolderImageDraweeView.setHierarchy(hierarchy);

2.FailureImage加载失败时显示的图片

  当图片加载失败之后我们也是需要有默认图片去进行填充的。那么SimpleDraweeView也可以实现这个功能,实现方式也非常的简单。

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/failureImageDraweeView"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="5dp"
fresco:failureImage="@drawable/error"
fresco:failureImageScaleType="centerInside"/>

这里我们只需要设置failureImage属性就可以完成。这里我们仍然设置一个控制器。

/**
* 任意加载一个url,url是不存在的.因此显示加载失败的图片.
* */
DraweeController failureImageDraweeController = Fresco.newDraweeControllerBuilder()
.setUri("ssss")
.setTapToRetryEnabled(false) //同时设置不可重试.
.setOldController(failureImageDraweeView.getController())
.build();
failureImageDraweeView.setController(failureImageDraweeController);

这里设置一个错误的url,那么肯定会加载失败的,这时就会显示加载失败的图片了。

3.RetryImage重新加载的图片

  RetryImage表示的是图片加载失败之后,可以显示一个图片,用于重试操作,如果多次重试还是加载不出图片,那么显示加载失败的图片。

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/retryImageDraweeView"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="5dp"
fresco:retryImage="@drawable/retry"
fresco:retryImageScaleType="centerCrop"
fresco:failureImage="@drawable/error"/>

重新加载显示的图片只需要改成上面的属性即可,这里控制器基本和failureImage的控制器基本是相同的,我们只需要将重试的属性设置为ture就可以了。这里如果图片加载失败,那么Image Pipeline能够重试四次,如果仍然无法加载成功,那么显示加载失败的图片。

/**
* 任意加载一个url,显示重新加载时图片的点击,加载失败的时候,Image pipeline会重试四次,
* 如果还是加载不出图像,那么显示加载失败图片.
* */
DraweeController retryImageDraweeController = Fresco.newDraweeControllerBuilder()
.setUri("aaaa")
.setTapToRetryEnabled(true)
.setOldController(retryImageDraweeView.getController())
.build();
retryImageDraweeView.setController(retryImageDraweeController);

4.ProgressBarImage

  进度显示图片,图片在加载的时候往往是需要显示进度的,或者显示一个加载进度的图片与用户进行交互,那么Fresco的ProgressBarImage可以帮助我们完成这个功能,在显示图片的同时,图片同时也是旋转显示的。

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/progressBarImageDraweeView"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="5dp"
fresco:progressBarImage="@drawable/progress_image"
fresco:progressBarAutoRotateInterval="5000"
fresco:progressBarImageScaleType="centerInside"/>

这里只需要设置ProgressBarImage属性就可以了,这里progressBarAutoRotateInterval表示的是自动旋转的间隔。设置的数值越小,旋转的速度越快。控制器的代码就没必要贴出来了,和上面的控制器基本是相同的,只需要设置一个正确的uri就可以了。

5.BackGroundImage

 背景图一般就是底色,感觉和placeHolderImage效果差不多,虽然还是有区别的,只是图片在加载过程中会始终显示背景图,一旦图片加载成功之后,那么后续的图片将直接覆盖背景图,并且没有叠加的效果,也就是说我们加载的图片不会收到背景图片影响。他和叠加图是有区别的.

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/backgroundImageDraweeView"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="5dp"
fresco:backgroundImage="@color/blue"/>

 这里控制器的代码也不进行粘贴了,没有特殊要求的话,都和上面的控制器基本是相同的。

6.OverlayImage

 叠加图和BackGroundImage就有区别了,叠加图是会影响加载的图片的,比如说我们为SimpleDraweeView设置了一个加载的图片,同时设置了一个叠加图,那么加载后的图片会收到叠加图的影响的,二者会产生叠加效果。

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/overlayImageDraweeView"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="5dp"
fresco:overlayImage="@color/overlay"/>

7.多种效果加载图片

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/multiEffectSuccessSimpleDraweeView"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="5dp"
fresco:placeholderImage="@drawable/placeholder_image"
fresco:placeholderImageScaleType="fitCenter"
fresco:progressBarImage="@drawable/progress_image"
fresco:progressBarImageScaleType="centerInside"
fresco:progressBarAutoRotateInterval="5000"
fresco:failureImage="@drawable/error"
fresco:failureImageScaleType="centerInside"
fresco:retryImage="@drawable/retry"
fresco:retryImageScaleType="centerCrop" />

这里使用了多种效果结合来完成图片的显示,首先有一个占位图,然后设置图片在加载时显示的图片,用于和用户完成交互功能,如果成功那么显示加载后的图片,如果失败,那么显示重新加载的图片,如果重复了四次仍然无法完成加载,那么就显示加载失败的图片。相关的控制器也比较的简单,和上面差不多。简单贴一下。

/**
* 多种效果结合:加载图片成功和失败
* */
DraweeController multiEffectSuccessController = Fresco.newDraweeControllerBuilder()
.setUri("http://avatar.csdn.net/4/E/8/1_y1scp.jpg") //想要看到失败效果,设置一个错误的uri就可以了
.setTapToRetryEnabled(true)
.setOldController(multiEffectSuccessSimpleDraweeView.getController())
.build();
multiEffectSuccessSimpleDraweeView.setController(multiEffectSuccessController);

8.圆形头像的实现

 我们在写app的时候,经常会使用到圆形头像这一个功能,因此我们一般不得不自定义View或者是使用其他框架等等,有了Fresco那么他会帮助你完成这个功能,而且轻快又简便只需要添加一行代码就可以完成了。

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/circleImageDraweeView"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="5dp"
fresco:placeholderImage="@drawable/placeholder_image"
fresco:placeholderImageScaleType="fitCenter"
fresco:progressBarImage="@drawable/progress_image"
fresco:progressBarImageScaleType="centerInside"
fresco:progressBarAutoRotateInterval="5000"
fresco:failureImage="@drawable/error"
fresco:failureImageScaleType="centerInside"
fresco:retryImage="@drawable/retry"
fresco:retryImageScaleType="centerCrop"
fresco:roundAsCircle="true"
fresco:roundingBorderWidth="2dp"
fresco:roundingBorderColor="@color/colorAccent"/>

虽然看着挺多,其实实现圆形头像只需要添加roundAsCircle这个属性为true就搞定了,我这里添加了roundingBorderWidth其实是为这个图片加上边框和相关的边框颜色而已。这里也就顺便把边框线这个功能直接说了。

9.圆角图片

 圆角图片和圆形图片的区别大家肯定是知道的,并且也比较的常用,在Fresco中也只需要设置具体属性就可以了。

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/roundCornerImageDraweeView"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="5dp"
fresco:roundedCornerRadius="10dp"
fresco:roundTopLeft="true"
fresco:roundTopRight="true"
fresco:roundBottomLeft="true"
fresco:roundBottomRight="true"
fresco:roundWithOverlayColor="@color/overlay"/>

我们只需要设置roundCornerRadius的大小,表示的是圆角的圆形程度,剩下的四个属性表示四个角都需要设置成圆角,如果希望那个边角不是圆角,那么主要设置为false就可以了。roundWithOverlayColor表示的是圆形头像或者是圆角头像底部的叠加颜色。

 这里也就通过了XML设置了基本所有的效果,虽然没有截图,但是在这里提供一个源代码,具体的效果大家去运行加深一下印象就可以了,都是一些基本的东西,这篇博客也没什么难点,算是学习Fresco的一个基本入门。提供个大家参考一下就可以了。

 源代码:Demo

 

 

 

Android之图片加载框架Fresco基本使用(一)的更多相关文章

  1. Android之图片加载框架Fresco基本使用(二)

    PS:最近看到很多人都开始写年终总结了,时间过得飞快,又到年底了,又老了一岁. 学习内容: 1.进度条 2.缩放 3.ControllerBuilder,ControllerListener,Post ...

  2. 强大的图片加载框架Fresco的使用

    前面在卓新科技有限公司实习的时候,在自己的爱吖头条APP中,在图片异步加载的时候和ListView的滑动中,总会出现卡顿,这是因为图片的缓存做的不是足够到位,在项目监理的帮助下,有使用Xutils框架 ...

  3. android Glide图片加载框架的初探

    一.Glide图片加载框架的简介 谷歌2014年开发者论坛会上介绍的图片加载框架,它让我们在处理不管是网路下载的图片还是本地的图片,减轻了很多工作量, 二.开发步骤: 1.添加链接库 compile ...

  4. android glide图片加载框架

    项目地址: https://github.com/bumptech/glide Glide作为安卓开发常用的图片加载库,有许多实用而且强大的功能,那么,今天就来总结一番,这次把比较常见的都写出来,但并 ...

  5. Android自定义图片加载框架

    大神原网址: http://blog.csdn.net/lmj623565791/article/details/41874561  思路: 1. 压缩图片 压缩本地图片: 获得imageview想要 ...

  6. Android 三大图片加载框架的对比——ImageLoader,Picasso,Glide

    一.ImageLaoder介绍 << Universal ImageLoader 是很早开源的图片缓存,在早期被很多应用使用 多线程下载图片,图片可以来源于网络,文件系统,项目文件夹ass ...

  7. 图片加载框架Fresco与V4包冲突解决方法

  8. Android中常见的图片加载框架

    图片加载涉及到图片的缓存.图片的处理.图片的显示等.而随着市面上手机设备的硬件水平飞速发展,对图片的显示要求越来越高,稍微处理不好就会造成内存溢出等问题.很多软件厂家的通用做法就是借用第三方的框架进行 ...

  9. Fresco从配置到使用(最高效的图片加载框架)

    Frescoj说明:      facebook开源的针对android应用的图片加载框架,高效和功能齐全. 支持加载网络,本地存储和资源图片: 提供三级缓存(二级memory和一级internal ...

随机推荐

  1. H5+Mui文件配置 vue-resource基本使用方法

    使用HBuilder空项目搭建h5原生开发框架需要的文件配置: *css:mui.min.css *fonts:mui.ttf mui-icon-extra.ttf *js:mui.js mui.mi ...

  2. java开发中JDBC连接数据库代码和步骤

    JDBC连接数据库 •创建一个以JDBC连接数据库的程序,包含7个步骤: 1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机), 这通过java.l ...

  3. JavaScript判断移动端及pc端访问不同的网站

    JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...

  4. OC整理1

    关于面向对象 看起来简单,好好体会其实有点深奥,初学的时候更感觉抽象,可能由于开发经验不足的关系吧,很难体会到面向对象的精髓. 放轻松,我们来用最直白得方式来探讨一下面向对象. 首先,编程是为了用计算 ...

  5. Android Support Library

    title: Android Support Library tags: Support Library,支持库 grammar_cjkRuby: true --- DATE: 2016-5-13. ...

  6. 基于zookeeper实现统一资源管理

    分布式系统中经常涉及到配置资源的管理,比如,一个应用系统需要部署在多台服务器上,但是他们拥有某些的配置项是相同的,如果配置变更,需要修改这些配置,那么需要同时修改每台服务器,这样做比较麻烦而且容易出错 ...

  7. 我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(一)

    一.前言 之前的博客一直都还没写到框架的实现及权限系统,今天开始写我的权限系统,我以前做过的项目基本上都有权限管理这个模块,但各个系统都会有一些不太一样,有些简单点,有些稍微复杂一点,一句话,我们做的 ...

  8. Python学习笔记

    1. 进行浮点数运算时,整数要写成浮点数形式,否则Python默认按照整数进行运算了,譬如3/5应该写成3.0/5.0: 2. Python没有switch: 3. Python中没有重载,但是可以通 ...

  9. 三周,用长轮询实现Chat并迁移到Azure测试

    公司的OA从零开始进行开发,继简单的单点登陆.角色与权限.消息中间件之后,轮到在线即时通信的模块需要我独立去完成.这三周除了逛网店见爱*看动漫接兼职,基本上都花在这上面了.简单地说就是用MVC4基于长 ...

  10. vmware 安装xp 流水账

    1. 分区 PQ分区.1个区,C盘,NTFS. 2. 安装XP 进入ghost,不要选择一键. 然后fromImage, d:\xxx\GHO