前言
之前有在一些项目中用到过一些带箭头的弹出菜单，其实这个样式的UI组件还是比较常见的，QQ和微信，支付宝等等很多App都有类似的UI组件，所以我把之前项目中的相关代码抽取出来，然后做了个封装，所有就有了今天这篇内容。
其实也不算直接封装之前的代码，之前的实现方式是用modal出控制器，然后自定义转场动画，同时在转场代理中通过 UIPresentationController 改变视图的frame实现的，同时箭头也是用一个带箭头的背景图实现的。不过当前封装的这个UI视图则是放弃了带控制器的这种方式，是用纯视图的组合封装来实现的。
实现效果
运行效果.gif
使用方式
使用方式很简单，先将CWPopMenu.h和CWPopMenu.m这两个文件拖到项目里。
导入头文件之后直接初始化并调用showMenu显示
self.menu = [[CWPopMenu alloc]initWithArrow:CGPointMake(self.view.frame.size.width-25, _sumHeight) menuSize:CGSizeMake(130, 200) arrowStyle:CWPopMenuArrowTopfooter];
//代理是UITableView的代理方法
_menu.dataSource = self;
_menu.delegate = self;
//设置菜单的背景色(默认是白色)
_menu.menuViewBgColor = [UIColor whiteColor];
//YES代表使用动画
[_menu showMenu:YES];
方法以及参数的意义
/**
@param point 箭头箭尖的坐标
@param size 菜单的视图的大小
@param position 箭头的方位(同时决定缩放动画的锚点)
*/
- (instancetype)initWithArrow:(CGPoint)point menuSize:(CGSize)size arrowStyle:(CWPopMenuArrowPosition)position;
//显示 *属性设置需要在show之前设置才会生效*
- (void)showMenu:(BOOL)animated;
//关闭
- (void)closeMenu:(BOOL)animated;
部分可设置的属性
//箭头在上或者下边的前中后位置枚举（从左到右）
typedef NS_ENUM(NSInteger, CWPopMenuArrowPosition) {
CWPopMenuArrowTopHeader = 0,//默认从0开始
CWPopMenuArrowTopCenter,
CWPopMenuArrowTopfooter,
CWPopMenuArrowBottomHeader,
CWPopMenuArrowBottomCenter,
CWPopMenuArrowBottomfooter,
};
//箭头方位的枚举会决定箭头在菜单视图的位置，以及缩放动画的锚点位置
//菜单蒙版的透明度 default bgViewAlpha = 0.2;设置alpha属性时会被bgAlpha接管
@property (nonatomic, assign)CGFloat bgAlpha;
//菜单背景色 default menuViewBgColor = [UIColor whiteColor];
@property (nonatomic, assign)UIColor *menuViewBgColor;
//菜单圆角 default menuRadius = 5.f;
@property (nonatomic, assign)CGFloat menuRadius;
//箭头宽度 default arrowWidth = 15.f;
@property (nonatomic, assign)CGFloat arrowWidth;
//箭头高度 default arrowHeight = 10.f;
@property (nonatomic, assign)CGFloat arrowHeight;
其实这个UI视图是没什么难度的东西，菜单核心视图就是个UITableView，就是箭头绘制要进行各种判断写起来稍微麻烦点。
核心方法
//根据位置枚举以及箭头高度和宽度计算绘制箭头的点
- (void)computeArrowPosition:(CWPopMenuArrowPosition)arrowPosition
{
CGRect _menuFrame = _menuView.frame;
CGFloat menuX = _menuFrame.origin.x;
CGFloat menuY = _menuFrame.origin.y;
CGFloat menuWidth = _menuFrame.size.width;
CGFloat menuHeight = _menuFrame.size.height;
switch (_arrowPosition) {
case CWPopMenuArrowTopHeader:
{
CGPoint origin = CGPointMake(menuX+distance, menuY);
CGPoint peak = CGPointMake(menuX+_arrowWidth*0.5 +distance, menuY-_arrowHeight);
CGPoint terminus = CGPointMake(menuX+_arrowWidth+distance, menuY);
[self drawArrowInLayer:origin peak:peak terminus:terminus];
}
break;
case CWPopMenuArrowTopCenter:
{
CGPoint origin = CGPointMake(menuX+(menuWidth-_arrowWidth)*0.5, menuY);
CGPoint peak = CGPointMake(menuX+menuWidth*0.5, menuY-_arrowHeight);
CGPoint terminus = CGPointMake(menuX+(menuWidth+_arrowWidth)*0.5, menuY);
[self drawArrowInLayer:origin peak:peak terminus:terminus];
}
break;
case CWPopMenuArrowTopfooter:
{
CGPoint origin = CGPointMake(menuX+menuWidth-_arrowWidth-distance, menuY);
CGPoint peak = CGPointMake(menuX+menuWidth-_arrowWidth*0.5-distance, menuY-_arrowHeight);
CGPoint terminus = CGPointMake(menuX+menuWidth-distance, menuY);
[self drawArrowInLayer:origin peak:peak terminus:terminus];
}
break;
case CWPopMenuArrowBottomHeader:
{
CGPoint origin = CGPointMake(menuX+distance, menuY+menuHeight);
CGPoint peak = CGPointMake(menuX+_arrowWidth*0.5+distance, menuY+menuHeight+_arrowHeight);
CGPoint terminus = CGPointMake(menuX+_arrowWidth+distance, menuY+menuHeight);
[self drawArrowInLayer:origin peak:peak terminus:terminus];
}
break;
case CWPopMenuArrowBottomCenter:
{
CGPoint origin = CGPointMake(menuX+(menuWidth-_arrowWidth)*0.5, menuY+menuHeight);
CGPoint peak = CGPointMake(menuX+menuWidth*0.5, menuY+menuHeight+_arrowHeight);
CGPoint terminus = CGPointMake(menuX+(menuWidth+_arrowWidth)*0.5, menuY+menuHeight);
[self drawArrowInLayer:origin peak:peak terminus:terminus];
}
break;
case CWPopMenuArrowBottomfooter:
{
CGPoint origin = CGPointMake(menuX+menuWidth-_arrowWidth-distance, menuY+menuHeight);
CGPoint peak = CGPointMake(menuX+menuWidth-_arrowWidth*0.5-distance, menuY+menuHeight+_arrowHeight);
CGPoint terminus = CGPointMake(menuX+menuWidth-distance, menuY+menuHeight);
[self drawArrowInLayer:origin peak:peak terminus:terminus];
}
break;
default:
break;
}
}
//绘制箭头
- (void)drawArrowInLayer:(CGPoint)origin peak:(CGPoint)peak terminus:(CGPoint)terminus{
//定义画图的path
self.shLayer = [[CAShapeLayer alloc]init];
UIBezierPath *path = [[UIBezierPath alloc] init];
_shLayer.fillColor = self.menuViewBgColor.CGColor;
//path移动到开始画图的位置
[path moveToPoint:origin];
[path addLineToPoint:peak];
[path addLineToPoint:terminus];
_shLayer.path = [path CGPath];
//关闭path
[path closePath];
[self.layer addSublayer:_shLayer];
}
