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

由于最近觉得以前设置TabBar背景的方法（即：方法二）不适用，遇到有侧滑菜单就无法实现，所以特意研究一种方法（即：方法 一）来弥补不足。（2016-6-1 修改）

效果图：



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

1.设置 UITabBarController

<span style="font-size:18px;">//  初始化菜单栏
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，</span>

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

<span style="font-size:18px;">// 取消中间的横线
[[UITabBar appearance] setShadowImage:[[UIImage alloc]init]];
[[UITabBar appearance] setBackgroundImage:[[UIImage alloc]init]];</span>

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

<span style="font-size:18px;">// 在设置tabBar背景的地方实现：
[tabC.tabBar insertSubview:[self drawTabbarBgImageView] atIndex:0];
tabC.tabBar.opaque = YES;</span>

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

<span style="font-size:18px;">        UITabBarItem *tabBarItem = (UITabBarItem *)tabC.tabBar.items[numb];
[tabBarItem setImageInsets:UIEdgeInsetsMake(-3, 0, 3, 0)];</span>

实现的效果如下所示：



方法 二：用一张W：414,H：69的背景图，直接设置tabbar的背景，开始1、2步和方法一完全一样。

1.设置 UITabBarController

<span style="font-size:18px;">//  初始化菜单栏
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，</span>

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

取消前效果：

<span style="font-size:18px;">// 取消中间的横线
[[UITabBar appearance] setShadowImage:[[UIImage alloc]init]];
[[UITabBar appearance] setBackgroundImage:[[UIImage alloc]init]];</span>

取消后效果：



3.设置UITabBar 的背景图

<span style="font-size:18px;">// 设置背景图
UIImageView *barBgView = [[UIImageView alloc] initWithFrame:CGRectMake(-(414-ScreenW)/2, -20,414 , 69)];
//  ScreenW是设备的宽，背景图的W：69，H：414 ，they.png是背景图;
barBgView.image = [UIImage imageNamed:@"chey"];
barBgView.contentMode = UIViewContentModeScaleAspectFill;
[tabC.tabBar insertSubview:barBgView atIndex:0];
tabC.tabBar.opaque = YES;</span>

4.设置 tabBarItem 向上偏移13

<span style="font-size:18px;">//  设置偏移
UITabBarItem *tabBarItem = (UITabBarItem *)tabC.tabBar.items[numb];
[tabBarItem setImageInsets:UIEdgeInsetsMake(-13, 0, 13, 0)];</span>

5.实现效果:



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

背景图下载地址:http://download.csdn.net/download/boyqicheng/9440464