详解Android之图片加载框架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

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

(0)

相关推荐

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

    PS:最近看到很多人都开始写年终总结了,时间过得飞快,又到年底了,又老了一岁. 学习内容: 1.进度条 2.缩放 3.ControllerBuilder,ControllerListener,PostProcesser,Image Request 4.渐进式JPEG与动图的显示 最近这两天把Fresco的官方文档算是看了个差不多,就剩下Fresco的基本原理还有结合okHttp等类库如何使用的问题,虽然官方文档给出的功能比较的多,比如说自定义View,缩略图显示等等,这些我也基本就看了个大概,觉

  • Android使用开源框架Fresco处理图片

    关于Fresco的优点大家自行谷歌吧,它太强大太优秀了,我这一片小博文容纳不下啊羡慕,今天主要给大家简单介绍下Fresco的使用以及一些属性的介绍. Fresco是一个强大的图片加载组件.使用它之后,你不需要再去关心图片的加载和显示这些繁琐的事情!支持Android2.3及以后的版本. 官网详细介绍了Fresco一些特性,我第一次看确实是惊呆了.https://www.fresco-cn.org/ 2016年Fresco的最新的源码分析:https://github.com/desmond112

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

    PS:Fresco这个框架出的有一阵子了,也是现在非常火的一款图片加载框架.听说内部实现的挺牛逼的,虽然自己还没研究原理.不过先学了一下基本的功能,感受了一下这个框架的强大之处.本篇只说一下在xml中设置属性的相关用法. 0.引入Fresco以及相关注意事项. 1.PlaceHolderImage占位图 2.FailureImage加载失败时显示的图片 3.RetryImage重新加载的图片 4.ProgressBarImage加载时显示的进度图片 5.BackgroundImage背景图 6.

  • 详解Android GLide图片加载常用几种方法

    目录 缓存浅析 GLide图片加载方法 图片加载周期 图片格式(Bitmap,Gif) 缓存 集成网络框架 权限 占位符 淡入效果 变换 启动页/广告页 banner 固定宽高 圆角 圆形 总结 缓存浅析 为啥要做缓存? android默认给每个应用只分配16M的内存,所以如果加载过多的图片,为了 防止内存溢出 ,应该将图片缓存起来. 图片的三级缓存分别是: 1.内存缓存 2.本地缓存 3.网络缓存 其中,内存缓存应优先加载,它速度最快:本地缓存次优先加载,它速度也快:网络缓存不应该优先加载,它

  • 详解android 用webview加载网页(https和http)

    1.Android 加载https请求的网页的时候 打不开 当load有ssl层的https页面时,如果这个网站的安全证书在Android无法得到认证,WebView就会变成一个空白页,而并不会像PC浏览器中那样跳出一个风险提示框.因此,我们必须针对这种情况进行处理.(这个证书限于2.1版本以上的Android 系统才可以) wv.setWebViewClient(new WebViewClient(){ @override public void onReceivedSslError(WebV

  • 详解Android 教你打造高效的图片加载框架

    1.概述 优秀的图片加载框架不要太多,什么UIL , Volley ,Picasso,Imageloader等等.但是作为一名合格的程序猿,必须懂其中的实现原理,于是乎,今天我就带大家一起来设计一个加载网络.本地的图片框架.有人可能会说,自己写会不会很渣,运行效率,内存溢出神马的.放心,我们拿demo说话,拼得就是速度,奏事这么任性. 关于加载本地图片,当然了,我手机图片比较少,7000来张: 1.首先肯定不能内存溢出,但是尼玛现在像素那么高,怎么才能保证呢?我相信利用LruCache统一管理你

  • 一起动手编写Android图片加载框架

    开发一个简洁而实用的Android图片加载缓存框架,并在内存占用与加载图片所需时间这两个方面与主流图片加载框架之一Universal Image Loader做出比较,来帮助我们量化这个框架的性能.通过开发这个框架,我们可以进一步深入了解Android中的Bitmap操作.LruCache.LruDiskCache,让我们以后与Bitmap打交道能够更加得心应手.若对Bitmap的大小计算及inSampleSize计算还不太熟悉,请参考这里:高效加载Bitmap.由于个人水平有限,叙述中必然存在

  • 设计简单的Android图片加载框架

    目前Android 发展至今优秀的图片加载框架太多,例如: Volley ,Picasso,Imageloader,Glide等等.但是作为程序猿,懂得其中的实现原理还是相当重要的,只有懂得才能更好地使用.于是乎,今天我就简单设计一个网络加载图片框架.主要就是熟悉图片的网络加载机制. 一般来说,一个优秀的 图片加载框架(ImageLoader) 应该具备如下功能: 图片压缩 内存缓存 磁盘缓存 图片的同步加载 图片的异步加载 网络拉取 那我们就从以上几个方面进行介绍: 1.图片压缩(有效的降低O

  • Android图片加载框架Glide的基本用法介绍

    简介 Glide是一款图片加载框架,可以在Android平台上以简单的方式加载和展示图片. dependencies { compile 'com.github.bumptech.glide:glide:3.7.0' } 在清单文件中加入权限 <uses-permission android:name="android.permission.INTERNET" /> 加载图片 http://sc.jb51.net/uploads/allimg/150709/14-150FZ

  • Android 常见的图片加载框架详细介绍

    Android 常见的图片加载框架 图片加载涉及到图片的缓存.图片的处理.图片的显示等.而随着市面上手机设备的硬件水平飞速发展,对图片的显示要求越来越高,稍微处理不好就会造成内存溢出等问题.很多软件厂家的通用做法就是借用第三方的框架进行图片加载. 开源框架的源码还是挺复杂的,但使用较为简单.大部分框架其实都差不多,配置稍微麻烦点,但是使用时一般只需要一行,显示方法一般会提供多个重载方法,支持不同需要.这样会减少很不必要的麻烦.同时,第三方框架的使用较为方便,这大大的减少了工作量.提高了开发效率.

  • Android图片加载框架Coil的详细使用总结

    目录 简介 简单使用 高斯模糊 圆角 圆形 灰色变换 GrayscaleTransformation Gif 监听下载过程 取消下载 替换 okhttp 实例 自定义 Coil 源码分析 总结 简介 Coil 是一个 Android 图片加载库,通过 Kotlin 协程的方式加载图片.特点如下: 更快: Coil 在性能上有很多优化,包括内存缓存和磁盘缓存,把缩略图存保存在内存中,循环利用 bitmap,自动暂停和取消图片网络请求等. 更轻量级: Coil 只有2000个方法(前提是你的 APP

随机推荐