使用 Swift 构建自定义的ActivityIndicator View

目前在自己的个人项目里，已经开始使用Swift去编写代码。这篇文章把项目中自己设计的一个ActivityIndicator View展示给大家。

在开始之前，我们先看看最终的效果，如下图：



我建议大家下载本文对应在Github分享的完整项目，以便跟着本篇文章来阅读代码。

需求分析

我们需要实现一个自定义的和 UIActivityIndicatorView 提供相似功能的一个Loading效果。我们将使用 Core Graphics 来绘制这样的效果，并让它动起来。

让我们先分析一下这个控件的组成，为我们实际编码提供具体的思路。

首先，这个loading效果图，是由8个圆弧组成的一个圆。

我们先要会画圆弧：



像这样画8个圆弧，围成一个圆：



然后通过重复改变每一个圆弧的颜色，让它动起来。

我们继承UIView, 重写drawRect方法绘制界面，第一步得到当前绘图的上下文：

绘制圆弧

这里我们使用 UIBezierPath 类去构建路径，然后通过绘制路径的方式绘制圆弧。

通过如上的方式，我们就可以成功画出一个圆弧。其中：

这个方法构建路径的解释是 center 为圆点坐标，radius 为半径，startAngle 为开始的弧度，endAngle 为结束的弧度，clockwise 表示的是顺时针还是逆时针。

绘制8个圆弧

当我们可以成功在绘图上下文绘制出圆弧时，我们应该开始着手绘制效果图中的8个圆弧，并让它在正确的位置，并带上不同颜色。

这里是效果图的一些参数设置，包括半径，宽度，颜色等信息：

我们可以在drawRect方法，循坏绘制8个圆弧，此时完整的代码看上去像这样：

使用for循环绘制8次，产生8个圆弧，并且设置不同的颜色。这里的self.animateIndex用来跟踪整个动画的头一个颜色最浅圆弧的位置。通过它和当前index的绝对值，获得当前圆弧应该显示的颜色。

动起来

在设计一个ActivityIndicator View的时候，我们应该像UIKit提供的 UIActivityIndicatorView 一样，至少需要实现这三组API:

这里我们使用一个timer去改变self.animateIndex的值，不断重画当前视图，来产生动画效果，代码看起来像这样：

这里使用

而不是使用

构建timer的原因是：当我们在使用自己的ActivityIndicator View的时候，我们可能把它放到UIScrollView上面。这个时候使用scheduledTimerWithTimeInterval创建的timer是加入到当前Run Loop中的，而UIScrollView在接收到用户交互事件时，主线程Run Loop会设置为UITrackingRunLoopMode。这个时候会导致timer失效。更详细的解答，我在走进Run Loop的世界 (一)：什么是Run Loop？一文中有说明。

总结

到这个时候，我们应该就能看到和效果图一样的动画效果。但是写一个可供使用的自定义控件时，应该考虑更多的细节工作。比如初始化，视图移除，intrinsicContentSize，是否需要支持 @IBInspectable 和 @IBDesignable 等等，来让使用我们控件的开发者更加友好。更加详细的代码和Demo可以去这里查看：https://github.com/yechunjun/CCActivityIndicatorView