欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-02-23 10:56:34
ps:fresco这个框架出的有一阵子了,也是现在非常火的一款图片加载框架.听说内部实现的挺牛逼的,虽然自己还没研究原理.不过先学了一下基本的功能,感受了一下这个框架的强大...

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。