使用 Swift 构建自定义的ActivityIndicator View.doc

目前在自己的个人项目里，已经开始使用Swift去编写代码。这篇文章把项目中自己设计的一个ActivityIndicator View展示给大家。在开始之前，我们先看看最终的效果，如下图：我建议大家下载本文对应在Github分享的完整项目，以便跟着本篇文章来阅读代码。需求分析我们需要实现一个自定义的和UIActivityIndicatorView提供相似功能的一个Loading效果。我们将使用Core Graphics来绘制这样的效果，并让它动起来。让我们先分析一下这个控件的组成，为我们实际编码提供具体的思路。首先，这个loading效果图，是由8个圆弧组成的一个圆。我们先要会画圆弧：像这样画8个圆弧，围成一个圆：然后通过重复改变每一个圆弧的颜色，让它动起来。我们继承UIView, 重写drawRect方法绘制界面，第一步得到当前绘图的上下文：letcontext=UIGraphicsGetCurrentContext()绘制圆弧这里我们使用UIBezierPath类去构建路径，然后通过绘制路径的方式绘制圆弧。/初始化一个UIBezierPath实例letarcPath=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)通过如上的方式，我们就可以成功画出一个圆弧。其中：funcaddArcWithCenter(center:CGPoint,radius:CGFloat,startAngle:CGFloat,endAngle:CGFloat,clockwise:Bool)这个方法构建路径的解释是center为圆点坐标，radius为半径，startAngle为开始的弧度，endAngle为结束的弧度，clockwise表示的是顺时针还是逆时针。绘制8个圆弧当我们可以成功在绘图上下文绘制出圆弧时，我们应该开始着手绘制效果图中的8个圆弧，并让它在正确的位置，并带上不同颜色。这里是效果图的一些参数设置，包括半径，宽度，颜色等信息：structConfigstaticletCC_ACTIVITY_INDICATOR_VIEW_WIDTH=40staticletCC_ARC_DRAW_PADDING=3.0staticletCC_ARC_DRAW_DEGREE=39.0staticletCC_ARC_DRAW_WIDTH=6.0staticletCC_ARC_DRAW_RADIUS=10.0staticletCC_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个圆弧，此时完整的代码看上去像这样：overridefuncdrawRect(rect:CGRect)letcontext=UIGraphicsGetCurrentContext()varstartAngle=Config.CC_ARC_DRAW_PADDINGforindexin1.8letarcPath=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)letcolorIndex=abs(index-self.animateIndex)letstrokeColor=Config.CC_ARC_DRAW_COLORScolorIndexCGContextSetStrokeColorWithColor(context,strokeColor)CGContextStrokePath(context)使用for循环绘制8次，产生8个圆弧，并且设置不同的颜色。这里的self.animateIndex用来跟踪整个动画的头一个颜色最浅圆弧的位置。通过它和当前index的绝对值，获得当前圆弧应该显示的颜色。动起来在设计一个ActivityIndicator View的时候，我们应该像UIKit提供的 UIActivityIndicatorView 一样，至少需要实现这三组API:funcstartAnimating()funcstopAnimating()funcisAnimating()-Bool这里我们使用一个timer去改变self.animateIndex的值，不断重画当前视图，来产生动画效果，代码看起来像这样：/使用该值驱动改变圆弧颜色，产生动画效果privatevaranimateIndex:Int=1/动画的TimerprivatevaranimatedTimer:NSTimer?/timer响应的事件，在这里setNeedsDisplay让UIKit重画当前视图，然后不断改变animateIndex值。objcprivatefuncanimate()if!self.hiddenself.setNeedsDisplay()self.animateIndex+ifself.animateIndex8self.animateIndex=1/开始动画funcstartAnimating()ifself.hiddenself.hidden=falseiflettimer=self.animatedTimertimer.fire()elseself.animatedTimer=NSTimer(timeInterval:0.1,target:self,selector:”animate”,userInfo:nil,repeats:true)NSRunLoop.currentRunLoop().addTimer(self.animatedTimer!,forMode:NSRunLoopCommonModes)这里使用init(timeIntervalti:NSTimeInterval,targetaTarget:AnyObject,selectoraSelector:Selector,userInfo:AnyObject?,repeatsyesOrNo:Bool)-NSTimer而不是使用classfuncscheduledTimerWithTimeInterval(ti:NSTimeInterval,targetaTarget:AnyObject,selectoraSelector:Selector,userInfo:AnyObject?,repeatsyesOrNo:Bool)-NSTimer构建timer的原因是：当我们在使用自己的ActivityIndicator View的时候，我们可能把它放到UIScrollView上面。这个时候使用scheduledTimerWithTimeInterval创建的timer是加入到当前Run Loop中的，而UIScrollView在接收到用户交互事件时，主线程Run Loop会设置为UITrackingRunLoopMode。这个时候会导致timer失效。更详细的解答，我在走进Run Loop的世界 (一)：什么是Run Loop？一文中