最近公司项目需求要做一个页面的引导视图，就长这个样子

image

自己平时开发过程中喜欢将可以封装的控件尽量封装，这样既可以锻炼自己的封装能力，也给后继开发者提供了便利。话不多说，来看一下这个引导视图的实现过程。

一、.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

初始化方法是自定义的构造函数，参数LXIndicatorViewType两个枚举值分别为箭头向上还是向下。下面的方法即是绘制三角形的方法，X值为目标视图的Center X，cornerRadius为圆角。

二、核心方法

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

具体注释下图中给的非常详细

image

X值的就是目标视图的中心X，如何准确的获得目标视图的X值也是比较核心的方法。

image

左上方紫色视图为目标视图，红色视图为引导视图。红色视图的左边距与紫色视图的左边距相等，要准确计算紫色视图的Center X在红色视图的Point，就要调用苹果系统提供的转换坐标的方法convertRect，具体代码为:

        CGRect convertRect = [self.view convertRect:puperView.frame toView:redView];//紫色视图相对于红色视图的Rect

        CGFloatx = convertRect.origin.x+ convertRect.size.width/2;//算出中心点

算出中心点之后就可以绘制三角形。其实，我只是将绘制三角形以及展示方向封装了起来，而该视图里面具体展示什么内容在外面绘制就可以，没有过度封装。

三、遇到的坑

(1)使用自动布局是无法第一时间获得视图的准确frame，有很多答案说调用layoutIfNeeded，但是经过测试这种方法也并不准确。其中一种解决方法就是延时获取，经过测试延时0.01秒即可获得准确frame。感兴趣的可以自己测试一下。

(2)给View设置圆角其View内部的Bezierpath曲线无法生效,封装完扔到项目里发现设置圆角后三角形无法出现，一直没往这方面想，浪费我好长时间。

后续我也会持续将自己封装的其他控件发到简书上面来，以前写的比较少，写作水平比较差，大家多多包涵。