項目中實現(xiàn)的效果需求
-
展示效果圖:
IMG_3424.PNG - 切換不同的按鈕繪制不同的折線圖
- 當(dāng)手指左右滑動的時候,展示點的數(shù)據(jù)
- 在零點,可能存在負(fù)數(shù),零點不是坐標(biāo)Y軸坐標(biāo)為1的時候
- 每個點對應(yīng)一個氣泡視圖,并且展示它數(shù)據(jù)
實現(xiàn)的思路
- 首先是處理數(shù)據(jù),讓整個數(shù)組中最大的值為Y軸的頂點,最小的值為Y軸的0點(可能包含負(fù)數(shù))
- 因為繪制的點和左右上下都是有邊距的,所有是兩層視圖,一次是整體的白色視圖,一層是裝載貝塞爾曲線的白色視圖
- 折線在每一次數(shù)據(jù)重新復(fù)制都要移除前面的點:
// 刪除重新繪制
if (_linePath) {
[_linePath removeAllPoints];
}
- 而每一個圓圈使用的是CAShaperLayer的數(shù)組去裝載,去移除:
屏幕快照 2017-07-24 10.25.29.png
- 繪制所有的點,是放在處理數(shù)組轉(zhuǎn)換成點的循環(huán)中繪制的:
屏幕快照 2017-07-24 10.25.40.png
- UIView繼承的是UIResponder,所以主要的滑動實現(xiàn)依賴于下面的協(xié)議:
屏幕快照 2017-07-24 10.32.30.png
- 協(xié)議中實現(xiàn)對氣泡視圖尖角的設(shè)置,項目實現(xiàn)是距離視圖20pt,但是在左右兩個極端的時候需要處理,避免尖角不在對應(yīng)的點上
氣泡視圖
氣泡視圖建議不要覆寫drawRect,數(shù)據(jù)太多,不停的點擊一下子內(nèi)存就會瘋長,容易崩潰
使用貝塞爾曲線來繪制,從尖角開始,使用貝塞爾曲線繪制圓角和直線就可以了
因為這個折線視圖耦合在項目中了,所以就沒有單獨寫成demo了,如果有需要可以直接交流
