实现Tabbar的中间按钮向上突出的两种方法

以下方法并未适配X，其实适配X也很简单，就是判断了机型后动态改变TabBar的高度就能适配，在Xcode9.3中我用swift实现了X的适配等，如果您需要，可以到这里去查看

最近有朋友对该方法不太清楚，我把最新代码放博客里面

效果图：

方法 一：采用绘制背景的方法实现TabBar背景（推荐使用这种方法）

1.设置 UITabBarController

//  初始化菜单栏
    UITabBarController *tabC = [[UITabBarController alloc]init];
    UINavigationController *main_NV = [[UINavigationController alloc]initWithRootViewController:[["你自己的试图控制器"alloc]init]];
tabC.viewControllers = @[main_NV, Found_NV, Center_NV, CheYouQan_NV, Personal_NV];// 其中：Found_NV, Center_NV, CheYouQan_NV, Personal_NV 自己的 UINavigationController，

2.//  取消tabber的上边框线条

// 取消中间的横线
[[UITabBar appearance] setShadowImage:[[UIImage alloc]init]];
    [[UITabBar appearance] setBackgroundImage:[[UIImage alloc]init]];

3.画 UITabBar 的背景图 ，在AppDelegate.m 中实现该方法

// 画背景的方法，返回 Tabbar的背景
- (UIImageView *)drawTabbarBgImageView
{
    NSLog(@"tabBarHeight：  %f" , tabBarHeight);// 设备tabBar高度 一般49
    CGFloat radius = 30;// 圆半径
    CGFloat allFloat= (pow(radius, 2)-pow((radius-standOutHeight), 2));// standOutHeight 突出高度 12
    CGFloat ww = sqrtf(allFloat);
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, -standOutHeight,ScreenW , tabBarHeight +standOutHeight)];// ScreenW设备的宽
    //    imageView.backgroundColor = [UIColor redColor];
    CGSize size = imageView.frame.size;
    CAShapeLayer *layer = [CAShapeLayer layer];
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(size.width/2 - ww, standOutHeight)];
    NSLog(@"ww: %f", ww);
    NSLog(@"ww11: %f", 0.5*((radius-ww)/radius));
    CGFloat angleH = 0.5*((radius-standOutHeight)/radius);
    NSLog(@"angleH：%f", angleH);
    CGFloat startAngle = (1+angleH)*((float)M_PI); // 开始弧度
    CGFloat endAngle = (2-angleH)*((float)M_PI);//结束弧度
    // 开始画弧：CGPointMake：弧的圆心  radius：弧半径 startAngle：开始弧度 endAngle：介绍弧度 clockwise：YES为顺时针，No为逆时针
    [path addArcWithCenter:CGPointMake((size.width)/2, radius) radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
    // 开始画弧以外的部分
    [path addLineToPoint:CGPointMake(size.width/2+ww, standOutHeight)];
    [path addLineToPoint:CGPointMake(size.width, standOutHeight)];
    [path addLineToPoint:CGPointMake(size.width,size.height)];
    [path addLineToPoint:CGPointMake(0,size.height)];
    [path addLineToPoint:CGPointMake(0,standOutHeight)];
    [path addLineToPoint:CGPointMake(size.width/2-ww, standOutHeight)];
    layer.path = path.CGPath;
    layer.fillColor = [UIColor whiteColor].CGColor;// 整个背景的颜色
    layer.strokeColor = [UIColor colorWithWhite:0.765 alpha:1.000].CGColor;//边框线条的颜色
    layer.lineWidth = 0.5;//边框线条的宽
    // 在要画背景的view上 addSublayer:
    [imageView.layer addSublayer:layer];
    return imageView;
}

4.设置背景 tabC 是 UITabBarController 

// 在设置tabBar背景的地方实现：
    [tabC.tabBar insertSubview:[self drawTabbarBgImageView] atIndex:0];
    tabC.tabBar.opaque = YES;

5.设置中间按钮的图标偏移量 5个视图控制器时 这里的numb为2，三个时，这里的numb 为1 根据自己的需求设置。

        UITabBarItem *tabBarItem = (UITabBarItem *)tabC.tabBar.items[numb];
        [tabBarItem setImageInsets:UIEdgeInsetsMake(-3, 0, 3, 0)];

实现的效果如下所示：

下面是实现 appDelegate.m中实现内容，其他内容我就不贴出来了，就是几个视图控制器，自己创建就好了：

#import "AppDelegate.h"
#import "HomePage_VC.h"

#import "Center_VC.h"

