iOS Tabbar中間添加凸起可旋轉(zhuǎn)按鈕功能
最近的項(xiàng)目中有需求在tabbar中間添加凸起按鈕,并且點(diǎn)擊時(shí)按鈕要旋轉(zhuǎn),看了仿斗魚(yú)的凸起,點(diǎn)擊后是present出來(lái)View,而不是像常規(guī)的tabbar上添加一個(gè)頁(yè)面,所以不符合要求,經(jīng)過(guò)一段摸索最后得的一個(gè)比較好的效果,下面看效果圖
![效果圖.gif]
##需求分析
* tabbar有5個(gè)item,每個(gè)對(duì)應(yīng)一個(gè)頁(yè)面
* 中間item為凸起按鈕
* 中間按鈕點(diǎn)擊后旋轉(zhuǎn)
##效果實(shí)現(xiàn)
* 設(shè)置5個(gè)item
我們一步步來(lái)解決這個(gè)問(wèn)題,首先創(chuàng)建MCTabBarController繼承UITabBarController,然后和常規(guī)一樣創(chuàng)建5個(gè)item,中間的按鈕不設(shè)置圖片,代碼如下
//MCTabBarController.m //添加子控制器 - (void)addChildViewControllers{ //圖片大小建議32*32 [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"首頁(yè)" andImageName:@"tab1_n" andSelectImage:@"tab1_p"]; [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"擴(kuò)展" andImageName:@"tab2_n" andSelectImage:@"tab2_p"]; //中間這個(gè)不設(shè)置東西,只占位 [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"旋轉(zhuǎn)" andImageName:@"" andSelectImage:@""]; [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"發(fā)現(xiàn)" 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]; }
這樣實(shí)現(xiàn)的效果如下圖所示
[圖一.png]
* 添加凸起按鈕
我們可以在UITabBar上添加我們的凸起按鈕,讓他的位置在沒(méi)有設(shè)置的中間按鈕偏上,按鈕的點(diǎn)擊和中間按鈕點(diǎn)擊綁定,這里直接在MCTabBarController.m中添加會(huì)有問(wèn)題
1、因?yàn)橥蛊鸢粹o的frame超出了UITabBar的frame,這樣超出的區(qū)域點(diǎn)擊按鈕會(huì)沒(méi)有響應(yīng)(圖二紅框區(qū)域),原因和解決辦法詳情參考我的這篇[iOS UIButton 點(diǎn)擊無(wú)響應(yīng)的解決辦法](http://www.dbjr.com.cn/article/131227.htm),由于要在UITabBar上添加凸起按鈕,并且處理點(diǎn)擊無(wú)效的問(wèn)題,所以這里創(chuàng)建了MCTabBar繼承UITabBar
[圖二.png]
2、由于UITabBar是readonly的,所以我們不能直接對(duì)他進(jìn)行賦值,這里利用KVC訪問(wèn)私有變量將MCTabBar賦值給"tabBar"
**具體實(shí)現(xiàn)**
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]; // 設(shè)定button大小為適應(yīng)圖片 UIImage *normalImage = [UIImage imageNamed:@"tabbar_add"]; _centerBtn.frame = CGRectMake(0, 0, normalImage.size.width, normalImage.size.height); [_centerBtn setImage:normalImage forState:UIControlStateNormal]; //去除選擇時(shí)高亮 _centerBtn.adjustsImageWhenHighlighted = NO; //根據(jù)圖片調(diào)整button的位置(圖片中心在tabbar的中間最上部,這個(gè)時(shí)候由于按鈕是有一部分超出tabbar的,所以點(diǎn)擊無(wú)效,要進(jìn)行處理) _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]; } //處理超出區(qū)域點(diǎn)擊無(wú)效的問(wèn)題 - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{ UIView *view = [super hitTest:point withEvent:event]; if (view == nil){ //轉(zhuǎn)換坐標(biāo) CGPoint tempPoint = [self.centerBtn convertPoint:point fromView:self]; //判斷點(diǎn)擊的點(diǎn)是否在按鈕區(qū)域內(nèi) 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]; //選中時(shí)的顏色 _mcTabbar.tintColor = [UIColor colorWithRed:27.0/255.0 green:118.0/255.0 blue:208/255.0 alpha:1]; //透明設(shè)置為NO,顯示白色,view的高度到tabbar頂部截止,YES的話到底部 _mcTabbar.translucent = NO; //利用KVC 將自己的tabbar賦給系統(tǒng)tabBar [self setValue:_mcTabbar forKeyPath:@"tabBar"]; self.delegate = self; [self addChildViewControllers]; } ```
* 點(diǎn)擊旋轉(zhuǎn)
在中間按鈕的點(diǎn)擊事件執(zhí)行時(shí)旋轉(zhuǎn)第二個(gè)index,然后執(zhí)行旋轉(zhuǎn)動(dòng)畫,
在tabbar的代理事件中監(jiān)聽(tīng)旋中中間按鈕的事件,然后執(zhí)行旋轉(zhuǎn)動(dòng)畫,其他按鈕則移除動(dòng)畫,代碼如下
```
- (void)buttonAction:(UIButton *)button{ self.selectedIndex = 2;//關(guān)聯(lián)中間按鈕 [self rotationAnimation]; } //tabbar選擇時(shí)的代理 - (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController{ if (tabBarController.selectedIndex == 2){//選中中間的按鈕 [self rotationAnimation]; }else { [_mcTabbar.centerBtn.layer removeAllAnimations]; } } //旋轉(zhuǎn)動(dòng)畫 - (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時(shí)UITabBar上移的問(wèn)題。
最后,附上Demo地址,如果對(duì)你有所幫助,不要吝嗇你的Star✨哦![MCTabBarDemo]
(https://github.com/Ccalary/MCTabBarDemo)
總結(jié)
以上所述是小編給大家介紹的iOS Tabbar中間添加凸起可旋轉(zhuǎn)按鈕功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
詳談iOS 位置權(quán)限彈出框閃現(xiàn)的問(wèn)題
下面小編就為大家?guī)?lái)一篇詳談iOS 位置權(quán)限彈出框閃現(xiàn)的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04Unity iOS混合開(kāi)發(fā)界面切換思路解析
這篇文章主要介紹了Unity iOS混合開(kāi)發(fā)界面切換思路解析的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09IOS開(kāi)發(fā)中取消文本框輸入時(shí)的小鍵盤
這篇文章主要介紹了IOS開(kāi)發(fā)中取消文本框輸入時(shí)的小鍵盤,需要的朋友可以參考下2015-05-05詳解iOS中多個(gè)網(wǎng)絡(luò)請(qǐng)求的同步問(wèn)題總結(jié)
這篇文章主要介紹了詳解iOS中多個(gè)網(wǎng)絡(luò)請(qǐng)求的同步問(wèn)題總結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05