swift:打造你自己的折线图
看到苹果Health里的折线图了吗。我们就是要打造一个这样的折线图。没看过的请看下图。
我们的主题在于折线图本身。其他的包括步数、日平均值等描述类的内容这里就不涉及了。
首先观察，这个图种包含些什么组成部分。线？这个太明显都看见了。还有每个节点的小圆圈，还有折线图里从上到下的渐变。这里是白色的从上到下逐渐透明的效果。还有一条虚线。这个暂时先不考虑了。你能绘制出来最下面的x轴标尺，绘制个虚线还不是小菜？
为什么说是绘制呢，因为显然我们不想用一个UIView把像素设置为1，背景色设置为UIColor.whiteColor()，然后设置View的倾斜度的方式来堆砌这个line chat。首先必须严重的鄙视这种做法。在开发中不能光是把各种UIButton、UILabel什么的设定好了frame就网上没完没了的堆。或者更有甚者直接拖动这些控件到Storyboard上。摆个位置，设置个宽和高别的就完全不管了。autolayout什么的一概不问，使用了storyboard也适配不了多分辨率。这样的结果是谁维护代码谁遭殃。
正确的做法是提升代码。有多个地方都用到同样的组合控件的时候，比如多选框、单选框，就自定义一个。这样，至少可以达到一改全改的效果。代码维护简单了很多。同时需要考虑效率的问题。比如我们的line chart，就使用Core Graphics和QuartzCore框架中的CAShapeLayer绘制。这样执行效率明显比堆砌UIView的方法效率高--占用资源少，执行快。
看看CALayer的定义：
class CALayer : NSObject, NSCoding, CAMediaTiming
再看看UIView的定义：
class UIView : UIResponder, NSCoding, UIAppearance, NSObjectProtocol, UIAppearanceContainer, UIDynamicItem, UITraitEnvironment, UICoordinateSpace
你就应该知道为什么完全不能用UIView来堆砌这个图了。
言归正传！画线可以用Core Graphics一点点的画，也可以用CALayer来话，准确的说是CAShapeLayer更方便，所以我们用CAShapeLayer来画线。用CAShapeLayer画线灰常之简单。总的来说就是设定路线（Path），然后把这个路线赋值给这个layer画线就完成了。比如，初始化一条贝塞尔曲线，然后指定好center point和半径，起始角度和结束角度，然后“BANG”。“BANG”是一个象声词，龙珠里很多。指定你的CAShapeLayer实例的path属性值为这个path。此处略去一堆什么给你的view.layer.addsublayer什么的细节。运行后你就会看到一个从起始角度到结束角度的一个半圆。
运行起来之后，你会看到这个半圆和你需要的起始角度、结束角度差很多。所以，还是画一个正圆比较容易一些。尤其现在我们才刚刚开始接触这个神秘的东东。等下还有更神秘的。。。要画正圆只要指定起始角度为0（这里需要严重说明一下，角度都是弧度制的，比如，π、2π什么的）。结束角度为2π，也就是(M_PI * 2)。半径随便，圆心最好设定在屏幕的中心，也就是：
UIScreen.mainScreen().bounds.height / 2和UIScreen.mainScreen().bounds.width / 2。这样就是在屏幕中心点，以你给定的值为半径画了一个圆圈。效果如图：
给的贝塞尔曲线是这样的：
UIBezierPath(arcCenter: centerPoint, radius: CGRectGetWidth(bounds) / 2 - 30.0, startAngle: 0, endAngle: CGFloat(M_PI * 2.0), clockwise: true).CGPath
这里需要注意的是一定要在最后调用属性CGPath，这个才是CAShapeLayer可以接受的Path的类型。直接赋值是会报错的。在贝塞尔曲线初始化的过程中角度值需要使用CGFloat类型。M_PI是Double类型的。这里需要类型转换一下。否则报错会报在radius的身上，但是起始是角度的类型问题。
圆是画出来了，但是我们要绘制的是line chart，是直线。该如何解决呢。这里就需要说明一下绘制线的一般感性认识。首先CAShapeLayer需要知道绘制的起始点在哪里，其次，从哪一点到哪一点绘制一条线。对于圆的贝塞尔曲线来说自然是从角度为0的，半径长度和圆心来开始画线，线一直延续到结束角度2π（PI）。对于一条直线就简单多了。起点是指定的一个点。然后，添加一条线到另一个点。来看看如何具体的用代码画一条线。
var path = CGPathCreateMutable() var x = UIScreen.mainScreen().bounds.width / 2, y = UIScreen.mainScreen().bounds.height / 5 CGPathMoveToPoint(path, nil, 0, y * 2)
CGPathAddLineToPoint(path, nil, 0, 0)
CGPathAddLineToPoint(path, nil, x - kRadiusLength, 0)
CGPathAddLineToPoint(path, nil, bounds.size.width, bounds.size.height)
progressLayer.path = path
线就是这么画出来的。有线了以后就需要考虑另一个问题了，线下面的渐变色。这个就需要用到另一种Layer：CAGradientLayer。CAGradientLayer有一个属性可以做到这一点，这个属性就是colors。给这个属性多少颜色，CAGradientLayer就会出现多少从一个颜色到另一个颜色的渐变。注意一点，这里需要的颜色都是UIColor.yellowColor().CGColor。看到这个CGColor了吗？一定要这个颜色才行。否则，不报错，也不显示任何的颜色！
代码：
var gradientLayer2 = CAGradientLayer() gradientLayer2.startPoint = CGPointMake(0.5, 1.0) gradientLayer2.endPoint = CGPointMake(0.5, 0.0) gradientLayer2.frame = CGRectMake(0, 0, bounds.size.width, bounds.size.height) gradientLayer2.colors = [UIColor.yellowColor().CGColor, UIColor.blueColor().CGColor, UIColor.greenColor().CGColor] self.view.layer.addSublayer(gradientLayer2)
这效果就出来了：
到这里你应该就明白了。图一种的白色到透明的渐变其实就是不同alpha的白色赋值给了colors属性。
gradientLayer2.colors = [UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.0).CGColor, UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.5).CGColor, UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.8).CGColor]
看效果，白色从上到下的渐变填充已经出来了。画线前面已经讲过。现在的问题就是让这个填充按照画得线剪裁。这个非常简单。
我们来给上面的CAShapeLayer这样的一个路线：
var path = CGPathCreateMutable() CGPathMoveToPoint(path, nil, 0, UIScreen.mainScreen().bounds.height) CGPathAddLineToPoint(path, nil, 0, 0) CGPathAddLineToPoint(path, nil, x - kRadiusLength, 0) CGPathAddLineToPoint(path, nil, bounds.size.width, bounds.size.height / 2)
然后，就让CAGradientLayer的mask属性为这个CAShapeLayer。
gradientLayer.mask = progressLayer
这样一来。效果就出来了。
但是。。仔细一个，填充的渐变白色图是有了，那么线呢？白色的线没有。CAShapeLayer的线最终都只是成为CAGradientLayer的剪裁线。要解决这个问题就要上下面的重头戏了。
为了解决这个问题，我们不得不祭出Core Graphics神器了。总体的构造思路是在Controller中添加一个View，在这个View中使用Core Graphics来画线，之后在上面添加我们上文说到的两个Layer。也就是下面画线，然后用Layer来完成渐变色的填充和对这个填充色的剪裁。
Core Graphics画线比CALayer还是麻烦一些的，但是思路总体上一致。也是把画笔放到起始点（在哪里开始画线）。之后也是从哪里到哪里画线。总体来说，画线的思路就是这样。
首先，需要在Core Graphics中铺上画布：
var context = UIGraphicsGetCurrentContext()
2. 指定线的颜色和线的宽度：
CGContextSetStrokeColorWithColor(context, UIColor.whiteColor().CGColor) CGContextSetLineWidth(context, 1.0)
3. 开始画线：
CGContextMoveToPoint(context, kBottomMargin, CGRectGetHeight(rect) - kBottomMargin)
CGContextAddLineToPoint(context, CGRectGetWidth(rect) - kBottomMargin, CGRectGetHeight(rect) - kBottomMargin)
这里必须补充一点。在画线的时候，我们需要一些列的点坐标。暂时，只是用模拟的方式实现。var x = calculateX(0)和var y = calculateY(0)就是第一个点得x，y坐标的计算方法。具体的代码在后面。这些给定的点需要映射到你的画布的坐标系中。calculateX、Y就是做这个映射的。虽然省略了一些步骤。但是你应该可以从初中的数学基础中明白这个是怎么回事的，所以此处只做解释其他省略。
func calculateX(i: Int) -> CGFloat { var x = kBottomMargin + CGFloat(i) * kUnitLabelWidth! return x }
kBottomMargin是x点在左侧的一个margin。只是展示需要，不用关心。 CGFloat(i) * kUnitLabelWidth!，i是第几个点，也就是x轴上的index。kUnitLabelWidth!是x轴上两点之间的距离，至于感叹号就不多解释了，那个是swift的基础。
func calculateY(i: Int) -> CGFloat { var y: CGFloat = 0 switch(i){ case 0: y = kTotalYValue! * 0.5 break case 1: y = kTotalYValue! * 0.3 break case 2: y = kTotalYValue! * 0.7 break case 3: y = kTotalYValue! * 0.7 break case 4: y = kTotalYValue! * 0.2 break case 5: y = kTotalYValue! * 0.8 break default: y = 0 break } return y }
这里主要计算，每个x点对应的y点（这里就摸你了y值对应在画布坐标系的方法）。
有了以上的只是就可以画出折线图了。具体的方法如下：
override func drawRect(rect: CGRect) { println("drawRect") var context = UIGraphicsGetCurrentContext() // CGContextSetStrokeColorWithColor(context, UIColor.blueColor().CGColor) // CGContextSetLineWidth(context, 4.0) // CGContextMoveToPoint(context, kBottomMargin, kBottomMargin) // CGContextAddLineToPoint(context, CGRectGetWidth(rect) - kBottomMargin, CGRectGetHeight(rect) - kBottomMargin) // CGContextStrokePath(context) CGContextSetStrokeColorWithColor(context, UIColor.whiteColor().CGColor) CGContextSetLineWidth(context, 1.0) CGContextMoveToPoint(context, kBottomMargin, CGRectGetHeight(rect) - kBottomMargin) CGContextAddLineToPoint(context, CGRectGetWidth(rect) - kBottomMargin, CGRectGetHeight(rect) - kBottomMargin) // CGContextStrokePath(context) CGContextSetFillColorWithColor(context, UIColor.orangeColor().CGColor) var x = calculateX(0) var y = calculateY(0) var prePoint: CGPoint = CGPointMake(x, y) for var index = 0; index < 6; index++ { var x = calculateX(index) var y = calculateY(index) var textY = CGRectGetHeight(rect) - kBottomMargin + 3 CGContextMoveToPoint(context, x, CGRectGetHeight(rect) - kBottomMargin) CGContextAddLineToPoint(context, x, CGRectGetHeight(rect) - kBottomMargin + kUnitLabelHeight) var labelString = NSString(string: "\(kBaseLabelString) \(index)") labelString.drawAtPoint(CGPointMake(x + kUnitLabelHeight, textY), withAttributes: [NSFontAttributeName: kLabelFont, NSForegroundColorAttributeName: kLabelFontColor]) CGContextStrokePath(context) CGContextMoveToPoint(context, x, y) // CGContextSetLineWidth(context, 2.0) var path = UIBezierPath(arcCenter: CGPointMake(x, y), radius: kCircleRadiusLength, startAngle: CGFloat(0.0) , endAngle: CGFloat(2 * M_PI), clockwise: true) CGContextAddPath(context, path.CGPath) // CGContextFillPath(context) CGContextStrokePath(context) // var offset: CGFloat = kCircleRadiusLength * CGFloat(sin(M_PI_4)) var offset = calculateOffset(prePoint.x, prePoint.y, x, y, kCircleRadiusLength) if prePoint.x != x /*&& prePoint.y != y*/ { if y > prePoint.y { CGContextMoveToPoint(context, prePoint.x + offset.offsetX, prePoint.y + offset.offsetY) CGContextAddLineToPoint(context, x - offset.offsetX, y - offset.offsetY) } else if y < prePoint.y { CGContextMoveToPoint(context, prePoint.x + offset.offsetX, prePoint.y - offset.offsetY) CGContextAddLineToPoint(context, x - offset.offsetX, y + offset.offsetY) } else{ CGContextMoveToPoint(context, prePoint.x + offset.offsetX, prePoint.y) CGContextAddLineToPoint(context, x - offset.offsetX, y) } CGContextStrokePath(context) prePoint = CGPointMake(x, y) } } // CGContextMoveToPoint(context, x, y) CGContextSetLineWidth(context, 3) CGContextSetStrokeColorWithColor(context, UIColor.greenColor().CGColor) CGContextSetFillColorWithColor(context, UIColor.blueColor().CGColor) var circleRect = CGRectMake(x, y, 15, 15) circleRect = CGRectInset(circleRect, 3, 3) CGContextFillEllipseInRect(context, circleRect) CGContextStrokeEllipseInRect(context, circleRect) }
这一段代码：
var path = UIBezierPath(arcCenter: CGPointMake(x, y), radius: kCircleRadiusLength, startAngle: CGFloat(0.0) , endAngle: CGFloat(2 * M_PI), clockwise: true) CGContextAddPath(context, path.CGPath)
就是用来在各条线之间画圆圈的。
以几乎略有不同的算法可以在calayer上绘制出CAGradientLayer的mask路线。也就是在core graphics里画得白线和在纸上铺上去的mask以后的gradient layer可以严丝合缝的组合在一起。这是看起来才能和苹果的health app一样的效果。这里需要说明，在添加了圆圈之后，每次画线的时候需要考虑要把线缩短。如果直接按照原来的方式的话，会优先穿过圆圈。
