iOS 關(guān)于tabBar

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

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

App界面框架結(jié)構(gòu)

<figcaption></figcaption>

本例中創(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
復(fù)制代碼

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

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

<figcaption></figcaption>

當(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中的“更多”

<figcaption></figcaption>

其中，名為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
復(fù)制代碼

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)];
    }
}
復(fù)制代碼

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

    <figcaption></figcaption>

需求看起來很簡單，我們應(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;
}
復(fù)制代碼

在本文實(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
復(fù)制代碼

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

作者：QiShare
鏈接：https://juejin.im/post/5cd0043de51d453ae11053ff
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

?著作權(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)容

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