在靠近用户的地方部署容器

本工程教育（EngEd）计划由科支持。

在全球范围内即时部署容器。Section是经济实惠、简单而强大的。

在Android中用Fresco库显示图像

9月5日, 2021

主题。
语言

Fresco是由Facebook的工程师创建的，目的是为了有效地利用内存，提高工作效率。Fresco在2015年初首次开源。这个库被包括维基百科、Twitter和Redfin在内的公司用于他们的Android应用，Facebook也不例外。

Fresco是一个内置方法的集合，主要用于在移动设备上显示图像、GIF和WEBPs。

它涵盖了图片加载和显示的问题，减少了担心用于加载图片的逻辑的繁琐工作。

互联网（URL）。
内部存储和资源，并在图像加载前呈现一个占位符。

前提条件

要完成这个教程，你需要。

在你的机器上安装了Android Studio。
确保你熟悉Android应用开发的基本思路。
理解Kotlin编程语言的基本原理。
能够使用ViewBinding。

什么是Fresco？

Fresco是一个用于在Android应用程序中显示和管理图像的图形库。它以一种节省内存的方式缓存图像。其中一个最重要的特点是，在图像从URL加载之前，它会显示一个占位符图像。这节省了数据并有效地利用了CPU。

安卓应用中Fresco的优势

Fresco有效地利用了内存。
通过流媒体提高图像生产力。
利用simpleDraweeView ，在图像加载前显示一个占位符，而不是传统的imageView。

一些用于在android应用程序中加载图像的库

滑动

Glide支持获取、解码和显示视频、图片和GIF动画。Glide有一个通用的API，可以让开发者将其与任何网络堆栈集成。Glide的默认堆栈是基于一个定制的HttpUrlConnection 。Glide的主要目标是使滚动更容易。

毕加索

Square创立了它，它在Android世界中以Retrofit 、OkHttp 、Leak canary等库闻名。这个库的开发者非常强调其简单性。由于采用了最小化的方法，.apk 的文件大小相对最小。该库还记录了有多少方法在使用。

Fresco的特点

图像缓存

像Picasso和Glide这样的库给出了一种完全清除缓存的方法，甚至可以消除特定的图像。一些功能和键使其能够更恰当地管理图像缓存，并具有很大的优势。

Fresco的内存缓存有三个层次。

准备好的用于显示或后期处理的图像在位图的帮助下被解码。
压缩的图像在编码内存缓存的帮助下以原始状态存储在内存内。
本地存储以原始状态存储压缩后的图像。

在图像管道类的帮助下，Fresco管理着缓存，它提供了检查缓存中的图像是否存在、获取缓存中的图像甚至删除它们的能力。

图像转换

Picasso提供了内置的转换功能，如调整大小、中心裁剪、中心内部和旋转。Glide变换的工作原理与Picasso的相似。最先进的图像处理工具在Fresco中找到。其中大部分可以在XML 布局中使用，以表明适当的特征。从代码的角度来看，应用它们是比较困难的。

此外，某些常用的工具有限制。例如，调整大小，只能用于JPEG文件，不能缩放图像，并且只能将其缩小到原始尺寸的1/8。Fresco可以与预先建立的转换库一起使用。需要自定义实现PostProcessor 类来创建你的转换。

Fresco的显著特点

动画

对GIF和WebPs等移动应用动画的考虑是一个问题，因为每一帧都是一个大的位图，每个动画系列都是一帧。Fresco主要负责加载和处置帧，以及管理它们的内存。

流媒体

流媒体是一种标准，在前一个实例中以低分辨率呈现图像，然后在下载图像时逐步提升质量。这对于在慢速网络上的用户总是有利的。Glide、Picasso和其他Android图像显示库不支持流媒体，但Fresco支持。你所要做的就是指定一个URL，应用程序将在下载图像时自动更新其显示。

加载

Fresco使用流水线技术从本地存储或资源中加载图像，以节省数据和CPU。它需要一个三级缓存，两个在内存中，一个在内部存储中。

内存

为了避免安卓位图占用大量内存，导致java垃圾收集器频繁运行和应用程序变慢的问题，Fresco将图像放在安卓内存的一个特殊区域，并确保图像不再显示在屏幕上时自动从内存中释放。这提高了应用程序的性能。

Fresco允许应用程序在低端设备上运行，而不需要不断挣扎以控制其图像内存。

绘图

Fresco drawee是一种用来显示占位符的技术，直到图像被加载，这样它就可以在到达时自动显示。当图像退出屏幕时，其内存被自动释放。

Drawee提供了几个功能。

将图像缩放到一个焦点上。
通过点选占位符重试图像加载的能力。
以圆角或圆形轮廓显示图像的技术。
当图像被按下时，显示一个自定义的覆盖物。
在图像上显示一个进度条的能力。

开始使用Fresco

创建项目

在这一步，我们需要创建一个空的Android Studio项目。

New Project

添加必要的依赖项

为了在我们的项目中使用Fresco，我们将需要添加Fresco库。

为了播放像GIF这样的动画，我们还将添加必要的依赖性。

