正文

使用 Swift 构建自定义的ActivityIndicator View

IP云
IP云V管理员/4 阅读
08/08
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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

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

需求分析

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

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

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

我们先要会画圆弧：

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

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

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

1
let context = UIGraphicsGetCurrentContext()

绘制圆弧

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 初始化一个 UIBezierPath 实例
let arcPath = UIBezierPath()
 
// 构建Arc路径
arcPath.addArcWithCenter(CGPointMake(CGFloat(self.frame.size.width/2), CGFloat(self.frame.size.height/2)), radius: CGFloat(Config.CC_ARC_DRAW_RADIUS), startAngle: CGFloat(DegreesToRadians(startAngle)), endAngle: CGFloat(DegreesToRadians(startAngle + Config.CC_ARC_DRAW_DEGREE)), clockwise: true)
 
// 把路径添加到当前绘图的上下文
CGContextAddPath(context, arcPath.CGPath)
 
// 设置线段宽度
CGContextSetLineWidth(context, CGFloat(Config.CC_ARC_DRAW_WIDTH))
 
// 设置线段颜色
CGContextSetStrokeColorWithColor(context, strokeColor)
 
// 绘制        
CGContextStrokePath(context)

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

1
func addArcWithCenter(center: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, clockwise: Bool)

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

绘制8个圆弧

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

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

1
2
3
4
5
6
7
8
struct Config {
    static let CC_ACTIVITY_INDICATOR_VIEW_WIDTH = 40
    static let CC_ARC_DRAW_PADDING = 3.0
    static let CC_ARC_DRAW_DEGREE = 39.0
    static let CC_ARC_DRAW_WIDTH = 6.0
    static let CC_ARC_DRAW_RADIUS = 10.0
    static let CC_ARC_DRAW_COLORS = [UIColor(red: 242/255.0, green: 242/255.0, blue: 242/255.0, alpha: 1.0).CGColor, UIColor(red: 230/255.0, green: 230/255.0, blue: 230/255.0, alpha: 1.0).CGColor, UIColor(red: 179/255.0, green: 179/255.0, blue: 179/255.0, alpha: 1.0).CGColor, UIColor(red: 128/255.0, green: 128/255.0, blue: 128/255.0, alpha: 1.0).CGColor, UIColor(red: 128/255.0, green: 128/255.0, blue: 128/255.0, alpha: 1.0).CGColor, UIColor(red: 128/255.0, green: 128/255.0, blue: 128/255.0, alpha: 1.0).CGColor, UIColor(red: 128/255.0, green: 128/255.0, blue: 128/255.0, alpha: 1.0).CGColor, UIColor(red: 128/255.0, green: 128/255.0, blue: 128/255.0, alpha: 1.0).CGColor]
    }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
override func drawRect(rect: CGRect) {
 
    let context = UIGraphicsGetCurrentContext()
 
    var startAngle = Config.CC_ARC_DRAW_PADDING
 
    for index in 1...8 {
        let arcPath = UIBezierPath()
        arcPath.addArcWithCenter(CGPointMake(CGFloat(self.frame.size.width/2), CGFloat(self.frame.size.height/2)), radius: CGFloat(Config.CC_ARC_DRAW_RADIUS), startAngle: CGFloat(DegreesToRadians(startAngle)), endAngle: CGFloat(DegreesToRadians(startAngle + Config.CC_ARC_DRAW_DEGREE)), clockwise: true)
        CGContextAddPath(context, arcPath.CGPath)
        startAngle += Config.CC_ARC_DRAW_DEGREE + (Config.CC_ARC_DRAW_PADDING * 2)
 
        CGContextSetLineWidth(context, CGFloat(Config.CC_ARC_DRAW_WIDTH))
        let colorIndex = abs(index - self.animateIndex)
        let strokeColor = Config.CC_ARC_DRAW_COLORS[colorIndex]
        CGContextSetStrokeColorWithColor(context, strokeColor)
        CGContextStrokePath(context)
    }
}

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

动起来

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

1
2
3
func startAnimating()
func stopAnimating()
func isAnimating() -> Bool

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 使用该值驱动改变圆弧颜色，产生动画效果
private var animateIndex: Int = 1
 
// 动画的Timer
private var animatedTimer: NSTimer?
 
// timer响应的事件，在这里setNeedsDisplay让UIKit重画当前视图，然后不断改变animateIndex值。
@objc private func animate () {
    if !self.hidden {
        self.setNeedsDisplay()
        self.animateIndex++
        if self.animateIndex > 8 {
            self.animateIndex = 1
        }
    }
}
 
// 开始动画
func startAnimating () {
 
    if self.hidden {
        self.hidden = false
    }
 
    if let timer = self.animatedTimer {
        timer.fire()
    } else {
        self.animatedTimer = NSTimer(timeInterval: 0.1, target: self, selector: "animate", userInfo: nil, repeats: true)
        NSRunLoop.currentRunLoop().addTimer(self.animatedTimer!, forMode: NSRunLoopCommonModes)
    }
}

这里使用

1
init(timeInterval ti: NSTimeInterval, target aTarget: AnyObject, selector aSelector: Selector, userInfo: AnyObject?, repeats yesOrNo: Bool) -> NSTimer

而不是使用

1
class func scheduledTimerWithTimeInterval(ti: NSTimeInterval, target aTarget: AnyObject, selector aSelector: Selector, userInfo: AnyObject?, repeats yesOrNo: Bool) -> NSTimer

构建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