Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK

在安卓APP中使用Glide编写图片相册

by
Difficulty:IntermediateLength:LongLanguages:

Chinese (Simplified) (中文(简体)) translation by Zhang Xiang Liang (you can also view the original English article)

Final product image
What You'll Be Creating

1.什么是Glide?

Glide是一款流行的Android开源库,用于加载图片、视频和GIF动画。使用Glide可以从许多不同的地方(如远程服务器或本地文件系统)加载和显示media文件。

默认情况下,Glide使用自定义实现的HttpURLConnection来通过网络加载图片。但是,Glide还向其他流行的网络库(如VolleyOkHttp)一样提供了插件。

2.为什么要使用Glide?

在Java中开发自己的media加载和显示功能很痛苦:你必须关心缓存,解码,管理网络连接,线程和异常处理等。而Glide是一个易于使用,很好计划过的,文档化和经过彻底测试的库,可以为你节省大量宝贵的时间,并避免你头痛。

在本教程中,我们将通过构建一个简单的图片相册APP来了解Glide 3。它将通过互联网加载图像,并将它们作为缩略图显示在RecyclerView中,当用户点击任何图片时,它将打开大图片的详细activity。

3.  创建一个Android Studio项目

启动Android Studio并创建一个名为MainActivity的空项目  。

Android Studio new project screenshot

2.声明依赖

创建新项目后,在build.gradle中指定以下依赖关系。

或使用Maven:

确保添加Glide依赖关系后同步项目。

集成库

如果要在项目中使用网络库(如OkHttp或Volley)进行网络操作,建议你为所使用的库(而不是默认捆绑HttpURLConnection)集成Glide。

Volley

OkHttp

可以访问官方的Glide集成指南了解更多信息。

3.  添加Internet权限

由于Glide将通过互联网执行加载图片的网络请求,因此我们需要在AndroidManifest.xml中申请INTERNET权限  。

4.创建布局

我们开始创建RecyclerView。

创建自定义item布局 

接下来,我们来创建用于RecyclerView每个item的XML布局(ImageView)。

现在我们已经创建了布局,下一步是创建用于填充数据的RecyclerView适配器。在此之前,我们来创建一个简单的数据模型。

5.创建数据模型

我们为RecyclerView定义一个简单的数据模型。该模型实现了Parcelable,Parcelable用来从一个组件传输高性能数据到另一个组件。在这里,将数据从SpaceGalleryActivity传送到到SpacePhotoActivity。 这里,数据从SpaceGalleryActivity 传到 SpacePhotoActivity

6.  创建适配器

我们将创建一个适配器来填充RecyclerView。我们还将实现一个点击监听事件来打开详细的Activity (即SpacePhotoActivity),并把SpacePhoto实例作为extra传过去。 SpacePhotoActivity将显示图像的详细信息。我们将在后面创建它。

7.  从网址加载图片

从互联网获取图片就是我们需要Glide来完成的工作,当用户滑动APP时使用RecyclerView的onBindViewHolder()方法将图片显示在单独的ImageView中。

一步一步来,以下是Glide调用的方法:

  • with(Context context):我们首先将上下文传递给with() 方法,开始加载过程。
  • load(String string):将图片源要么是目录路径,URI或者是URL。
  • placeholder(int resourceId):一个本地APP资源id,在图片被加载前作为占位的图片。
  • into(ImageView imageView):要放置图片的目标imageView控件。

请注意,Glide还可以加载本地图像。只需将Android资源ID,文件路径或URI作为参数传递给load()方法。

图片调整和转换

你可以在ImageView显示图片之前使用Glide的  .override(int width, int height) 方法调整图片的大小。当从服务器加载不同大小的图片时,创建缩略图很有用。请注意,维度的像素不是dp。 当从服务器加载不同大小的图片时,创建缩略图很有用。请注意,维度的像素不是dp。

以下图片转换也可用:

  • fitCenter()均匀地缩放图片(保持图像的纵横比)以适应给定的区域。整个图片是可见的,但可能有垂直或水平的填充。
  • centerCrop():均匀地缩放图像(保持图像的宽高比),以使图片填满给定区域,尽可能多地显示图片。如果需要,图片将被水平或垂直裁剪。

8.初始化适配器

这里我们创建RecyclerViewGridLayoutManager作为布局管理器,初始化我们的适配器,并将其绑定到RecyclerView

9.  创建详细的Activity

