iOS开发中的神兵利器

5.11 使用Kingfisher进行图像加载Loading效果

2018-04-12  本文已影响15人  互动教程网

1. 本节课将为您演示,图像视图的Loading动画的效果,以及图片的缓存。首先确保在您的项目中,已经安装了所需的第三方库。手指双击此处查看安装配置文件。

image

2. 根据配置文件中的相关设置,安装第三方库。安装完成之后,双击打开此处的项目文件。

image

3. 然后在左侧的项目导航区,打开视图控制器的代码文件。

image

4. 现在开始编写代码,依次使用图像视图类型的各个扩展方法。

image

5. 首先在当前的类文件中,引入已经安装的第三方类库。

image

6. 添加一个图像视图变量,作为当前类的属性。

image

7. 设置根视图的背景颜色为橙色。

image

8. 从项目中读取一张图片,并创建一个图像视图,显示加载的图片。

image

9. 设置图像视图的显示区域,和根视图相同,然后将图像视图添加到根视图中。

image

10. 然后添加一个按钮,当用户点击该按钮时,下载一张网络图片。

image

11. 设置按钮的背景颜色为橙色,同时设置按钮在正常状态下的标题文字。

image

12. 给按钮控件绑定点击事件。

image

13. 将按钮添加到根视图。

image

14. 添加一个方法,用来响应按钮的点击事件。

image

15. 初始化一个网址对象,作为网络图片的地址。

image

16. 设置图像视图的加载动画的样式,这里使用系统默认的Loading动画。

image

17. 将图像视图显示的内容,修改为下载后的图片。接着点击左上角的[编译并运行]按钮,启动模拟器预览项目。

image

18. 在弹出的模拟器上,显示了一个图像视图,以及底部的按钮控件。点击此处的按钮,加载一张网络上的图片。

19. 当下载网络图片时,首先显示了一个Loading动画,在下载完成后,Loading动画消失,并在图像视图中显示下载后的图片。

image

20. 接着修改此处的代码。

image

21. 获得项目中的动画资源的路径。

image

22. 然后从项目中读取一张Gif动画。

image

23. 设置在下载图片时,使用这张动画素材,作为图片下载时的Loading动画。

image

24. 将图像视图显示的内容,修改为下载后的图片。接着点击左上角的[编译并运行]按钮,启动模拟器预览项目。

image

25. 在弹出的模拟器上,显示了一个图像视图,以及底部的按钮控件。再次点击此处的按钮,加载一张网络上的图片。

26. 当下载网络图片时,首先显示了一个自定义的Loading动画,在下载完成后,Loading动画消失,并在图像视图中显示下载后的图片。

image

27. 接着通过调用图像视图对象的扩展方法,下载并设置网络上的图片,同时显示下载的进度。

image

28. 通过已经接收的字节数和全部的字节数,计算图片下载进度的百分比。

image

29. 通过调用图像视图对象的扩展方法,下载并设置网络上的图片。当下载完成后,使用渐显的方式,显示下载的图片。

image

30. 初始化一个圆角图片处理器,并设置圆角的半径为160。

image

31. 通过调用图像视图对象的扩展方法,下载并设置网络上的图片,同时给下载的图片添加圆角效果。

image

32. 再次点击此处的按钮,加载一张网络上的图片。

image

33. 图片下载完成后,在图像视图上显示了下载后的图片,图片拥有圆角效果。点击此处的[停止]按钮,关闭模拟器。

image

34. 初始化一个模糊图像处理器,并设置模糊的半径为4,接着再增加一个圆角处理器。

image

35. 通过调用图像视图对象的扩展方法,下载并设置网络上的图片,同时给下载的图片添加模糊和圆角效果。

image

36. 当再次给图像视图,设置同一个网络图片时,使用的是缓存的图片,如果需要重复下载图片,可以设置下载选项为强制刷新。

image

37. 如果需要从缓存中获取图片,可以设置下载的选项为来自缓存。

image

38. 接着演示图片缓存的使用。首先通过图片下载器,下载指定网址的图片。

image

39. 将下载的图像转换成指定的图片格式。

image

40. 通过调用图片缓存全局对象的存储方法,将图片存储在本地,并设置存储的键值。

image

41. 通过简化的方法,可以仅需指定键值,即可快速缓存图片。

image

42. 通过键值可以快速判断在某键值下,是否存在缓存的图片。接着点击左上角的[编译并运行]按钮,启动模拟器预览项目。

image

43. 再次点击此处的按钮,加载一张网络上的图片。

44. 在图片下载完成后,图片被缓存在本地,并在控制台输出相关的日志。点击此处的[停止]按钮,关闭模拟器。

image

45. 通过图片缓存全局对象的删除图像方法,可以删除指定键值的缓存图像。

image

46. 通过图片缓存全局对象的清除磁盘缓存方法,可以删除磁盘上的所有缓存的图片。

image

47. 通过调用清除内存缓存方法,可以删除在内存中缓存的所有图片。

image

48. 通过调用清除过期的磁盘缓存,可以删除超过指定期限的,缓存在磁盘上的图片。

image

49. 第三方类库允许开发者设置缓存区域的大小,这里设置缓存的空间为50兆。

image

50. 设置缓存的期限为7天,超过7天的缓存图片将被删除。最后设置图片下载超时的时限为30秒,当超过30秒时,下载任务失败。

image

image

本文整理自:《app开发中的神兵利器》,真正的[手把手]教学模式,用最快的速度上手iOS开发,苹果商店App Store免费下载:https://itunes.apple.com/cn/app/id1209739676,或扫描本页底部的二维码。课程配套素材下载地址:资料下载

apps8 2.png
上一篇下一篇

猜你喜欢

热点阅读