// Fresco library
implementation 'com.facebook.fresco:fresco:2.5.0'
    
// Fresco Animation library
implementation 'com.facebook.fresco:animated-gif:2.5.0'

创建基础应用类

在这一步，我们将创建一个类，用于在应用程序生命周期内初始化Fresco一次。

class MyApp: Application() {
    override fun onCreate() {
        super.onCreate()
        Fresco.initialize(this)
    }
}

启用互联网权限

由于图像将从互联网上获取，所以需要互联网权限。

<uses-permission android:name="android.permission.INTERNET"/>

在Manifest文件中，别忘了包括我们刚刚创建的基础应用类的名称。

<application android:name=".MyApp" >
</application>

创建一个布局

在你的XML代码中，在布局的上层添加一个自定义命名空间。这样，只要我们需要显示图片，就可以访问fresco功能。

xmlns:fresco="http://schemas.android.com/apk/res-auto"

添加一个占位符

在图片从互联网加载之前，会临时显示一个占位符。下面这行给出了一个清晰的实现。

fresco:placeholderImage="@drawable/ic_launcher_background"

添加圆角和圆形轮廓

圆角

<com.facebook.drawee.view.SimpleDraweeView
  fresco:roundedCornerRadius="5dp"
  fresco:roundingBorderWidth="1dp"
  fresco:roundingBorderColor="@color/red"/>

圆形图像（使用XML）

<com.facebook.drawee.view.SimpleDraweeView
  app:roundingBorderColor="@color/black"
  fresco:roundAsCircle="true"
  fresco:roundingBorderWidth="1dp"/>

加载Gif动画

动画是在Android中加载GIF和WebPs图像的能力。这个功能主要由Fresco提供，为了在应用程序中使用它，方法setAutoPlayAnimation() 被设置为true 。

binding.animimage.controller = Fresco.newDraweeControllerBuilder()
            .setImageRequest(ImageRequest.fromUri("https://media.giphy.com/media/YWf50NNii3r4k/giphy.gif"))
            .setAutoPlayAnimations(true)
            .build()

流式JPEG图像

流媒体提供了在低分辨率下加载图像的能力，并在加载更多的对比度时将其提高到高分辨率。Fresco提供了一种在Android中使用流媒体的方法，将方法setProgressiveRenderingEnabled() 设置为true 。

val imageRequest= ImageRequestBuilder
            .newBuilderWithSource(Uri.parse("https://image.ec21.com/image/algsorcings/oimg_GC09912344_CA09912371/Fresh-Cut-Flowers-From-Kenya.jpg"))
            .setProgressiveRenderingEnabled(true)
            .build()

        binding.streamingimage.controller=Fresco.newDraweeControllerBuilder()
            .setImageRequest(imageRequest)
            .setOldController(binding.streamingimage.controller)
            .build()

从互联网上加载图像

从网络上加载图像也是Fresco提供的一个功能。这使得用户可以直接从网络上获得必要的图像。为了拥有这种能力，可以使用setImageURI() ，将图像链接传给该方法。

binding.networkimage.setImageURI("https://upload.wikimedia.org/wikipedia/commons/7/7c/Mount_Kenya.jpg")

在图像上添加一个圆形的形状（使用Kotlin）。

没有添加依赖关系的所有程序来实现圆形imageView的使用，Fresco通过添加以下一行代码提供了在圆形视图中塑造图像的能力。

binding.circularimage.setImageURI("https://www.worldatlas.com/r/w1200/upload/79/70/5a/shutterstock-549814942.jpg")

图像转换

Fresco利用内置的库来进行不同的转换，例如应用旋转和调整大小。

旋转

你可以通过在图像请求中指定一个旋转角度来旋转图像，像这样。

.setRotationOptions(RotationOptions.forceRotation(RotationOptions.ROTATE_90))

调整大小

调整大小的主要目的是改变内存中的图像，但不一定改变它。要调整大小，在构建一个图像请求时，传递一个ResizeOptions 对象。

setResizeOptions(ResizeOptions(50,50))

添加一个进度条

为了了解图像是否正在加载，应该添加一个进度条，显示图像是否正在加载过程中。在你的XML 布局中添加以下一行代码。

fresco:progressBarImage="@drawable/progress_bar"

当你运行该应用程序时，你应该看到以下输出。

demo

结语

在本教程中，我们已经学会了如何将Fresco库添加到Android应用程序中。我们还学习了流媒体、添加GIF动画、加载、占位符以及为图片添加圆形等内容。继续探索，用这个强大的库构建令人惊奇的应用程序。

在GitHub上查看整个项目。

编码愉快!

参考资料

Fresco官方文档。

同行评审的贡献者。Eric Gacoki

类似文章

[

How to Create a Reusable React Form component Hero Image

语言

如何创建一个可重复使用的React表单组件

](www.section.io/engineering…

Building a payroll system with next.js Hero Image

语言, Node.js

用Next.js构建一个薪资系统

](www.section.io/engineering…

Creating and Utilizing Decorators in Django example image

架构

在Django中创建和使用装饰器

](www.section.io/engineering…)