使用 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个圆弧，并让它在正确的位置，并带上不同颜色。 这里是效果图的一些参数设置，包括半径，宽度，颜色等信息： structConfig{staticletCC_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(r