IOS端K线系列之K线-边框绘制、滑动选择

k线系列目录

查看目录请点击这儿

在分时线写完以后，我们开始接着学习如何写K线。其实k线并没有想象的那么复杂，还是像前几篇文章提供的思路一样，第一步、第二步、第三步…….把一个复杂的问题简单化，才是我们最需要做的事情。

首先看一下最终要完成的效果图：



不管是现货还是股票类的k线，都是一样的。因为k线本质上是用来表示某个商品价格变动的情况（如果不了解k线基础知识，点击这儿）。上图的k线是由一根根蜡烛组成，分为主图、副图、主图指标、副图指标四部分，其中主图中还包含日期部分。

滑动的选择

Tip：如果读这一小节的内容感觉到云里雾里时，千万不要着急，其实完全可以略过这小节内容，跟着文章的思路往下走，等做完这部分内容时，可以再回顾一下。

在绘制之前，我们来讨论一个重要的问题，也是这篇文章说的一个重点，就是关于滑动的选择。

经过使用Reveal对市面上多个app的查看，以及自己在开发中踩了好多坑，在这里提供两种方式：

单个View

单个View + ScrollView

第一种指的是在主副图View上添加滑动手势，然后根据坐标产生的位移来实时刷新主副图View上的蜡烛。

第二种指的是在主副图View上方盖一个ScrollView，然后用户滑动ScrollView，根据ScrollView产生的偏移量来实时刷新主副图View上的蜡烛。

当选用第一种方式时，因为是添加滑动手势来获取的偏移量，所以这个偏移量不是非常线性，给用户的感觉是滑动起来不顺畅。解决办法是获取偏移量时，需要多次调试，每次获取的偏移量需要判断范围以及增加合适的倍数，尽量能保证View获得的偏移量线性。但使用这种方式的好处是不增加其他控件，在视图层次上很清晰。

当选用第二种方式时，用户能感知到的滑动体验很好，会感觉非常流畅。但有一个缺点不容忽视，那就是ScrollView的ContentSize是随着加载的蜡烛数量的增加而变大的，因为只有ContentSize和蜡烛数量相对应时，才可以滑动到最左或最右。所以，当一次性加载的蜡烛数量过高，会导致一个巨大的ScrollView存在。

边框的绘制

当明确了我们要达到的效果后，我们也可以仿照效果图把k线分为4部分：主图指标、主图、副图指标、副图。这里默认k线4部分是在同一个View上，并且是在这个view上面添加滑动手势。

绘制线段的方法在画分时线的文章中就已经讲过，这里不再重复。直接上代码：

//设置主图、主图指标、副图、副图指标rect
_mainIndexRect = CGRectMake(0, 0, CGRectGetWidth(self.frame), mainIndexH);
_mainRect = CGRectMake(0, mainIndexH, CGRectGetWidth(self.frame), (CGRectGetHeight(self.frame) - (mainIndexH + accessoryIndexH + dateH)) * mainFrameScale);
_accessoryIndexRect = CGRectMake(0, mainIndexH + CGRectGetHeight(_mainRect)+dateH, CGRectGetWidth(self.frame), accessoryIndexH);
_accessoryRect = CGRectMake(0, mainIndexH + CGRectGetHeight(_mainRect)+dateH+accessoryIndexH, CGRectGetWidth(self.frame), (CGRectGetHeight(self.frame) - (mainIndexH + accessoryIndexH + dateH)) * (1-mainFrameScale));

CAShapeLayer *borderLayer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.bounds];

[path moveToPoint:CGPointMake(0, mainIndexH)];
[path addLineToPoint:CGPointMake(CGRectGetWidth(self.frame), mainIndexH)];

[path moveToPoint:CGPointMake(0, CGRectGetMaxY(_mainRect))];
[path addLineToPoint:CGPointMake(CGRectGetWidth(self.frame), CGRectGetMaxY(_mainRect))];

[path moveToPoint:CGPointMake(0, CGRectGetMinY(_accessoryIndexRect))];
[path addLineToPoint:CGPointMake(CGRectGetWidth(self.frame), CGRectGetMinY(_accessoryIndexRect))];

[path moveToPoint:CGPointMake(0, CGRectGetMinY(_accessoryRect))];
[path addLineToPoint:CGPointMake(CGRectGetWidth(self.frame), CGRectGetMinY(_accessoryRect))];

float mainUnitH = CGRectGetHeight(_mainRect) / 4.f;
float mainUnitW = CGRectGetWidth(_mainRect) / 4.f;

for (int idx = 1; idx <= 3; idx++)
{
//画3条横线
[path moveToPoint:CGPointMake(0, mainIndexH + mainUnitH * idx)];
[path addLineToPoint:CGPointMake(CGRectGetWidth(self.frame), mainIndexH + mainUnitH * idx)];

//画3条竖线
[path moveToPoint:CGPointMake(idx * mainUnitW, mainIndexH)];
[path addLineToPoint:CGPointMake(idx * mainUnitW, CGRectGetMaxY(_mainRect))];

//画3条竖线
[path moveToPoint:CGPointMake(idx * mainUnitW, CGRectGetMinY(_accessoryRect))];
[path addLineToPoint:CGPointMake(idx * mainUnitW, CGRectGetMaxY(_accessoryRect))];
}

float accessoryUnitH = CGRectGetHeight(_accessoryRect) / 2.f;
[path moveToPoint:CGPointMake(0, CGRectGetMaxY(_accessoryRect) - accessoryUnitH)];
[path addLineToPoint:CGPointMake(CGRectGetWidth(self.frame), CGRectGetMaxY(_accessoryRect) - accessoryUnitH)];

borderLayer.path = path.CGPath;
borderLayer.lineWidth = 0.5f;
borderLayer.strokeColor = [UIColor blackColor].CGColor;
borderLayer.fillColor = [UIColor clearColor].CGColor;

[self.layer addSublayer:borderLayer];

代码执行效果如下：



需要源码的话，点这里。