介紹:
這是以雪球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線時遇到的問題的解決方案;
- 捏合手勢需要動態改變K線柱的寬度,對應的增加或減少當前介面K線柱的展示數量,並且根據當前展示的資料計算出當前展示資料的極值。
採用UITableView類實現,將K線柱封裝在cell中,在tableview中監聽捏合手勢,對應改變cell的高度,同時重新整理cell中K線柱的佈局來實現動態改變K線柱的寬度。
採用UITableView還有一個好處就是可以採用cell的重用機制降低記憶體。
注意:因為UITableView預設是上下滑動,而K線柱是左右滑動,Z君這裡將UITableView做了一個順時針90°的旋轉。
tableView旋轉90°
- K線柱繪製
K線柱採用CAShapeLayer配合UIBezierPath繪製,記憶體低,效率高,棒棒噠!
關於CAShapeLayer的使用大家可以看這篇https://zsisme.gitbooks.io/ios-/content/chapter6/cashapelayer.html
(現在的google、baidu,好文章都搜不到,一搜全是簡單呼叫兩個方法就發的部落格,還是翻了兩年前的收藏才找到這個網站,強烈推薦大家)
- 捏合時保證捏合中心點不變,兩邊以捏合中間點為中心進行收縮或擴散
因為UITableView在改變cell的高度時,預設時不會改變偏移量,所以不能保證捏合的中心點不變,這裡我們的小學知識就會用上了。
捏合時狀態.png
我們可以通過變數定義控制元件間距離。
捏合前後.png
保證捏合中心點的中K線柱的中心點還在捏合前,就需要c1 = c2,計算出O2,在捏合完,設定偏移量為O2即可。
計算偏移量.png
- K線其他線性指標如何繪製
在K線中除了K線柱之外,還有其他均線指標,連貫整個資料顯示區。
線性指標
由圖可以看出均線指標由每個cell中心點的資料連線相鄰的cell中心點的資料。我們依舊將繪製放在cell中,將相連兩個cell的線分割成兩段,分別在各自所屬的cell中繪製。
需要我們做的就是就是在cell中傳入相鄰的cell的soureData,計算出相鄰中點的位置,分為兩段繪製。
分割繪製
大家針對K線有什麼問題都可以在下面留言,會第一時間解答
本文為第三方轉載,原文連結:www.jianshu.com/p/104857287…
文章若有不對地方,歡迎批評指正,一個小而有用QQ交流群:805558511