#import "Personal_VC.h"
#define tabBarHeight [AppDelegate getTabBarHeight]
#define standOutHeight 12.0f // 中间突出部分的高度
#define ScreenW  CGRectGetWidth([UIScreen mainScreen].bounds)
#define ScreenH CGRectGetHeight([UIScreen mainScreen].bounds)
@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  
    
    //设置UINavigationBar的外观属性
    [[UINavigationBar appearance] setBarTintColor:[UIColor colorWithRed:0.435 green:0.427 blue:0.533 alpha:1.000]];
    
    UINavigationController *Personal_NV = [[UINavigationController alloc]initWithRootViewController:[[Personal_VC alloc]init]];
    NSArray *views = @[[[HomePage_VC alloc]init], [[Center_VC alloc]init], Personal_NV];
    
    //  取消tabber的背景色
    [[UITabBar appearance] setShadowImage:[[UIImage alloc]init]];
    [[UITabBar appearance] setBackgroundImage:[[UIImage alloc]init]];
    //  初始化菜单栏
    UITabBarController *tabC = [[UITabBarController alloc]init];
    //改变tabBar的背景颜色
    [tabC.tabBar insertSubview:[self drawTabbarBgImageView] atIndex:0];
    tabC.tabBar.opaque = YES;
    NSLog(@"ScreenW:  %f", ScreenW);
    tabC.viewControllers = views;
    tabC.selectedIndex = 0;
    NSArray *itemName = @[@"首页",@"", @"个人中心"];
    NSArray *defaultImage = @[@"home-page",  @"tabcyq", @"grzx"];
    NSArray *selectImage = @[@"point home-page", @"point-cyq", @"point-grzx"];
    for(int numb = 0 ; numb < itemName.count; numb ++)
    {
        UITabBarItem *tabBarItem = (UITabBarItem *)tabC.tabBar.items[numb];
        //  设置通知
        
        if (numb==1)
        {
            [tabBarItem setImageInsets:UIEdgeInsetsMake(-standOutHeight/3.8, 0, standOutHeight/3.8, 0)];
        }
        else
        {
        }
        tabBarItem.image = [[UIImage imageNamed:defaultImage[numb]] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        tabBarItem.selectedImage = [[UIImage imageNamed:selectImage[numb]] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        [tabBarItem setTitle:itemName[numb]];
    }
    self.window.rootViewController = tabC;
    [self.window makeKeyAndVisible];
    
    return YES;
}

// 画背景的方法，返回 Tabbar的背景
- (UIImageView *)drawTabbarBgImageView
{
    NSLog(@"tabBarHeight：  %f" , tabBarHeight);// 设备tabBar高度 一般49
    CGFloat radius = 30;// 圆半径
    CGFloat allFloat= (pow(radius, 2)-pow((radius-standOutHeight), 2));// standOutHeight 突出高度 12
    CGFloat ww = sqrtf(allFloat);
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, -standOutHeight,ScreenW , tabBarHeight +standOutHeight)];// ScreenW设备的宽
    //    imageView.backgroundColor = [UIColor redColor];
    CGSize size = imageView.frame.size;
    CAShapeLayer *layer = [CAShapeLayer layer];
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(size.width/2 - ww, standOutHeight)];
    NSLog(@"ww: %f", ww);
    NSLog(@"ww11: %f", 0.5*((radius-ww)/radius));
    CGFloat angleH = 0.5*((radius-standOutHeight)/radius);
    NSLog(@"angleH：%f", angleH);
    CGFloat startAngle = (1+angleH)*((float)M_PI); // 开始弧度
    CGFloat endAngle = (2-angleH)*((float)M_PI);//结束弧度
    // 开始画弧：CGPointMake：弧的圆心  radius：弧半径 startAngle：开始弧度 endAngle：介绍弧度 clockwise：YES为顺时针，No为逆时针
    [path addArcWithCenter:CGPointMake((size.width)/2, radius) radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
    // 开始画弧以外的部分
    [path addLineToPoint:CGPointMake(size.width/2+ww, standOutHeight)];
    [path addLineToPoint:CGPointMake(size.width, standOutHeight)];
    [path addLineToPoint:CGPointMake(size.width,size.height)];
    [path addLineToPoint:CGPointMake(0,size.height)];
    [path addLineToPoint:CGPointMake(0,standOutHeight)];
    [path addLineToPoint:CGPointMake(size.width/2-ww, standOutHeight)];
    layer.path = path.CGPath;
    layer.fillColor = [UIColor whiteColor].CGColor;// 整个背景的颜色
    layer.strokeColor = [UIColor colorWithWhite:0.765 alpha:1.000].CGColor;//边框线条的颜色
    layer.lineWidth = 0.5;//边框线条的宽
    // 在要画背景的view上 addSublayer:
    [imageView.layer addSublayer:layer];
    return imageView;
}
+(CGFloat)getTabBarHeight
{
    
    // 获取tabBarHeight
    UITabBarController *tabBarController =[[UITabBarController alloc]init];
    return CGRectGetHeight(tabBarController.tabBar.bounds);
}

转载请注明出处：http://blog.csdn.net/boyqicheng/article/details/50723011

Demo下载