UIBezierPath画一个拱形的tabBar图形

平时开发中经常被要求使用一个带拱形的tabBar，效果如下图所示

效果图.PNG

系统只带的tabBar是一个固定高度的矩形View, 所以我们只能自定义一个UIView。

由于需要画一个拱形，拱形即为一个半圆，所以首先想到的是使用贝塞尔曲线。如果没有接触过贝塞尔曲线可以先百度下相关知识，可能看的有点晕哈，都是数学介绍。但是不要担心，苹果已经为我们封装好了，我们只需要调用下API就可实现了。

既然是自定义一个UIView，我们还是从- (void)drawRect:(CGRect)rect这个函数开始，好了废话不多说直接上代码

- (void)drawRect:(CGRect)rect
{
    CGSize size = self.bounds.size;
    CGFloat w = size.width/NUM;
    CGFloat  radius = w / 2;
    CGFloat h = size.height - 49;
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, h)];
    [path addLineToPoint:CGPointMake(2*w, h)];
    
    [ path addArcWithCenter:CGPointMake(2*w + w/2 ,h) radius:radius  startAngle:M_PI endAngle:0 clockwise:YES];
    [path addLineToPoint:CGPointMake(size.width, h)];
    [path addLineToPoint:CGPointMake(size.width, size.height)];
    [path addLineToPoint:CGPointMake(0, size.height)];
    [path addLineToPoint:CGPointMake(0, h)];
    [path closePath];
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    self.layer.mask = layer;
}

给我们自定义的UIView设置个Frame值

HTTringleView *VC = [[HTTringleView alloc] initWithFrame:CGRectMake(0, [UIScreen mainScreen].bounds.size.height-49 - [UIScreen mainScreen].bounds.size.width/5,  [UIScreen mainScreen].bounds.size.width, 49 + [UIScreen mainScreen].bounds.size.width/5)];
[self.view addSubview:VC];

就可以实现一个带拱形的tabBar了，就是这么简单，这么任性！

带拱形的Tabbar.png

6个关键点.png

不断的利用UIBezierPath在这6个关键点之间画线（addLineToPoint）和画圆（addArcWithCenter）。

最后我把代码上传GitHub给有需要的同学参考下。

思考：
如何画一个带尖角的UIView？

带尖角的UIView.png