|
目前在自己的个人项目里，已经开始使用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
|
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)
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
private var animatedTimer: NSTimer?
@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
|
客服电话
APP下载
官方微信
请发表评论