仿微信创建带三角菜单以及添加阴影

项目中很多地方会用到类似于微信那样带三角的菜单栏，之前项目的实现方式都是让设计切一个带三角的图片当背景图。最近想着用代码实现一下，就用贝塞尔曲线UIBezierPath和CAShapeLayer相结合画了一下。

以下是实现的效果图：

仿微信三角菜单

之前也在网上搜了一些实现方法，有的是利用上下文裁剪图片的方式裁剪出一个三角，如果不想添加图片也可以直接用颜色生成一个图片，比如：

_imageView.image = [UIImage imageWithColor:[UIColor blueColor]];

这种方式可以裁剪出一个带三角的图片，但是想添加边框和阴影却比较麻烦（有实现的希望不吝赐教）。后来想着直接在视图上画一个layer添加到视图的layer，然后设置边框和阴影，毕竟视图设置阴影就是在layer上设置的。后来就实现了一下，大致的思路是：

• 先用贝塞尔曲线UIBezierPath绘制出要裁剪部位的三角形的路径和直角裁剪度数；
• 然后创建一个CAShapeLayer对象，设置其线宽lineWidth、填充色fillColor以及线的颜色strokeColor；
• 然后设置阴影颜色、阴影方向以及阴影宽度等参数。然后将UIBezierPath和CAShapeLayer建立关系，让后者在前者提供的路径中进行渲染；
• 最后将创建的CAShapeLayer对象添加到视图的layer上即可。

层级图

直接上代码：

#define kArrowWidth              10       ///< 尖角宽度
#define kArrowHeight             6        ///< 尖角高度
#define kArrowMarginLeftWidth    110      ///< 尖角距离左边距离
#define kCurrentScreenWidth      122      ///< 总宽度
#define kCurrentScreenHeight     94       ///< 总高度

// 裁剪尖角
- (void)cuttingAngleWithSubview:(UIView *)subview {
    // 贝塞尔曲线
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, kArrowHeight, kCurrentScreenWidth, kCurrentScreenHeight - kArrowHeight) cornerRadius:4];
    // 绘制路径
    [path addLineToPoint:CGPointMake(kArrowMarginLeftWidth + kArrowWidth * 0.5, kArrowHeight)];
    [path addLineToPoint:CGPointMake(kArrowMarginLeftWidth, 0)];
    [path addLineToPoint:CGPointMake(kArrowMarginLeftWidth - kArrowWidth * 0.5, kArrowHeight)];
    [path closePath];
    // CAShapeLayer
    CAShapeLayer *shaLayer = [CAShapeLayer layer];
    // 线宽
    shaLayer.lineWidth = 1.0f;
    // 填充颜色
    shaLayer.fillColor = [UIColor darkGrayColor].CGColor;
    // 线的颜色
    shaLayer.strokeColor = [[UIColor darkGrayColor] colorWithAlphaComponent:0.1f].CGColor;
    // 加阴影
    shaLayer.shadowColor = [[UIColor blackColor] colorWithAlphaComponent:0.1].CGColor;
    // 设置偏移量为0,四周都有阴影
    shaLayer.shadowOffset = CGSizeZero;
    // 透明度
    shaLayer.shadowOpacity = 1.0f;
    // 阴影宽度
    shaLayer.shadowRadius = 4.f;
    // 建立关联，并渲染路径
    shaLayer.path = path.CGPath;
    [subview.layer addSublayer:shaLayer];
}

有更好的实现方式希望不吝赐教，欢迎指正交流，相互学习～