iOS股票K線圖、分時圖繪製

Geek.發表於2019-04-28

介紹:

這是以雪球APP為原型,基於iOS的K線開源專案。

該專案整體設計思路已經經過某成熟證券APP的商業認證。

本專案將K線業務程式碼儘可能縮減,保留核心功能,可流暢、高效實現手勢互動。

K線難點在於手勢互動和資料動態重新整理上,功能並不複雜,關鍵在於設計思路。

演示:

K線演示文件.gif

建議:

如果搭建K線為公司業務,不建議採用整合度高的開原始碼。龐大臃腫,縱然短期匆忙上線,難以應付後期靈活需求變更。

Objective-C版請移步https://github.com/cclion/CCLKLineChartView

Swift版請移步https://github.com/cclion/KLineView。

設計思路&&難點:

K線難點在於手勢的處理上,捏合、長按、拖拽都需要展示不同效果。以下是Z君當時做K線時遇到的問題的解決方案;

  1. 捏合手勢需要動態改變K線柱的寬度,對應的增加或減少當前介面K線柱的展示數量,並且根據當前展示的資料計算出當前展示資料的極值。

採用UITableView類實現,將K線柱封裝在cell中,在tableview中監聽捏合手勢,對應改變cell的高度,同時重新整理cell中K線柱的佈局來實現動態改變K線柱的寬度。

採用UITableView還有一個好處就是可以採用cell的重用機制降低記憶體。

注意:因為UITableView預設是上下滑動,而K線柱是左右滑動,Z君這裡將UITableView做了一個順時針90°的旋轉。

tableView旋轉90°

  1. K線柱繪製

K線柱採用CAShapeLayer配合UIBezierPath繪製,記憶體低,效率高,棒棒噠!

關於CAShapeLayer的使用大家可以看這篇https://zsisme.gitbooks.io/ios-/content/chapter6/cashapelayer.html

(現在的google、baidu,好文章都搜不到,一搜全是簡單呼叫兩個方法就發的部落格,還是翻了兩年前的收藏才找到這個網站,強烈推薦大家)

  1. 捏合時保證捏合中心點不變,兩邊以捏合中間點為中心進行收縮或擴散

因為UITableView在改變cell的高度時,預設時不會改變偏移量,所以不能保證捏合的中心點不變,這裡我們的小學知識就會用上了。

捏合時狀態.png

我們可以通過變數定義控制元件間距離。

捏合前後.png

保證捏合中心點的中K線柱的中心點還在捏合前,就需要c1 = c2,計算出O2,在捏合完,設定偏移量為O2即可。

計算偏移量.png

  1. K線其他線性指標如何繪製

在K線中除了K線柱之外,還有其他均線指標,連貫整個資料顯示區。

線性指標

由圖可以看出均線指標由每個cell中心點的資料連線相鄰的cell中心點的資料。我們依舊將繪製放在cell中,將相連兩個cell的線分割成兩段,分別在各自所屬的cell中繪製。

需要我們做的就是就是在cell中傳入相鄰的cell的soureData,計算出相鄰中點的位置,分為兩段繪製。

分割繪製

大家針對K線有什麼問題都可以在下面留言,會第一時間解答

本文為第三方轉載,原文連結:www.jianshu.com/p/104857287…

文章若有不對地方,歡迎批評指正,一個小而有用QQ交流群:805558511

相關文章