在分時(shí)線寫完以后前计，我們開始接著學(xué)習(xí)如何寫K線胞谭。其實(shí)k線并沒有想象的那么復(fù)雜，還是像前幾篇文章提供的思路一樣残炮，第一步韭赘、第二步、第三步.......把一個(gè)復(fù)雜的問題簡單化势就，才是我們最需要做的事情泉瞻。
首先看一下最終要完成的效果圖：
不管是現(xiàn)貨還是股票類的k線，都是一樣的苞冯。因?yàn)閗線本質(zhì)上是用來表示某個(gè)商品價(jià)格變動(dòng)的情況（如果不了解k線基礎(chǔ)知識(shí)袖牙，點(diǎn)擊這兒）。上圖的k線是由一根根蠟燭組成舅锄，分為主圖鞭达、副圖、主圖指標(biāo)、副圖指標(biāo)四部分畴蹭，其中主圖中還包含日期部分坦仍。
滑動(dòng)的選擇
Tip：如果讀這一小節(jié)的內(nèi)容感覺到云里霧里時(shí)，千萬不要著急叨襟，其實(shí)完全可以略過這小節(jié)內(nèi)容繁扎，跟著文章的思路往下走，等做完這部分內(nèi)容時(shí)糊闽，可以再回顧一下梳玫。
在繪制之前，我們來討論一個(gè)重要的問題右犹，也是這篇文章說的一個(gè)重點(diǎn)提澎，就是關(guān)于滑動(dòng)的選擇。
經(jīng)過使用Reveal對(duì)市面上多個(gè)app的查看念链，以及自己在開發(fā)中踩了好多坑盼忌，在這里提供兩種方式：
- 單個(gè)View
- 單個(gè)View + ScrollView
第一種指的是在主副圖View上添加滑動(dòng)手勢，然后根據(jù)坐標(biāo)產(chǎn)生的位移來實(shí)時(shí)刷新主副圖View上的蠟燭掂墓。
第二種指的是在主副圖View上方蓋一個(gè)ScrollView碴犬，然后用戶滑動(dòng)ScrollView，根據(jù)ScrollView產(chǎn)生的偏移量來實(shí)時(shí)刷新主副圖View上的蠟燭梆暮。
當(dāng)選用第一種方式時(shí)服协，因?yàn)槭翘砑踊瑒?dòng)手勢來獲取的偏移量，所以這個(gè)偏移量不是非常線性啦粹，給用戶的感覺是滑動(dòng)起來不順暢偿荷。解決辦法是獲取偏移量時(shí)，需要多次調(diào)試唠椭，每次獲取的偏移量需要判斷范圍以及增加合適的倍數(shù)跳纳，盡量能保證View獲得的偏移量線性。但使用這種方式的好處是不增加其他控件贪嫂，在視圖層次上很清晰寺庄。
當(dāng)選用第二種方式時(shí)，用戶能感知到的滑動(dòng)體驗(yàn)很好力崇，會(huì)感覺非常流暢斗塘。但有一個(gè)缺點(diǎn)不容忽視，那就是ScrollView的ContentSize是隨著加載的蠟燭數(shù)量的增加而變大的亮靴，因?yàn)橹挥蠧ontentSize和蠟燭數(shù)量相對(duì)應(yīng)時(shí)馍盟，才可以滑動(dòng)到最左或最右。所以茧吊，當(dāng)一次性加載的蠟燭數(shù)量過高贞岭，會(huì)導(dǎo)致一個(gè)巨大的ScrollView存在八毯。
邊框的繪制
當(dāng)明確了我們要達(dá)到的效果后，我們也可以仿照效果圖把k線分為4部分：主圖指標(biāo)瞄桨、主圖话速、副圖指標(biāo)、副圖芯侥。這里默認(rèn)k線4部分是在同一個(gè)View上尿孔，并且是在這個(gè)view上面添加滑動(dòng)手勢。
繪制線段的方法在畫分時(shí)線的文章中就已經(jīng)講過筹麸，這里不再重復(fù)。直接上代碼：
//設(shè)置主圖雏婶、主圖指標(biāo)物赶、副圖、副圖指標(biāo)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];
代碼執(zhí)行效果如下：
需要源碼的話留晚，點(diǎn)這里酵紫。
