1. 創(chuàng)建一個帶tabBar的App
一般項目中的App界面框架結(jié)構(gòu)，如下：
App界面框架結(jié)構(gòu)
<figcaption></figcaption>
本例中創(chuàng)建了一個QiTabBarController繼承于UITabBarController年叮，并作為window的rootViewController，則在QiTabBarController中寫以下代碼即可實現(xiàn)上面所述結(jié)構(gòu)蒲凶。
//// 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
復(fù)制代碼
如果App設(shè)計有底部標(biāo)簽欄（UITabBar）垄惧，我們可以通過Xcode的調(diào)試功能“Debug View Hierarchy”看到UITabBar的結(jié)構(gòu)。
tabBar中子view的層次結(jié)構(gòu)
<figcaption></figcaption>
當(dāng)tabBar中的UITabItem個數(shù)超過5個時嘹害，tabBar右側(cè)會出現(xiàn)一個more按鈕，點擊more按鈕進(jìn)入一個名為more的controller吮便，點擊展示出來的其他tabItem即可可進(jìn)入相應(yīng)的controller笔呀。
tabBar中的“更多”
<figcaption></figcaption>
其中，名為more的controller導(dǎo)航欄右側(cè)有edit按鈕髓需，點擊進(jìn)入后许师，可拖動編輯tabBar中所示的tab順序。在拖動編輯tabBar中所示的tab順序時僚匆，系統(tǒng)會自動調(diào)用UITabBarDelegate中的相應(yīng)方法（如果需要微渠，可在QiTabBarController中直接實現(xiàn)UITabBarDelegate協(xié)議方法）：
- (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
復(fù)制代碼
2. 設(shè)置tabBar的樣式
- 設(shè)置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) {
// 設(shè)置UITabBarItem中title樣式
[item setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor lightGrayColor]} forState:UIControlStateNormal];
[item setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor darkGrayColor]} forState:UIControlStateSelected];
// 設(shè)置UITabBarItem中按鈕大小，及img與title間距
[item setImageInsets:UIEdgeInsetsMake(-5, 0, 5, 0)];
}
}
復(fù)制代碼
-
自定義tabBar按鈕動畫 一般常見的tabBar按鈕動畫有兩種：點擊時icon縮小放大動畫松申，icon像.gif型圖片一樣的動畫云芦。tabBar按鈕動畫
<figcaption></figcaption>
需求看起來很簡單俯逾，我們應(yīng)該已經(jīng)有了思路，首先舅逸，我們應(yīng)該找到這個當(dāng)前我們要操作的這個tabBarBtn桌肴， 在QiTabBarController中實現(xiàn)UITabBarControllerDelegate方法，其中可以監(jiān)聽到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上琉历，即可實現(xiàn)動畫效果
// ......
return YES;
}
復(fù)制代碼
在本文實例中坠七，我們只設(shè)置了兩個tab項，第一個tabBarBtn使用.gif型動畫善已，第二個tabBarBtn使用縮小放大動畫灼捂，整個QiTabBarController實現(xiàn)代碼如下：
#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) {
// 設(shè)置UITabBarItem中title樣式
[item setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor lightGrayColor]} forState:UIControlStateNormal];
[item setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor darkGrayColor]} forState:UIControlStateSelected];
// 設(shè)置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"];
//速度控制函數(shù)换团，控制動畫運行的節(jié)奏
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
復(fù)制代碼
我們可在getCustomAnimation中定義其他類型的動畫悉稠，來滿足不同需求。
工程源碼GitHub地址
作者：QiShare
鏈接：https://juejin.im/post/5cd0043de51d453ae11053ff
來源：掘金
著作權(quán)歸作者所有艘包。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)的猛，非商業(yè)轉(zhuǎn)載請注明出處。