创建一个新的Activity并命名  SpacePhotoActivity。我们得到SpacePhoto的extra,并像以前一样使用Glide加载图片。在这里,我们期望文件或URL是Bitmap,所以我们将使用  asBitmap()来让 Glide接收Bitmap。 否则加载将失败并且  .error() 回调将被触发 - 导致从错误回调返回的资源被显示。  如果你想确保加载的图片是GIF,也可以使用asGif()。(我将在短时间内解释GIF如何在Glide中工作。)

请注意,我们还初始化了加载图片的唯一缓存:  DiskCacheStrategy.SOURCE。稍后将介绍有关缓存的更多内容。

详细Activity的布局

这是一个显示详细Activity的布局。它只显示一个可滚动的ImageView,该ImageView显示加载图片的全分辨率版本。

10.  Glide中的缓存

如果仔细观察,你将看到当重新访问之前加载过的图片时,该图片的加载速度比以前更快。为什么它会更快?因为使用了Glide的缓存系统。

在从互联网上加载图片后,Glide将图片缓存在内存和磁盘上,避免了重复的网络请求,并更快地检索图片。因此,在从网络加载图片之前,Glide将首先检查图片在内存或磁盘上是否可用。

但是,根据你的APP,你可能希望避免缓存,例如,如果正在显示的图片可能会经常更改并且不能重新加载。

那么如何禁用缓存?

可以通过调用.skipMemoryCache(true)方法来避免内存缓存。但请注意,图片仍将缓存在磁盘上,为了不让图片在磁盘上缓存,使用 .diskCacheStrategy(DiskCacheStrategy strategy) 方法,该方法采用以下枚举值之一

  • DiskCacheStrategy.NONE:没有数据保存到缓存。
  • DiskCacheStrategy.SOURCE:原始数据保存到缓存。
  • DiskCacheStrategy.RESULT:将转换后的数据结果保存到缓存。
  • DiskCacheStrategy.ALL:缓存原始数据和转换后的数据。

为了完全避免内存和磁盘缓存,只需一个接一个地调用这两种方法:

11.  监听网络请求

在Glide中,可以实现一个RequestListener来监听加载图片时的请求状态。下面两个方法只会调用一个。

  • onException():发生异常时触发,以便处理此方法中的异常。
  • onResourceReady():图片加载成功时触发。

回到我们的图片相册APP,让我们使用RequestListener对象来修改显示的内容,该对象把bitmap设置给ImageView并通过使用Android Palette API提取图片的黑暗和振动颜色来更改布局的背景颜色。

在这里,你还可以隐藏进度对话框,如果有的话。最后,确保在build.gradle中添加了Palette依赖:

12.  测试APP

最后,你可以运行APP了!点击缩略图获取图片的全尺寸版本。

Emulator running the application screenshots

10.动画

如果你运行该APP,你会注意到在加载图片时显示的交叉淡入淡出动画。Glide默认启用该动画,你可以通过调用dontAnimate()方法来禁用它,这样就没有任何动画了。 你还可以通过调用crossFade(int duration)方法来自定义交叉淡入淡出动画,传递的参数为持续时间(以毫秒为单位),该参数用来加快速度或减慢速度 , 默认为300毫秒。

GIF动画

使用Glide在你的APP中显示GIF动画非常简单。它与显示普通图片的工作方式相同

如果你希望图片是GIF格式,请调用asGif()方法,这样可以确保Glide收到GIF,否则会加载失败,传递给.error() 方法的Drawable就会被显示。

播放视频

不幸的是,Glide不支持通过URL加载和显示视频。它只能加载和显示已存储在手机上的视频。通过将URI传递给load()方法来显示视频。

结论

干得漂亮!在本教程中,你已经使用Glide构建了完整的图片相册APP,并且了解了库的工作原理以及如何将其集成到你自己的项目中。你还学习了如何显示本地和远程图片,如何显示GIF动画和视频,以及如何使用图片转换,如调整图片大小。不仅如此,你还看到启用缓存,错误处理和自定义请求监听是多么容易。 你还学习了如何显示本地和远程图片,如何显示GIF动画和视频,以及如何使用图片转换,如调整图片大小。而且,你还看到启用缓存,错误处理和自定义请求监听是多么容易。 最后,你还看到启用缓存,错误处理和自定义请求监听是多么容易。

要了解有关Glide的更多信息,可以参考其  官方文档。要了解有关Android开发的更多信息,请参阅Envato Tuts +上的其他课程和教程!

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.