iOS 中间按钮突出的tabbar

由于项目需求，需要写一个下图的tabbar，经过百度，解决方案如下

中间按钮突出

使用贝塞尔曲线来画一个tabbar的背景图，自定义一个view 重写view的drawRect方法，代码如下：

-(void)drawRect:(CGRect)rect{

    CGFloat lineY =0;

    CGFloat radiu =0;

    CGFloat lineWidth =0.5;

    lineY = rect.size.height - lineWidth -50;

    radiu = (rect.size.height - lineWidth *2)/2.0;

//1.左边线条

    UIColor *coloerOne = [UIColorcolorWithRed:0green:0blue:0alpha:0.5];

    [coloerOne set];

    //圆心到左右横线的垂直距离

    CGFloat toTop = radiu - lineY + lineWidth;

     //勾股定理

    CGFloat all =pow(radiu,2)-pow(toTop,2);

    //对边长（有两个，所以 * 2）

    CGFloat x2 =sqrt(all)*2;

    //线条宽度（视图宽度减去圆所占的宽度，除以2得到一边的宽度）

    CGFloat line1W = (rect.size.width - x2)/2.0;

    //圆左边点

    CGPoint leftPoint =CGPointMake(line1W, lineY);

    

    UIBezierPath *leftLinePath = [UIBezierPathbezierPath];

    // 起点

    [leftLinePath moveToPoint:CGPointMake(0, lineY)];

    // 其他点

    [leftLinePath addLineToPoint:leftPoint];

    leftLinePath.lineWidth = lineWidth;

    leftLinePath.lineCapStyle =kCGLineCapRound;//线条拐角

    leftLinePath.lineJoinStyle =kCGLineJoinRound;//终点处理

    

    [leftLinePath stroke];

    

//    右边线条

    UIColor *coloerTwo = [UIColorcolorWithRed:0green:0blue:0alpha:0.5];

    [coloerTwo set];

    CGFloat rX = rect.size.width - line1W;

    UIBezierPath *rightLinePath = [UIBezierPathbezierPath];

    //圆右边点

    CGPoint rightPoint =CGPointMake(rX, lineY);

    [rightLinePath moveToPoint:rightPoint];

    // 其他点

    [rightLinePath addLineToPoint:CGPointMake(rect.size.width, lineY)];

    rightLinePath.lineWidth = lineWidth;

    rightLinePath.lineCapStyle =kCGLineCapRound;//线条拐角

    rightLinePath.lineJoinStyle =kCGLineJoinRound;//终点处理

    [rightLinePath stroke];

    

//    弧线

    UIColor *coloerThree = [UIColorcolorWithRed:0green:0blue:0alpha:0.5];

    [coloerThree set];

    CGFloat yyy2 =acos(toTop / radiu);

    CGPoint centerPoint =CGPointMake( rect.size.width /2, rect.size.height /2);

    UIBezierPath *roundLinePath = [UIBezierPathbezierPath];

//    clockwise:是否顺时针绘圆

    [roundLinePath addArcWithCenter:centerPointradius:radiustartAngle:-yyy2 -M_PI_2endAngle:yyy2 -M_PI_2clockwise:true];

    roundLinePath.lineWidth = lineWidth;

    roundLinePath.lineCapStyle =kCGLineCapRound;//线条拐角

    roundLinePath.lineJoinStyle =kCGLineJoinRound;//终点处理

    [roundLinePath stroke];

    

//   镂空，去除上边白色部分

    //获取直线下面矩形范围路径

    UIBezierPath *ppp = [UIBezierPathbezierPathWithRect:CGRectMake(0, lineY-lineWidth, rect.size.width, rect.size.height-lineY)];

    //获取圆弧所在圆路径

    [ppp appendPath:[UIBezierPathbezierPathWithRoundedRect:CGRectMake((rect.size.width-rect.size.height)/2,0, rect.size.height, rect.size.height)cornerRadius:radiu]];

    CAShapeLayer *shapeLayer = [[CAShapeLayeralloc]init];

    shapeLayer.path = ppp.CGPath;

    self.layer.mask = shapeLayer;

    

}

再写自定义一个TabBarController继承 UITabBarController，这里需要设置tabbar上按钮的偏移

- (void)viewDidLoad {

    [superviewDidLoad];

    // Do any additional setup after loading the view.

    _myHeight =70;

    _viewArray = [[NSMutableArrayalloc]initWithCapacity:0];

    [selfclearTabBarTopLine];

    CCTabbarBackView *bgV =[[CCTabbarBackViewalloc]initWithFrame:CGRectMake(0,0,UIScreen.mainScreen.bounds.size.width,_myHeight)];

    bgV.backgroundColor = [UIColorwhiteColor];

    [self.tabBaraddSubview:bgV];

    [selfcreatSubViewCtrs];

}

//除去黑线

-(void)clearTabBarTopLine{

    CGRect rect =CGRectMake(0,0,UIScreen.mainScreen.bounds.size.width,UIScreen.mainScreen.bounds.size.height);

    UIGraphicsBeginImageContext(rect.size);

    CGContextRef context =UIGraphicsGetCurrentContext();

    CGColorRef clearColor =[[UIColorclearColor] CGColor];

    CGContextSetFillColor(context,CGColorGetComponents(clearColor));

    CGContextFillRect(context, rect);

    UIImage *img =UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    self.tabBar.backgroundImage = img;

    self.tabBar.shadowImage = img;

}

如果没有除去黑线，则会出现下图的效果

//设置按钮图片偏移量

-(void)viewWillLayoutSubviews{

    CGRect frame =self.tabBar.frame;

    frame.size.height =_myHeight;

    frame.origin.y =self.view.frame.size.height - _myHeight;

    self.tabBar.frame = frame;

    self.tabBar.barStyle =UIBarStyleDefault;

    for (int i=0; i<self.tabBar.items.count; i++) {

        UITabBarItem *item =self.tabBar.items[i];

        if (i!=2) {

            item.imageInsets =UIEdgeInsetsMake(_myHeight-50-10,0, -(_myHeight -50 -10),0);

            item.titlePositionAdjustment =UIOffsetMake(0, -3);

        }else{

            item.imageInsets =UIEdgeInsetsMake(0,0,0,0);

            item.titlePositionAdjustment =UIOffsetMake(0, -3);

        }

    }

}

点击打开demo链接