IOS 定制中间突出UItabBar

前言：

公司的项目需要定制一个中间突出的TabBar，在github 上找到一份可以参考的代码（虽然是四年前的，但是还是很有参考价值）。 网址：https://github.com/boctor/idev-recipes/tree/master/RaisedCenterTabBar。作者的readme文档写的很好，这里给出翻译（很不错的思路哦）

 

先看看效果：

思路：

 

## Problem:

问题：

 

Apps like [Instagram][], [DailyBooth][] and [Path™][] have what

looks like a standard UITabBarController, but the center tab bar is

raised or colored. How do we recreate this look?

 

像[Instagram][], [DailyBooth][] and [Path™][] 这些app有一个看起来像标准 tabBarController，但是呢，tabBar的中间是凸起的或者着色的。我们怎样做可以构建这种现实效果呢？

 

## Solution:

解决方案：

 

These tab bars look pretty standard with the exception of the

center item, so we’ll start out with a standard UITabBarController

which contains a UITabBar.

 

这些标签栏除了中间项以外看起来都相当的标准，所以我们会从一个标准的包含一个tabBar的UITabBarController开始。

 

Looking at [the images][] inside each app, it is quickly apparent

that the middle tab bar is simply a custom UIButton.

 

查看每个应用内的图片，显而易见的是中间的标签是一个简单的自定义button。

 

 

A UITabBar contains an array of UITabBarItems, which inherit from

UIBarItem. But unlike UIBarButtonItem that also inherits from

UIBarItem, there is no API to create a UITabBarItem with a

customView.

 

一个UITabBar 包含了一个UITabBaritems的数组，UITabBaritem继承自UIBarItem。但是和同样继承自UIBarItem的UIBarButtonItem不同，苹果官方没有提供给UITabBarItem创建自定义视图的api.

 

So instead of trying to create a custom UITabBarItem, we’ll just

create a regular one and then put the custom UIButton on top of the

UITabBar.

 

所以呢，大家不用去尝试创建一个自定义的UITabBarItem，我们只需要创建一个标准的UITabBar，然后把自定义的button放在UITabBar上面就可以了。

 

 

Our basic recipe is then to create a subclass of UITabBarController

and add a custom UIButton on top of the UITabBar.

 

我们的基本方案是子类化UITabBarController然后添加一个自定义的button再UITabBar上面。

 

If the button is the same height as the UITabBar, then we set the

center of the button to the center of the UITabBar. If the button

is slightly higher, then we do the the same thing except we adjust

the center’s y value to account for the difference in height.

 

如果button和UITabBar一样高呢，我们就包button的center和UITabBar的center对齐。如果button稍微高那么一点呢，我们做同样的事情，然后设定center的Y值，以对应高度的差。本文原创，

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];      button.frame = CGRectMake( 0.0 , 0.0 , buttonImage.size.width, buttonImage.size.height);      [button setBackgroundImage:buttonImage forState:UIControlStateNormal];      [button setBackgroundImage:highlightImage forState:UIControlStateHighlighted];            CGFloat heightDifference = buttonImage.size.height - self.tabBar.frame.size.height;      if (heightDifference < 0 )        button.center = self.tabBar.center;      else      {        CGPoint center = self.tabBar.center;        center.y = center.y - heightDifference/ 2.0 ;        button.center = center;      }            [self.view addSubview:button];

 

代码实现

这里我借鉴了上文作者的代码，针对我的需要进行了封装，下面放代码：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

// //  TabBarViewController.m //  tabBarViewController // //  Created by Bc_Ltf on 15/3/25. //  Copyright (c) 2015年 Bc_ltf. All rights reserved. //   # import TabBarViewController.h   @interface TabBarViewController ()<uitabbarcontrollerdelegate>   @end   @implementation TabBarViewController @synthesize button; @synthesize myTabBar;   - ( void )viewDidLoad {      [ super viewDidLoad];      [self setup];     }   - ( void )didReceiveMemoryWarning {      [ super didReceiveMemoryWarning]; }   #pragma mark- setup -( void )setup {      //  添加突出按钮      [self addCenterButtonWithImage:[UIImage imageNamed: @main ] selectedImage:[UIImage imageNamed: @mainH ]];      //  UITabBarControllerDelegate 指定为自己      self.delegate=self;      //  指定当前页——中间页      self.selectedIndex= 2 ;      //  设点button状态      button.selected=YES;      //  设定其他item点击选中颜色      myTabBar.tintColor= [UIColor colorWithRed: 222 / 255.0 green: 78 / 255.0 blue: 22 / 255.0 alpha: 1 ]; }     #pragma mark - addCenterButton // Create a custom UIButton and add it to the center of our tab bar -( void ) addCenterButtonWithImage:(UIImage*)buttonImage selectedImage:(UIImage*)selectedImage {      button = [UIButton buttonWithType:UIButtonTypeCustom];      [button addTarget:self action: @selector (pressChange:) forControlEvents:UIControlEventTouchUpInside];      button.autoresizingMask = UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleTopMargin;            //  设定button大小为适应图片      button.frame = CGRectMake( 0.0 , 0.0 , buttonImage.size.width, buttonImage.size.height);      [button setImage:buttonImage forState:UIControlStateNormal];      [button setImage:selectedImage forState:UIControlStateSelected];            //  这个比较恶心  去掉选中button时候的阴影      button.adjustsImageWhenHighlighted=NO;                  /*       *  核心代码：设置button的center 和 tabBar的 center 做对齐操作， 同时做出相对的上浮       */      CGFloat heightDifference = buttonImage.size.height - self.tabBar.frame.size.height;      if (heightDifference < 0 )          button.center = self.tabBar.center;      else      {          CGPoint center = self.tabBar.center;          center.y = center.y - heightDifference/ 2.0 ;          button.center = center;      }            [self.view addSubview:button]; }   -( void )pressChange:(id)sender {      self.selectedIndex= 2 ;      button.selected=YES; }   #pragma mark- TabBar Delegate   //  换页和button的状态关联上   - ( void )tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {      if (self.selectedIndex== 2 ) {          button.selected=YES;      } else      {          button.selected=NO;      } }   @end </uitabbarcontrollerdelegate>