iOS】带箭头的弹出菜单

前言

之前有在一些项目中用到过一些带箭头的弹出菜单，其实这个样式的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];
}

写在最后

希望对看到的人有些帮助，如果各位看官觉得有所帮助请点个赞。

PS：附上demo传送门