一键式弹出菜单

来源:互联网 发布:音频矩阵 线序 编辑:程序博客网 时间:2024/06/06 09:09

一行代码实现的弹出式菜单,缩放弹出,带有小箭头

一键式弹出菜单

项目中有好几个地方要用到弹出式小菜单,于是自己动手封装了一个,虽然实现起来也比较简单,但还是在这里分享一下我的实现方法。先上效果图:

使用:

    [ZGPopUpMenuView popMenuWithBuilder:^(ZGPopUpMenuViewBuilder *builder) {        builder.items = @[@"item0", @"item1", @"item2", @"item3", @"item4"];        builder.position = CGPointMake(150,100);        builder.arrowHeight = 5;        builder.localScale = 0.5;        builder.arrowLocation = ZGPopUpMenuArrowTop;        builder.selectIdx = 0;    } select:^(NSInteger index, NSString *item) {        NSLog(@"%zd",index);    }];

该弹出框的核心部分是小箭头实现、位置的确定以及UITableView的一些设置。弹出菜单的实现方式如下图所示,使用UITableView实现菜单部分,然后绘制裁剪路径建立一个CAShapeLayer实现UITableView的遮罩

    [self.tableView.layer setMask:[self getMaskShapeLayer]];- (CAShapeLayer *)getMaskShapeLayer {    CAShapeLayer *layer = [[CAShapeLayer alloc] init];    layer.path = self.getMaskPath.CGPath;    return layer;}

这里通过指定箭头顶点位置、箭头朝向及其所在边的比例来确定位置

- (UIBezierPath *)getMaskPath {    UIBezierPath * maskPath;    maskPath = [UIBezierPath bezierPath];    CGFloat  w, h, arrowH, xMin, xMax, yMin, yMax;    w = self.builder.itemWidth;    h = self.builder.itemHeight * self.builder.items.count;    arrowH = self.builder.arrowHeight;    xMin = arrowH;    xMax = xMin + w;    yMin = arrowH;    yMax = yMin + h;    CGPoint p, p0, p1, p2;    p = CGPointZero;    switch (self.builder.arrowLocation) {        case ZGPopUpMenuArrowTop:{            p.x += xMin + self.builder.localScale * w;            p.y += yMin;            p0 = p1 = p2 = p;            p0.x -= arrowH;            p1.y -= arrowH;            p2.x += arrowH;            [maskPath moveToPoint:p0];            [maskPath addLineToPoint:p1];            [maskPath addLineToPoint:p2];            [maskPath addLineToPoint:CGPointMake(xMax, yMin)];            [maskPath addLineToPoint:CGPointMake(xMax, yMax)];            [maskPath addLineToPoint:CGPointMake(xMin, yMax)];            [maskPath addLineToPoint:CGPointMake(xMin, yMin)];        }break;        case ZGPopUpMenuArrowLeft:{            p.y += yMin + self.builder.localScale * h;            p.x += xMin;            p0 = p1 = p2 = p;            p0.y += arrowH;            p1.x -= arrowH;            p2.y -= arrowH;            [maskPath moveToPoint:p0];            [maskPath addLineToPoint:p1];            [maskPath addLineToPoint:p2];            [maskPath addLineToPoint:CGPointMake(xMin, yMin)];            [maskPath addLineToPoint:CGPointMake(xMax, yMin)];            [maskPath addLineToPoint:CGPointMake(xMax, yMax)];            [maskPath addLineToPoint:CGPointMake(xMin, yMax)];        }break;        case ZGPopUpMenuArrowBottom:{            p.x += xMin + self.builder.localScale * w;            p.y += yMax;            p0 = p1 = p2 = p;            p0.x += arrowH;            p1.y += arrowH;            p2.x -= arrowH;            [maskPath moveToPoint:p0];            [maskPath addLineToPoint:p1];            [maskPath addLineToPoint:p2];            [maskPath addLineToPoint:CGPointMake(xMin, yMax)];            [maskPath addLineToPoint:CGPointMake(xMin, yMin)];            [maskPath addLineToPoint:CGPointMake(xMax, yMin)];            [maskPath addLineToPoint:CGPointMake(xMax, yMax)];        }break;        case ZGPopUpMenuArrowRight:{            p.x += xMax;            p.y += yMin + self.builder.localScale * h;            p0 = p1 = p2 = p;            p0.y -= arrowH;            p1.x += arrowH;            p2.y += arrowH;            [maskPath moveToPoint:p0];            [maskPath addLineToPoint:p1];            [maskPath addLineToPoint:p2];            [maskPath addLineToPoint:CGPointMake(xMax, yMax)];            [maskPath addLineToPoint:CGPointMake(xMin, yMax)];            [maskPath addLineToPoint:CGPointMake(xMin, yMin)];            [maskPath addLineToPoint:CGPointMake(xMax, yMin)];        }break;        default:            break;    }    [maskPath closePath];    return maskPath;}

然后新建一个容器UIView将创建成功的菜单添加进去,再将整个容器置于UIWindow中

这里有几点注意的地方

  • 弹出时的缩放动画需要设置layer的anchorPoint在箭头顶点处,这时需要先保存frame,改变anchorPoint后再重新设置frame,否则frame将会变化造成位置错乱。
  • 修改选中和未选中的颜色时需要为UITableViewCell添加selectedBackgroundView和backgroundView
    最后附上Demo下载地址,欢迎骚扰
原创粉丝点击