iOS Tabbar中間新增凸起可旋轉按鈕
阿新 • • 發佈:2018-12-05
前言
(本文簡書地址: www.jianshu.com/p/5160a1b48…最近的專案中有需求在tabbar中間新增凸起按鈕,並且點選時按鈕要旋轉,看了仿閒魚的凸起,點選後是present出來View,而不是像常規的tabbar上新增一個頁面(親測,閒魚的超出Tabbar部分點選是沒有反應的,這是bug啊,下文對這個問題有詳解),所以不符合要求,經過一段摸索最後得的一個比較好的效果,下面看效果圖
需求分析
- tabbar有5個item,每個對應一個頁面
- 中間item為凸起按鈕
- 中間按鈕點選後旋轉
效果實現
- 設定5個item 我們一步步來解決這個問題,首先建立MCTabBarController繼承UITabBarController,然後和常規一樣建立5個item,中間的按鈕不設定圖片,程式碼如下
//MCTabBarController.m
//新增子控制器
- (void)addChildViewControllers{
//圖片大小建議32*32
[self addChildrenViewController:[[ViewController alloc] init] andTitle:@"首頁" andImageName:@"tab1"];
[self addChildrenViewController:[[ViewController alloc] init] andTitle:@"擴充套件" andImageName:@"tab2"];
//中間這個不設定東西,只佔位
[self addChildrenViewController:[[ViewController alloc] init] andTitle:@"旋轉" andImageName:@""];
[self addChildrenViewController:[[ViewController alloc] init] andTitle:@"發現" andImageName:@"tab3"];
[self addChildrenViewController:[[ViewController alloc] init] andTitle:@"我的" andImageName:@"tab4"];
}
- (void)addChildrenViewController:(UIViewController *)childVC andTitle:(NSString *)title andImageName:(NSString *)imageName{
childVC.tabBarItem.image = [UIImage imageNamed:imageName];
// 選中的顏色由tabbar的tintColor決定
childVC.tabBarItem.selectedImage = [UIImage imageNamed:imageName];
childVC.title = title;
BaseNavigationController *baseNav = [[BaseNavigationController alloc] initWithRootViewController:childVC];
[self addChildViewController:baseNav];
}
複製程式碼
這樣實現的效果如下圖所示
- 新增凸起按鈕 我們可以在UITabBar上新增我們的凸起按鈕,讓他的位置在沒有設定的中間按鈕偏上,按鈕的點選和中間按鈕點選繫結,這裡直接在MCTabBarController.m中新增會有問題 1、因為凸起按鈕的frame超出了UITabBar的frame,這樣超出的區域點選按鈕會沒有響應(圖二紅框區域),原因和解決辦法詳情參考我的這篇iOS UIButton 點選無響應的解決辦法,由於要在UITabBar上新增凸起按鈕,並且處理點選無效的問題,所以這裡建立了MCTabBar繼承UITabBar 2、由於UITabBar是readonly的,所以我們不能直接對他進行賦值,這裡利用KVC訪問私有變數將MCTabBar賦值給"tabBar" 具體實現 MCTabBar
#import <UIKit/UIKit.h>
@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{
if (self.hidden){ //如果tabbar隱藏了,那麼直接執行系統方法
return [super hitTest:point withEvent:event];
}else {
//轉換座標
CGPoint tempPoint = [self.centerBtn convertPoint:point fromView:self];
//判斷點選的點是否在按鈕區域內
if (CGRectContainsPoint(self.centerBtn.bounds, tempPoint)){
//返回按鈕
return _centerBtn;
}else {
return [super hitTest:point withEvent:event];
}
}
}
複製程式碼
利用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.selectItem = 0; //預設選中第一個
self.delegate = self;
[self addChildViewControllers];
}
複製程式碼
- 點選旋轉 在中間按鈕的點選事件執行時旋轉第二個index,然後執行旋轉動畫, 在tabbar的代理事件中監聽旋中中間按鈕的事件,然後執行旋轉動畫,其他按鈕則移除動畫,程式碼如下
- (void)buttonAction:(UIButton *)button{
self.selectedIndex = 2;//關聯中間按鈕
if (self.selectItem != 2){ //如果是選中的旋轉按鈕則不再次進行旋轉
[self rotationAnimation];
}
self.selectItem = 2;
}
//tabbar選擇時的代理
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController{
if (tabBarController.selectedIndex == 2){//選中中間的按鈕
if (self.selectItem != 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上移的問題。
更新
- 2018.12.5 增加了Swift版本(swift4.1),邏輯和方法和OC一致
最後,附上Demo地址,如果對你有所幫助,不要吝嗇你的Star✨哦!MCTabBarDemo