OC/Swift 技术股票详情

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

先上代码链接：https://download.csdn.net/download/weixin_38716347/60737442

运行效果：

同花顺的效果图：

项目效果图：

里面的代码包含了。股票详情图了swift5.2 和 OC 的一套代码。里面写了很多注释，看了就能够明白的，然后下面的文章内容有每个文件作用的解析，代码的解析，视频说明在后面会补上去的。视频里面有能和方法的解析跟写这个股票的绘制原理(包括线条和柱状图)。

2018年时候当时用swift开发app的，当时用swift语言写了一个股票详情的代码，后来到了2019年的时候用回了OC，所以在2020年的时候把swift语言的代码，直接翻译成OC，里面的跟swift完全没有变化，只是语言变了，逻辑跟架构是完全一样的。

每次写完这份代码之后，都隔了好就才看回来，所以看起来有点吃力，因为这个股票详情设计的代码量还是很多的。要记起来，每次都要把代码看一天才懂，所以这次打算抽时间把OC剩下没有写完的部分全部写完它，然后记录一下这个代码的编写过程，用视频记录了下来，万一以后忘记了，可以看回来，快速的计起来，不过视频都讲了起码有3个小时。

下面这张图片是整个股票详情图的结构图

下面的话我用文字大概的记录一下整个过程，用OC讲得，swift自己看代码，因为架构是完全一样的。写股票详情主要分为下面的步骤：

1.概括

https://live.csdn.net/v/182813

2.简述一下代码里面所有文件在项目里面的作用

https://live.csdn.net/v/182814

3.Configuration文件的解析

https://live.csdn.net/v/182815

整个股票里面设置到很多图形很多设置的样式，包括背景颜色，指标图比例，高度，看度，指标类型(MACD,KDJ,BOOK,DMI,MA)等等。

OKValueConfiguration

OKAccessoryConfiguration

OKVolumeConfiguration

OKMainConfiguration

OKTheme

设计主图的K线的信息。看里面.m的属性注释写的很清楚了。

OKDataSource

这个文件的作用就是从获取网络回来的数据在屏幕里面是不能够全部显示出来的，只能显示其中的一部分，所以的话有一个总的数据之外，还要有另外一个模型用来显示当前屏幕的数据，然后还有一个显示范围的drarange属性(起点，个数)。

OKConfiguration

把以上的文件的样式，汇总到当前的文件，凡是需要用到的样式通过该类的属性点出来去调用。

4.成交量图形

https://live.csdn.net/v/182816

.H文件

该文件的作用就是用来绘制成交量图形的view

在外部提供了两个属性，一个属性是viewmodel，因为图形的计算成交量的模型和成交量线条和柱状图的计算方法都是在viewModel里面计算的，所以在view里面进行绘制的时候需要把viewModel传递进去进行调用方法，另外一个属性是在长按键，拖拽，捏合的时候把富文本的信息会实时变化进行更新的。

.m文件

在.m文件里面利用viewModel和VolumeModel的set方法，如果进来有值发生变化的时候就调用view的draw方法对图形进行重绘。

0.viewmodel调用方法：用网络返回的基本模型计算出成交量的模型

重绘的步骤分为：

0.调用重绘的方法

1.属性初始化

2.初始化上下文

3.绘制富文本顶部的副视图

4.绘制柱状的K线图

绘制图形中的柱子，主要就是通过计算出来成交量的值转换成XY值，绘制再界面上。

5.绘制线条

绘制线条也是一样的，主要就是通过计算出来成交量的值转换成XY值，绘制再界面上。

5.OKLineBrush绘制线条

https://live.csdn.net/v/182834

6.主视图原理

https://live.csdn.net/v/182835

.h文件

该文件的作用就是用来绘制主视图形的view
在外部提供了三个属性，一个属性是viewmodel，因为图形的计算成交量的模型和成交量线条和柱状图的计算方法都是在viewModel里面计算的，所以在view里面进行绘制的时候需要把viewModel传递进去进行调用方法，另外一个属性mainModel是在长按键，拖拽，捏合的时候把富文本的信息会实时变化进行更新的。还有一个yAxisPosition，手指长按：y轴起点到手指的距离，为什么写Y轴,怎么不是x距离呢？因为我们把屏幕横着看以为是X轴，其实开发项目的时候没有设置横屏的，仍然输竖屏的，竖屏就是Y轴，只是绘制的时候横屏而已。

有两个方法1.绘制图形的方法2.绘制辅助试图的方法

.m文件

在.m文件里面利用viewModel和mainModel的set方法，如果进来有值发生变化的时候就调用进行重绘整个图形。

view的draw方法对图形进行重绘。

0.viewmodel调用方法：用网络返回的基本模型计算出主视图的模型

重绘的步骤分为：

0.调用重绘的方法

1.属性初始化

2.初始化上下文

3.绘制富文本顶部的副视图

4.绘制柱状的K线图

5.绘制线条

6.长按键绘制主图顶部的时间。

