1. 建立一個帶tabBar的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中的UITabItem個數超過5個時，tabBar右側會出現一個more按鈕，點選more按鈕進入一個名為more的controller，點選展示出來的其他tabItem即可可進入相應的controller。
- (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型圖片一樣的動畫。
需求看起來很簡單，我們應該已經有了思路，首先，我們應該找到這個當前我們要操作的這個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地址
小編微信：可加並拉入《QiShare技術交流群》。
關注我們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號)
推薦文章：
演算法小專欄：談談大O表示法
iOS UIWebView、WKWebView注入Cookie
Cookie簡介
iOS 圖示&啟動圖生成器（一）
演算法小專欄：“D&C思想”與“快速排序”
奇舞週刊