1. 創建一個帶tabBar的App
一般項目中的App界面框架結構，如下：
App界面框架結構
本例中創建了一個QiTabBarController繼承于UITabBarController，并作為window的rootViewController，則在QiTabBarController中寫以下代碼即可實現上面所述結構。
//// AppDelegate.m 中代碼
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
QiTabBarController *tabBarController = [[QiTabBarController alloc] init];
_window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
[_window setBackgroundColor:[UIColor whiteColor]];
[_window setRootViewController:tabBarController];
[_window makeKeyAndVisible];
return YES;
}
//// QiTabBarController.m 中代碼
#import "QiTabBarController.h"
#import "QiNavigationController.h"
#import "FirstController.h"
#import "SecondController.h"
@interface QiTabBarController ()
@end
@implementation QiTabBarController
- (void)viewDidLoad {
[super viewDidLoad];
[self setupChildControllers];
}
- (void)setupChildControllers {
FirstController *first = [[FirstController alloc] init];
QiNavigationController *firstNav = [[QiNavigationController alloc] initWithRootViewController:first];
firstNav.tabBarItem.title = @"FirTab";
firstNav.tabBarItem.image = [[UIImage imageNamed:@"tab_team_normal"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
firstNav.tabBarItem.selectedImage = [[UIImage imageNamed:@"tab_team_50"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
SecondController *second = [[SecondController alloc] init];
QiNavigationController *secondNav = [[QiNavigationController alloc] initWithRootViewController:second];
secondNav.tabBarItem.title = @"SecTab";
secondNav.tabBarItem.image = [[UIImage imageNamed:@"tab_mine_normal"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
secondNav.tabBarItem.selectedImage = [[UIImage imageNamed:@"tab_mine_50"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
self.viewControllers = @[firstNav, secondNav, thirdNav, fourthNav, fifthNav, sixthNav];
}
@end
如果App設計有底部標簽欄（UITabBar），我們可以通過Xcode的調試功能“Debug View Hierarchy”看到UITabBar的結構。
tabBar中子view的層次結構
當tabBar中的UITabItem個數超過5個時，tabBar右側會出現一個more按鈕，點擊more按鈕進入一個名為more的controller，點擊展示出來的其他tabItem即可可進入相應的controller。
tabBar中的“更多”
其中，名為more的controller導航欄右側有edit按鈕，點擊進入后，可拖動編輯tabBar中所示的tab順序。在拖動編輯tabBar中所示的tab順序時，系統會自動調用UITabBarDelegate中的相應方法（如果需要，可在QiTabBarController中直接實現UITabBarDelegate協議方法）：
- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item; // called when a new view is selected by the user (but not programatically)
/* called when user shows or dismisses customize sheet. you can use the 'willEnd' to set up what appears underneath.
changed is YES if there was some change to which items are visible or which order they appear. If selectedItem is no longer visible,
it will be set to nil.
*/
- (void)tabBar:(UITabBar *)tabBar willBeginCustomizingItems:(NSArray<UITabBarItem *> *)items __TVOS_PROHIBITED; // called before customize sheet is shown. items is current item list
- (void)tabBar:(UITabBar *)tabBar didBeginCustomizingItems:(NSArray<UITabBarItem *> *)items __TVOS_PROHIBITED; // called after customize sheet is shown. items is current item list
- (void)tabBar:(UITabBar *)tabBar willEndCustomizingItems:(NSArray<UITabBarItem *> *)items changed:(BOOL)changed __TVOS_PROHIBITED; // called before customize sheet is hidden. items is new item list
- (void)tabBar:(UITabBar *)tabBar didEndCustomizingItems:(NSArray<UITabBarItem *> *)items changed:(BOOL)changed __TVOS_PROHIBITED; // called after customize sheet is hidden. items is new item list
2. 設置tabBar的樣式
- 設置tabBar的基本樣式
在普通的項目中，一般只需要修改tabBar中每個item展示的圖片icon和title及item的位置，或item中icon與title的間隔。
- (void)setTabBarStyle {
//去掉TabBar頂部的線
UITabBar *tabBar = self.tabBar;
[tabBar setShadowImage:[UIImage new]];
[tabBar setBackgroundImage:[UIImage new]];
tabBar.translucent = NO;
for (UITabBarItem *item in self.tabBar.items) {
// 設置UITabBarItem中title樣式
[item setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor lightGrayColor]} forState:UIControlStateNormal];
[item setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor darkGrayColor]} forState:UIControlStateSelected];
// 設置UITabBarItem中按鈕大小，及img與title間距
[item setImageInsets:UIEdgeInsetsMake(-5, 0, 5, 0)];
}
}
-
自定義tabBar按鈕動畫
一般常見的tabBar按鈕動畫有兩種：點擊時icon縮小放大動畫，icon像.gif型圖片一樣的動畫。
tabBar按鈕動畫
需求看起來很簡單，我們應該已經有了思路，首先，我們應該找到這個當前我們要操作的這個tabBarBtn，
在QiTabBarController中實現UITabBarControllerDelegate方法，其中可以監聽到tabBar上的點擊動作：
- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController {
NSInteger index = [tabBarController.childViewControllers indexOfObject:viewController];
UIButton *tabBarBtn = tabBarController.tabBar.subviews[index+1];
UIImageView *imageView = tabBarBtn.subviews.firstObject;
// 我們把動畫加到這個imageView上，即可實現動畫效果
// ......
return YES;
}
在本文實例中，我們只設置了兩個tab項，第一個tabBarBtn使用.gif型動畫，第二個tabBarBtn使用縮小放大動畫，整個QiTabBarController實現代碼如下：
#import "QiTabBarController.h"
#import "QiNavigationController.h"
#import "FirstController.h"
#import "SecondController.h"
@interface QiTabBarController () <UITabBarControllerDelegate>
@property (strong, nonatomic) NSMutableArray<UIImage *> *imgArr;
@end
@implementation QiTabBarController
- (void)viewDidLoad {
[super viewDidLoad];
[self setupChildControllers];
[self setTabBarStyle];
[self initImages];
}
- (void)setupChildControllers {
self.view.backgroundColor = [UIColor whiteColor];
self.delegate = self;
FirstController *first = [[FirstController alloc] init];
QiNavigationController *firstNav = [[QiNavigationController alloc] initWithRootViewController:first];
firstNav.tabBarItem.title = @"FirTab";
firstNav.tabBarItem.image = [[UIImage imageNamed:@"tab_team_normal"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
firstNav.tabBarItem.selectedImage = [[UIImage imageNamed:@"tab_team_50"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
SecondController *second = [[SecondController alloc] init];
QiNavigationController *secondNav = [[QiNavigationController alloc] initWithRootViewController:second];
secondNav.tabBarItem.title = @"SecTab";
secondNav.tabBarItem.image = [[UIImage imageNamed:@"tab_mine_normal"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
secondNav.tabBarItem.selectedImage = [[UIImage imageNamed:@"tab_mine_50"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
self.viewControllers = @[firstNav, secondNav];
}
- (void)setTabBarStyle {
//去掉TabBar頂部的線
UITabBar *tabBar = self.tabBar;
[tabBar setShadowImage:[UIImage new]];
[tabBar setBackgroundImage:[UIImage new]];
tabBar.translucent = NO;
for (UITabBarItem *item in self.tabBar.items) {
// 設置UITabBarItem中title樣式
[item setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor lightGrayColor]} forState:UIControlStateNormal];
[item setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor darkGrayColor]} forState:UIControlStateSelected];
// 設置UITabBarItem中按鈕大小，及img與title間距
[item setImageInsets:UIEdgeInsetsMake(-3, 0, 3, 0)];
}
}
- (void)initImages {
_imgArr = [NSMutableArray array];
for (int i=0; i<51; i++) {
NSString *name = [NSString stringWithFormat:@"tab_team_%02d", i];
UIImage *image = [UIImage imageNamed:name];
[_imgArr addObject:image];
}
}
- (CAAnimation *)getCustomAnimation {
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
//速度控制函數，控制動畫運行的節奏
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.duration = 0.2;
animation.repeatCount = 1;
animation.autoreverses = YES;
animation.fromValue = [NSNumber numberWithFloat:0.7];
animation.toValue = [NSNumber numberWithFloat:1.2];
return animation;
}
#pragma mark - UITabBarControllerDelegate
- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController {
NSInteger index = [tabBarController.childViewControllers indexOfObject:viewController];
UIButton *tabBarBtn = tabBarController.tabBar.subviews[index+1];
UIImageView *imageView = tabBarBtn.subviews.firstObject;
if (index == 0) {
[imageView stopAnimating];
imageView.animationImages = _imgArr;
imageView.animationRepeatCount = 1;
imageView.animationDuration = 0.7;
[imageView startAnimating];
} else {
static NSString *tabBarBtnAnimationKey = @"tabBarBtnAnimationKey";
[imageView.layer removeAnimationForKey:tabBarBtnAnimationKey];
[imageView.layer addAnimation:[self getCustomAnimation] forKey:tabBarBtnAnimationKey];
}
return YES;
}
@end
我們可在getCustomAnimation中定義其他類型的動畫，來滿足不同需求。
工程源碼GitHub地址
推薦文章：
算法小專欄：談談大O表示法
iOS UIWebView、WKWebView注入Cookie
Cookie簡介
iOS 圖標&啟動圖生成器（一）
算法小專欄：“D&C思想”與“快速排序”
