最近公司項(xiàng)目需求要做一個(gè)頁面的引導(dǎo)視圖，就長這個(gè)樣子

image

自己平時(shí)開發(fā)過程中喜歡將可以封裝的控件盡量封裝，這樣既可以鍛煉自己的封裝能力，也給后繼開發(fā)者提供了便利。話不多說，來看一下這個(gè)引導(dǎo)視圖的實(shí)現(xiàn)過程。

一、.h文件及初始化方法

typedefNS_ENUM(NSInteger,LXIndicatorViewType){

    LXIndicatorViewTypeTop,

    LXIndicatorViewTypeBottom

};

@interfaceLXIndicatorView :UIView

@property (nonatomic,assign) LXIndicatorViewType type;

- (instancetype)initWithFrame:(CGRect)frame indicatorType:(LXIndicatorViewType)indicatorType;

- (void)initIndicatorPathWithX:(CGFloat)X cornerRadius:(CGFloat)cornerRadius;

@end

初始化方法是自定義的構(gòu)造函數(shù)，參數(shù)LXIndicatorViewType兩個(gè)枚舉值分別為箭頭向上還是向下。下面的方法即是繪制三角形的方法，X值為目標(biāo)視圖的Center X，cornerRadius為圓角。

二、核心方法

- (void)initIndicatorPathWithX:(CGFloat)X cornerRadius:(CGFloat)cornerRadius;

具體注釋下圖中給的非常詳細(xì)

image

X值的就是目標(biāo)視圖的中心X，如何準(zhǔn)確的獲得目標(biāo)視圖的X值也是比較核心的方法。

image

左上方紫色視圖為目標(biāo)視圖，紅色視圖為引導(dǎo)視圖。紅色視圖的左邊距與紫色視圖的左邊距相等，要準(zhǔn)確計(jì)算紫色視圖的Center X在紅色視圖的Point，就要調(diào)用蘋果系統(tǒng)提供的轉(zhuǎn)換坐標(biāo)的方法convertRect，具體代碼為:

        CGRect convertRect = [self.view convertRect:puperView.frame toView:redView];//紫色視圖相對(duì)于紅色視圖的Rect

        CGFloatx = convertRect.origin.x+ convertRect.size.width/2;//算出中心點(diǎn)

算出中心點(diǎn)之后就可以繪制三角形。其實(shí)，我只是將繪制三角形以及展示方向封裝了起來，而該視圖里面具體展示什么內(nèi)容在外面繪制就可以，沒有過度封裝。

三、遇到的坑

(1)使用自動(dòng)布局是無法第一時(shí)間獲得視圖的準(zhǔn)確frame，有很多答案說調(diào)用layoutIfNeeded，但是經(jīng)過測(cè)試這種方法也并不準(zhǔn)確。其中一種解決方法就是延時(shí)獲取，經(jīng)過測(cè)試延時(shí)0.01秒即可獲得準(zhǔn)確frame。感興趣的可以自己測(cè)試一下。

(2)給View設(shè)置圓角其View內(nèi)部的Bezierpath曲線無法生效,封裝完扔到項(xiàng)目里發(fā)現(xiàn)設(shè)置圓角后三角形無法出現(xiàn)，一直沒往這方面想，浪費(fèi)我好長時(shí)間。

后續(xù)我也會(huì)持續(xù)將自己封裝的其他控件發(fā)到簡書上面來，以前寫的比較少，寫作水平比較差，大家多多包涵。