看到上面需求,第一反應是做成類似新浪自定義tabbar 按鈕形式,評估了一下工期,時間太緊,就想著用原生的Tabbar 能否實現功能。首先遇到的最大問題就是,如何阻斷tabbar 按鈕的點擊事件,讓其點擊的時候不顯示原定頁面,而是執行我的自定義事件。
感謝前輩的分享,網上找到了對應的解決方案
點擊了UITabBar的按鈕之后,UITabBarController會執行UITabBarControllerDelegate的以下方法,并將要跳轉到的UIViewController作為參數傳遞給一下代理方法。如果代理方法返回YES那么UITabBarController就會正常跳轉,如果返回NO,那么就不會做跳轉動作。方法如下:
- (BOOL)tabBarController:(UITabBarController*)tabBarController shouldSelectViewController:(UIViewController*)viewController
然后我們來看具體實現
// tabbar 點擊之后 -(void)tabBarController:(UITabBarController *)tabBarController didSelectViewController: (UIViewController *)viewController{ // 記錄當前被點擊tabbar _currentIndex = tabBarController.selectedIndex; } // tabbar 是否點擊 -(BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController{ // 判斷是否點擊中間 (加號)tabbar if ([viewController.childViewControllers[0] isKindOfClass:[SendViewController class]]) { // 點擊之后發送通知,做相應處理 [[NSNotificationCenter defaultCenter]postNotificationName:@"sendVCSelected" object:[NSString stringWithFormat:@"%ld",(long)_currentIndex]]; return NO; } return YES; }
到這tabar 點擊事件問題就已經解決了,下面來看下如何修改圖標位置,設置正常與點擊后圖片效果、修改字體顏色等
修改按鈕圖片位置
tabItem.imageInsets = imageInsets;
修改前
修改后
設置正常與選中圖片,取消系統圖片渲染效果
圖片不被渲染
UIImage * selectedImage = [UIImage imageNamed:selectImageStr]; UIImage * deselectImage = [UIImage imageNamed:deselectImageStr]; // 設置圖片不被渲染 selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; deselectImage = [deselectImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
設置tabbar 選中與未選中圖片
UITabBarItem * tabItem = [[UITabBarItem alloc] initWithTitle:title image:deselectImage selectedImage:selectedImage];
設置消息提示
tabItem.badgeValue = @"1";
統一設置tabbar 文字(選中后效果,其他狀態下只需要修改UIControlStateSelected 即可)
設置tabbar 字體顏色、大小等(同理可設置navigationbar, 都是在bar) [[UITabBarItem appearance] setTitleTextAttributes:@{ NSForegroundColorAttributeName : [UIColor blackColor], NSFontAttributeName:[UIFont fontWithName:@"Marion-Italic" size:14.0] } forState:UIControlStateSelected];