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

这