1.2 制作漂亮的环形进度条 [iOS开发中的神兵利器]

1. 您将在本节课中制作一款漂亮的环形进度条。首先确保在您的项目中，已经安装了所需的第三方库，使用手指双击查看此处的Pod配置文件。

image

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

image

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

image

4. 现在开始编写代码，实现环形进度条的功能。

image

5. 首先在当前的类文件中，引入第三方的类库。

image

6. 接着给当前的类添加一个环形进度条类型的属性。

image

7. 然后创建一个指定的矩形区域，并初始化一个位于该矩形区域的环形进度条。

image

8. 设置环形进度条的背景颜色为无色。

image

9. 接着设置环形进度条的视图样式，环形进度条共有四种视觉样式，分别用1至4之间的四个数字表示。当前的样式是内圈比较小，外圈则比较大。

image

10. 设置环形进度条的最大值为100。

image

11. 设置环形进度条的字体颜色为浅灰色。

image

12. 设置环形进度条的进度标识文字的大小为90。

image

13. 接着设置内圈端点的样式，端点样式共有默认、圆形、方形等三种样式，使用1至3之间的三个数字表示。

image

14. 设置内圈的宽度为20。

image

15. 设置内圈和外圈之间的距离为10。

image

16. 接着依次设置内圈和外圈的线条颜色，分别为橙色和紫色。

image

17. 设置外圈的宽度同样为20。

image

18. 设置环形进度条的动画样式，动画样式共有线性、渐入、渐出、渐入和渐出等四种。此处设置为线性动画的样式。

image

19. 现在创建一个按钮控件，当点击该按钮时，播放环形进度条的进度动画。

image

20. 设置按钮控件的显示区域。

image

21. 依次设置按钮控件的背景颜色和字体颜色，分别为棕色和白色。

image

22. 设置按钮控件在正常状态下的标题文字。

image

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

image

24. 最后将按钮和环形进度条对象，依次添加到当前视图控制器的根视图。

image

25. 并设置根视图的背景颜色为棕色。

image

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

image

27. 当按钮被点击时，调用环形进度条的设置进度方法，将环形进度条的进度，以动画的方式，在5秒钟的时间里，前进到100的位置。

image

28. 当环形进度条到达指定数值时，在控制台输出一条指示信息。最后点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

29. 在弹出的模拟器中，点击开始按钮，环形进度条将开始前进到指定的数值。

30. 观察控制台底部输出的日志信息，然后点击[停止]按钮，关闭模拟器，并结束本节课程。

image

image

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

apps8 2.png