最近的項目中有需求在tabbar中間添加凸起按鈕，并且點擊時按鈕要旋轉，看了仿斗魚的凸起，點擊后是present出來View，而不是像常規的tabbar上添加一個頁面，所以不符合要求，經過一段摸索最后得的一個比較好的效果，下面看效果圖
![效果圖.gif]
##需求分析
* tabbar有5個item，每個對應一個頁面
* 中間item為凸起按鈕
* 中間按鈕點擊后旋轉
##效果實現
* 設置5個item
我們一步步來解決這個問題，首先創建MCTabBarController繼承UITabBarController，然后和常規一樣創建5個item，中間的按鈕不設置圖片，代碼如下
//MCTabBarController.m//添加子控制器- (void)addChildViewControllers{ //圖片大小建議32*32 [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"首頁" andImageName:@"tab1_n" andSelectImage:@"tab1_p"]; [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"擴展" andImageName:@"tab2_n" andSelectImage:@"tab2_p"]; //中間這個不設置東西，只占位 [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"旋轉" andImageName:@"" andSelectImage:@""]; [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"發現" andImageName:@"tab3_n" andSelectImage:@"tab3_p"]; [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"我" andImageName:@"tab4_n" andSelectImage:@"tab4_p"];}- (void)addChildrenViewController:(UIViewController *)childVC andTitle:(NSString *)title andImageName:(NSString *)imageName andSelectImage:(NSString *)selectedImage{ childVC.tabBarItem.image = [UIImage imageNamed:imageName]; childVC.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage]; childVC.title = title; BaseNavigationController *baseNav = [[BaseNavigationController alloc] initWithRootViewController:childVC]; [self addChildViewController:baseNav];}這樣實現的效果如下圖所示
[圖一.png]
* 添加凸起按鈕
我們可以在UITabBar上添加我們的凸起按鈕，讓他的位置在沒有設置的中間按鈕偏上，按鈕的點擊和中間按鈕點擊綁定，這里直接在MCTabBarController.m中添加會有問題
1、因為凸起按鈕的frame超出了UITabBar的frame，這樣超出的區域點擊按鈕會沒有響應（圖二紅框區域），原因和解決辦法詳情參考我的這篇[iOS UIButton 點擊無響應的解決辦法](http://www.49028c.com/article/131227.htm)，由于要在UITabBar上添加凸起按鈕，并且處理點擊無效的問題，所以這里創建了MCTabBar繼承UITabBar
[圖二.png]
2、由于UITabBar是readonly的，所以我們不能直接對他進行賦值，這里利用KVC訪問私有變量將MCTabBar賦值給"tabBar"
**具體實現**
MCTabBar
```
#import@interface MCTabBar : UITabBar@property (nonatomic, strong) UIButton *centerBtn; //中間按鈕@end``````@implementation MCTabBar- (instancetype)init{ if (self = [super init]){ [self initView]; } return self;}- (void)initView{ _centerBtn = [UIButton buttonWithType:UIButtonTypeCustom]; // 設定button大小為適應圖片 UIImage *normalImage = [UIImage imageNamed:@"tabbar_add"]; _centerBtn.frame = CGRectMake(0, 0, normalImage.size.width, normalImage.size.height); [_centerBtn setImage:normalImage forState:UIControlStateNormal]; //去除選擇時高亮 _centerBtn.adjustsImageWhenHighlighted = NO; //根據圖片調整button的位置(圖片中心在tabbar的中間最上部，這個時候由于按鈕是有一部分超出tabbar的，所以點擊無效，要進行處理) _centerBtn.frame = CGRectMake(([UIScreen mainScreen].bounds.size.width - normalImage.size.width)/2.0, - normalImage.size.height/2.0, normalImage.size.width, normalImage.size.height); [self addSubview:_centerBtn];}//處理超出區域點擊無效的問題- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{ UIView *view = [super hitTest:point withEvent:event]; if (view == nil){ //轉換坐標 CGPoint tempPoint = [self.centerBtn convertPoint:point fromView:self]; //判斷點擊的點是否在按鈕區域內 if (CGRectContainsPoint(self.centerBtn.bounds, tempPoint)){ //返回按鈕 return _centerBtn; } } return view;}```利用KVC賦值
```
//MCTabBarController.m- (void)viewDidLoad { [super viewDidLoad]; _mcTabbar = [[MCTabBar alloc] init]; [_mcTabbar.centerBtn addTarget:self action:@selector(buttonAction:) forControlEvents:UIControlEventTouchUpInside]; //選中時的顏色 _mcTabbar.tintColor = [UIColor colorWithRed:27.0/255.0 green:118.0/255.0 blue:208/255.0 alpha:1]; //透明設置為NO，顯示白色，view的高度到tabbar頂部截止，YES的話到底部 _mcTabbar.translucent = NO; //利用KVC 將自己的tabbar賦給系統tabBar [self setValue:_mcTabbar forKeyPath:@"tabBar"]; self.delegate = self; [self addChildViewControllers];}```* 點擊旋轉
在中間按鈕的點擊事件執行時旋轉第二個index，然后執行旋轉動畫，
在tabbar的代理事件中監聽旋中中間按鈕的事件，然后執行旋轉動畫，其他按鈕則移除動畫，代碼如下
```
- (void)buttonAction:(UIButton *)button{ self.selectedIndex = 2;//關聯中間按鈕 [self rotationAnimation];}//tabbar選擇時的代理- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController{ if (tabBarController.selectedIndex == 2){//選中中間的按鈕 [self rotationAnimation]; }else { [_mcTabbar.centerBtn.layer removeAllAnimations]; }}//旋轉動畫- (void)rotationAnimation{ CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; rotationAnimation.toValue = [NSNumber numberWithFloat:M_PI*2.0]; rotationAnimation.duration = 3.0; rotationAnimation.repeatCount = HUGE; [_mcTabbar.centerBtn.layer addAnimation:rotationAnimation forKey:@"key"];}```
* 其他
這里寫了BaseNavigationController繼承自UINavigationController，處理了push后隱藏底部UITabBar的情況，并解決了iPhonX上push時UITabBar上移的問題。
最后，附上Demo地址，如果對你有所幫助，不要吝嗇你的Star✨哦！[MCTabBarDemo]
(https://github.com/Ccalary/MCTabBarDemo)
總結
以上所述是小編給大家介紹的iOS Tabbar中間添加凸起可旋轉按鈕功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
