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://chabaoo.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)畫(huà),
在tabbar的代理事件中監(jiān)聽(tīng)旋中中間按鈕的事件,然后執(zhí)行旋轉(zhuǎn)動(dòng)畫(huà),其他按鈕則移除動(dòng)畫(huà),代碼如下
```
- (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)畫(huà)
- (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"];
}
```
* 其他
這里寫(xiě)了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-04
Unity iOS混合開(kāi)發(fā)界面切換思路解析
這篇文章主要介紹了Unity iOS混合開(kāi)發(fā)界面切換思路解析的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09
ios使用OC寫(xiě)算法之遞歸實(shí)現(xiàn)八皇后
本篇文章主要介紹了ios使用OC寫(xiě)算法之遞歸實(shí)現(xiàn)八皇后,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
IOS開(kāi)發(fā)中取消文本框輸入時(shí)的小鍵盤(pán)
這篇文章主要介紹了IOS開(kāi)發(fā)中取消文本框輸入時(shí)的小鍵盤(pán),需要的朋友可以參考下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