7.AccessoryView指标图:(MACD)

https://live.csdn.net/v/182837

.h文件

该文件的作用就是用来绘制技术图形的view

在外部提供了两个属性，一个属性是viewmodel，因为图形的计算成交量的模型和成交量线条和柱状图的计算方法都是在viewModel里面计算的，所以在view里面进行绘制的时候需要把viewModel传递进去进行调用方法，另外一个属性accessoryModel是在长按键，拖拽，捏合的时候把富文本的信息会实时变化进行更新的。

.m文件

在.m文件里面利用viewModel和accessoryModel的set方法，如果进来有值发生变化的时候就调用

view的draw方法对图形进行重绘。

0.viewmodel调用方法：用网络返回的基本模型计算出成交量的模型

重绘的步骤分为：

1.调用重绘的方法

2.初始化上下文

3.绘制富文本顶部的副视图

4.绘制柱状的K线图(这个方法不一定个个指标都有柱子的图形的kdj,dmi没有柱形图)，所以柱子跟线条的是在同一个方法里面进行绘制的。

8.ValueView数值框

https://live.csdn.net/v/182838

ValueView这个view的封装只需要传递最大值最小值进去，这个view的作用是通过drawRect方法绘制出来的。drawRect的方法里面分为两个部分：
然后计算出每个格子的比例，然后设置好每个数值距离的高度，每隔固定的高度就显示一个数值出来的。

当长按键的时候就就绘制出数值的框，通过获取y值的实时高度来去回去当前的数值。ValueView主要的代码就是上面的两个作用。

9.BtnView

https://live.csdn.net/v/182842

BtnView的封装用法，主要是吧需要创建按键的数组传递进去之后，他就会通过for循环创建出来，里面需要设置横向布局还是众向布局。

10.Model

https://live.csdn.net/v/182839
模型分为基本模型和指标模型：
基本模型是用来获取网络数据存储的数据，里面还自定义了很多指标用到的属性。

指标模型是用来计算不同指标的值，里面主要是把网络获取回来的数据传递进对应的指标模型里面，然后通过计算把对应的指标数据计算出来，然后存储到基本模型里面，用来进行绘制图形用的。

11.view与controller

https://live.csdn.net/v/182840
控制器是没有什么代码的，主要负值view与model的调度。
程序启动就获取模型，获取到之后就通过代理把数据传递到view里面进行绘制。

TotalView ：

TotalView是整个红色框的view的范围。

OKLineDrawView：

OKLineDrawView是整个蓝色框的范围：定这个范围是因为长按键的时候能够把这个十字线绘制再当前的范围里面

12.ViewModel

https://live.csdn.net/v/182841

添加指标

下面说一下，如果有需要添加指标的时候，是怎么样的一个流程，需要在代码的那个位置添加。举个例子，我想准备写DMI指标，就在模型里面添加一个DMI的文件夹

第一步：添加指标属性

第二步：

外面.H文件暴露外面的方法就想MACD一样仿写。主要有两个1.构造函数2.计算DMI的方法。

第三步：

第四步：

把头文件添加到ViewModel里面

在viewModel里面需要添加一个绘制DMI的指标方法仿写KDJ，因为大家都是只有线条，KDJ是三条线，DMI是四条线，如果指标还有柱状，就仿写成交量或者MACD

第五步：

修复OC跟Swift的差异产生的BUG

当时我把swift代码转换成OC代码之后发现运行起来有几个BUG的，因为swift初始化对象能为nil，但是OC有写属性默认是0的，所以稍微做了微调。

Bug1.由于计算MA的时候swift不够12天的时候返回的是nil，但是OC不够12天返回0.0，所以出现股票图滑动到最左边的时候是从0开始把图形压扁了。

https://live.csdn.net/v/182870

修改办法：OC的代码里面增加红色框的代码

Bug2.线条绘制从0开始，也是有点想上面的代码一样，wift返回的值是nil的话线条是不进行绘制的，所以不会有这个问题，但是OC默认是返回0开始的所以绘制线条的第一个点是0，所以第二个点假如是10的话就会出现下图的这个问题。

https://live.csdn.net/v/182869

修改方法：下面的图片注释的代码是swift OC是红色框的代码

Bug3.捏合的时候，出现部分图形消失了。

https://live.csdn.net/v/182868

修改方法。增加多一个方法

Bug4.长按键移动Y轴的线没有跟随

https://live.csdn.net/v/182867

BUG:5 点击KDJ指标出现的BUG

原因看下面的代码：
swift当时写的时候用了一个可选绑定，判断KDJ_J有值才才去计算X,Y的值，没有的话就返回nil。

OC的代码直接判断KDJ_J是否等于0，0就不进行绘制，这样写是不对的。

因为在计算KDJ_J的J值小于0的时候是返回0.0，而且KDJ_J初始化是为0的，没有等于nil的写法，所以相对于swift它那里写是做非空判断，防止拿到的值是nil就会崩溃。OC是不用判断的，因为初始化本身就为0
代码修改为：