详解Android之图片加载框架Fresco基本使用(一)

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

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的时候会出错。

@OverrIDeprotected 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基本使用(一)全部内容，希望文章能够帮你解决详解Android之图片加载框架Fresco基本使用(一)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。