上一遍總結和分享是關于上面那個環(huán)形的view的,在研究完環(huán)形的進度視圖之后,開始研究下面這個看起來很怕人的曲線統(tǒng)計圖。因為沒有接口,所以只能是先自己做一些假數(shù)據(jù),大致繪制一個樣子。
1、在開始動手之前,先構想了一下,這個視圖是在拿到數(shù)據(jù)之后才去創(chuàng)建出來的。那么直接重寫一個繼承于UIView的view的初始化方法,在初始化時候就把數(shù)據(jù)傳進去不就好了嘛。
.h

注釋中提到了重寫初始化方法一定要記得init后面的字母要大寫 Xcode判斷是否為init方法規(guī)則:方法返回id,并且名字以init+大寫字母開頭+其他 ?為準則 如果你不大寫 這個方法里調用父類的初始化方法是會報錯的。
還有一點需要說的是,初始化方法一個是返回id,一個是instancetype,這兩個的區(qū)別是需要我們去研究的,后面我會自己研究,然后繼續(xù)總結在這里。
.m

2、有了數(shù)據(jù)之后,開始繪制這個view,第一步要做的,一定是確定坐標系——x軸和y軸。
這里繪制x軸和y軸又用到了一個新的類 CGContextRef ,先開始很困惑,不知道這是個什么東西,在查閱了一些資料后,發(fā)現(xiàn)和UIBezierPath一樣,都是用于平面繪制的,小菜瓜感覺CGContextRef給了必要的參數(shù)自己就去畫了。我們用UIBezierPath,給了一些參數(shù)是想要得到UIBezierPath的CGPath的,獲取這個路徑再利用CAShapeLayer去繪制的。c
而且基于剛才的問題,因為要在有了數(shù)據(jù)之后才能去創(chuàng)建視圖,而且繪制的操作都是要在drawrect里面做的,我沒有辦法控制這個方法的執(zhí)行,這些是嘗試過之后才發(fā)現(xiàn)的,后來在demo中找到了一種比較機智的辦法就是重寫view的初始化方法,初始化時順便把帶有數(shù)據(jù)的數(shù)組傳進來,這樣在執(zhí)行drawrect的時候,一定是有數(shù)據(jù)的。

這些事情做完之后,就可以安心的開始繪制x軸和y軸了。

第一步就是獲取當前制圖的上下文,后面進行設置也需要當前的制圖上下文這個參數(shù)。后面就是設置畫線的寬度和顏色了。
moveToPoint的方法就是設置起始點。addLineToPoint就是連線了,參數(shù)就是當前繪圖的上下文和那個點的x和y。CGContextStrokePath是開始連線,開始繪制。
for循環(huán)里面的label是記錄刻度用的。
3、很關鍵的部分來了,下面將利用UIBezierPath結合CAShapeLayer做一個帶動畫的曲線統(tǒng)計圖。

有必要說的是這一點,path addCurveToPoint………… controlPoint1 …… controlPoint2……
這兩個控制點需要用到一些數(shù)學知識了,這兩個點是用來控制曲線的彎曲方向和程度了,這兩個點很重要,具體控制的一些東西如果有興趣的話可以具體再研究的。這兩個控制點,一般這樣給:controlPoint1:(x:起始點的x + 結束點的x 的和 除以2,y:起始點的y) controlPoint2:(x:起始點的x + 結束點的x 的和 除以2,y:結束點的y)這個地方是一個坑點,之前因為點的精確問題出了很多問題,明明用的是畫曲線方法,出來是折線,還有一堆亂七八糟的線段等等。
4、最后別忘了移除這個動畫

5、最后效果展示就是這樣了,還一些細節(jié)調整。

我是神經病。