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

版权声明:本文为员凯的原创文章,欢迎转载,转载请注明来源(http://blog.csdn.net/nethanhan) https://blog.csdn.net/yunkai666/article/details/72591609

k线系列目录

查看目录请点击这儿


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

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

K线

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

滑动的选择

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

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

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

  1. 单个View
  2. 单个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];

代码执行效果如下:

k线边框

需要源码的话,点这里

没有更多推荐了,返回首页