iOS 關(guān)于tabBar的幾處筆記

級(jí)別： ★☆☆☆☆
標(biāo)簽：「iOS」「狀態(tài)欄」「導(dǎo)航欄」
作者： dac_1033
審校： QiShare團(tuán)隊(duì)

1. 創(chuàng)建一個(gè)帶tabBar的App

一般項(xiàng)目中的App界面框架結(jié)構(gòu)，如下：
App界面框架結(jié)構(gòu)

本例中創(chuàng)建了一個(gè)QiTabBarController繼承于UITabBarController，并作為window的rootViewController，則在QiTabBarController中寫以下代碼即可實(shí)現(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

如果App設(shè)計(jì)有底部標(biāo)簽欄（UITabBar），我們可以通過Xcode的調(diào)試功能“Debug View Hierarchy”看到UITabBar的結(jié)構(gòu)。

tabBar中子view的層次結(jié)構(gòu)

當(dāng)tabBar中的UITabItem個(gè)數(shù)超過5個(gè)時(shí)，tabBar右側(cè)會(huì)出現(xiàn)一個(gè)more按鈕，點(diǎn)擊more按鈕進(jìn)入一個(gè)名為more的controller，點(diǎn)擊展示出來的其他tabItem即可可進(jìn)入相應(yīng)的controller。

tabBar中的“更多”

其中，名為more的controller導(dǎo)航欄右側(cè)有edit按鈕，點(diǎn)擊進(jìn)入后，可拖動(dòng)編輯tabBar中所示的tab順序。在拖動(dòng)編輯tabBar中所示的tab順序時(shí)，系統(tǒng)會(huì)自動(dòng)調(diào)用UITabBarDelegate中的相應(yīng)方法（如果需要，可在QiTabBarController中直接實(shí)現(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

2. 設(shè)置tabBar的樣式

  • 設(shè)置tabBar的基本樣式
    在普通的項(xiàng)目中，一般只需要修改tabBar中每個(gè)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)];
    }
}

  • 自定義tabBar按鈕動(dòng)畫
    一般常見的tabBar按鈕動(dòng)畫有兩種：點(diǎn)擊時(shí)icon縮小放大動(dòng)畫，icon像.gif型圖片一樣的動(dòng)畫。


    tabBar按鈕動(dòng)畫

需求看起來很簡單，我們應(yīng)該已經(jīng)有了思路，首先，我們應(yīng)該找到這個(gè)當(dāng)前我們要操作的這個(gè)tabBarBtn，
在QiTabBarController中實(shí)現(xiàn)UITabBarControllerDelegate方法，其中可以監(jiān)聽到tabBar上的點(diǎn)擊動(dòng)作：

- (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;
    
    // 我們把動(dòng)畫加到這個(gè)imageView上，即可實(shí)現(xiàn)動(dòng)畫效果

    // ......

    return YES;
}

在本文實(shí)例中，我們只設(shè)置了兩個(gè)tab項(xiàng)，第一個(gè)tabBarBtn使用.gif型動(dòng)畫，第二個(gè)tabBarBtn使用縮小放大動(dòng)畫，整個(gè)QiTabBarController實(shí)現(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ù)，控制動(dòng)畫運(yùn)行的節(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

我們可在getCustomAnimation中定義其他類型的動(dòng)畫，來滿足不同需求。
工程源碼GitHub地址

推薦文章：
算法小專欄：談?wù)劥驩表示法
iOS UIWebView、WKWebView注入Cookie
Cookie簡介
iOS 圖標(biāo)&啟動(dòng)圖生成器（一）
算法小專欄：“D&C思想”與“快速排序”

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. 創(chuàng)建一個(gè)帶tabBar的App 本例中創(chuàng)建了一個(gè)QiTabBarController繼承于UITabBarC...
    大成小棧閱讀 1,108評(píng)論 0贊 0
  • 我覺得服飾跟一個(gè)人的性格有關(guān)?？匆粋€(gè)人的穿著大抵可以猜到這個(gè)人的性格。比如我，我是那種比較大眾化的，丟在人群里找不...
    shaly閱讀 655評(píng)論 0贊 2
  • 對(duì)于寒風(fēng)蕭瑟的冬季，穿著保暖才是王道，然而，想要除了溫度還想要風(fēng)度怎么辦？下面，十一奉上疊穿大法，讓你過個(gè)美美噠冬...
    11度輕奢體驗(yàn)閱讀 735評(píng)論 0贊 1
  • 燭光閃耀未曾沉眠 雨聲淅淅可多加衣 鳥鳴空靈百花若放 天高月寒盼汝歸兮
    玉龍飛雨閱讀 291評(píng)論 8贊 3
  • 一 由于高二的關(guān)系，初八我就要去上學(xué)了，快到初八的時(shí)候，小魔王天天鬧著跟我睡，有一天我和他照樣晚上日常嘮嗑。...
    單游戲0805閱讀 261評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容