UITabBarController 分栏视图控制器

前言

  • Objective-C

    1
    NS_CLASS_AVAILABLE_IOS(2_0) @interface UITabBarController : UIViewController <UITabBarDelegate, NSCoding>
  • Swift

    1
    @available(iOS 2.0, *) public class UITabBarController : UIViewController, UITabBarDelegate, NSCoding
  • UITabBarController: 分栏视图控制器,在创建时,需要一次性的将所有 viewController 或 navigationController 添加到 UITabBarController 的 viewControllers 属性中。

  • UITabBarController 一次性添加了很多个视图控制器,但是在程序的运行的时候,并不是一次性将所有视图控制器对象进行创建和显示,而是用户点击显示那个视图控制器对象,系统才会创建和显示该视图。如果默认首先显示的不是 viewController1,例如是显示 viewController3, 系统首先创建 viewController1 和 viewController3,viewController2 和 viewController4 用户点击显示的时候才会被显示出来,无论先显示那个 viewController,viewController1 总是会被创建。

  • TabBarController 最多只能显示 5 个视图,超过 5 个的都会以 more 的形式显示,点击 more,剩余的视图将会被显示。当点击 Edit 时可以改变分栏上放置的分栏项。

  • TabBarController 的高度固定为 49,图片的尺寸最好为 30 * 30。

1、tabBarController 的创建

  • Objective-C

    • 创建分栏视图控制器

      1
      2
      3
      4
      5
      6
      7
      8
      UITabBarController *tabBarController = [[UITabBarController alloc] init];

      // 将 tabBarController 添加到 viewController 上
      [self addChildViewController:tabBarController];
      [self.view addSubview:tabBarController.view];

      // 将 navigationController 做为 window 的根视图控制器
      self.window.rootViewController = tabBarController;
    • 设置分栏视图控制器包含的视图控制器

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      // 实例化视图控制器对象(或者 导航视图控制器对象)
      ViewController11 *viewController1 = [[ViewController11 alloc] init];
      ViewController12 *viewController2 = [[ViewController12 alloc] init];
      ViewController13 *viewController3 = [[ViewController13 alloc] init];
      ViewController14 *viewController4 = [[ViewController14 alloc] init];

      NSArray *viewControllerArray = @[viewController1, viewController2,
      viewController3, viewController4];

      // 向分栏视图控制器中添加视图控制器
      tabBarController.viewControllers = viewControllerArray;
    • 设置分栏显示的标题和图片

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      // 设置显示的 title
      NSArray *titleArray = @[@"微信", @"通讯录", @"发现", @"我"];

      // 设置选择时显示的图片
      NSArray *selectImageArray = @[@"tabbar_mainframeHL", @"tabbar_contactsHL",
      @"tabbar_discoverHL", @"tabbar_meHL"];

      // 设置未选择时显示的图片
      NSArray *unSelectImagArray = @[@"tabbar_mainframe", @"tabbar_contacts",
      @"tabbar_discover", @"tabbar_me"];

      for (int i = 0; i < 4; i++) {

      // 从 tabBarController 中取出 tabBarItem 成员
      UITabBarItem *tabBarItem = tabBarController.tabBar.items[i];

      tabBarItem = [tabBarItem initWithTitle: titleArray[i]
      image: [[UIImage imageNamed:unSelectImagArray[i]]
      imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
      selectedImage: [[UIImage imageNamed:selectImageArray[i]]
      imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
      }
    • 设置分栏标题文字颜色

      1
      2
      // 选中时颜色,默认为蓝色
      tabBarController.tabBar.tintColor = [UIColor greenColor];
  • Swift

    • 创建分栏视图控制器

      1
      2
      3
      4
      5
      6
      7
      8
      let tabBarController = UITabBarController()

      // 将 tabBarController 添加到 viewController 上
      self.addChildViewController(tabBarController)
      self.view.addSubview(tabBarController.view)

      // 将 navigationController 做为 window 的根视图控制器
      self.window?.rootViewController = tabBarController
    • 设置分栏视图控制器包含的视图控制器

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      // 实例化视图控制器对象(或者 导航视图控制器对象)
      let viewController1 = ViewController11()
      let viewController2 = ViewController12()
      let viewController3 = ViewController13()
      let viewController4 = ViewController14()

      let viewControllerArray: Array = [viewController1, viewController2,
      viewController3, viewController4]

      // 向分栏视图控制器中添加视图控制器
      tabBarController.viewControllers = viewControllerArray
    • 设置分栏显示的标题和图片

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      // 设置显示的 title
      let titleArray = ["微信", "通讯录", "发现", "我"];

      // 设置选择时显示的图片
      let selectImageArray = ["tabbar_mainframeHL", "tabbar_contactsHL",
      "tabbar_discoverHL", "tabbar_meHL"]

      // 设置未选择时显示的图片
      let unSelectImagArray = ["tabbar_mainframe", "tabbar_contacts", "tabbar_discover", "tabbar_me"]

      for i in 0 ..< 4 {

      viewControllerArray[i].tabBarItem = UITabBarItem(title: titleArray[i],
      image: UIImage(named: unSelectImagArray[i])!
      .imageWithRenderingMode(.AlwaysOriginal),
      selectedImage: UIImage(named: selectImageArray[i])!
      .imageWithRenderingMode(.AlwaysOriginal))
      }
    • 设置分栏标题文字颜色

      1
      2
      // 选中时颜色,默认为蓝色
      tabBarController.tabBar.tintColor = UIColor.greenColor()

2、tabBarController 的设置

  • Objective-C

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    // 设置首先显示的视图控制器

    // 视图的添加顺序已知
    /*
    用添加顺序的标号指定
    */
    tabBarController.selectedIndex = 1;

    // 视图的添加顺序未知

    // for-in 循环
    for (UIViewController *viewController in tabBarController.viewControllers) {

    if ([viewController isKindOfClass:[ViewController14 class]]) {

    // 设置首先显示的 viewController
    /*
    直接指定视图控制器的名称
    */
    tabBarController.selectedViewController = viewController;
    }
    }

    // block 循环
    [viewControllerArray enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {

    if ([obj isKindOfClass:[ViewController14 class]]) {

    tabBarController.selectedViewController = obj;
    }
    }];

    // 设置分栏标题文字颜色
    /*
    选中时颜色,默认为蓝色
    */

    // 选中时颜色
    tabBarController.tabBar.tintColor = [UIColor greenColor];

    // 选中时颜色
    [[UITabBarItem appearance] setTitleTextAttributes:
    @{NSForegroundColorAttributeName:[UIColor greenColor]}
    forState:UIControlStateSelected];

    // 未选中时颜色
    [[UITabBarItem appearance] setTitleTextAttributes:
    @{NSForegroundColorAttributeName:[UIColor grayColor]}
    forState:UIControlStateNormal];

    // 设置背景颜色
    /*
    一个 tabBarController 只有一个 tabBar
    */
    tabBarController.tabBar.barTintColor = [UIColor blueColor];

    // 设置背景图片
    tabBarController.tabBar.backgroundImage = [UIImage imageNamed:@"tabbarBkg.png"];

    // 消除图片阴影线
    tabBarController.tabBar.shadowImage = [[UIImage alloc] init];

    // 设置分栏图片大小
    /*
    图片尺寸为 49*49 时,此设置值能使图片高度与分栏高度重合
    */
    UITabBarItem *item0 = [tabBarController.tabBar.items objectAtIndex:0];
    item0.imageInsets = UIEdgeInsetsMake(5, 0, -6, 0);

    // 关闭分栏的半透明状态
    tabBarController.tabBar.translucent = NO;

    // 隐藏分栏视图控制器
    /*
    导航视图控制器推出新的视图时,隐藏新视图下的分栏视图控制器
    */
    tabBarController.hidesBottomBarWhenPushed = YES;

    // 设置代理,需遵守协议 <UITabBarControllerDelegate>
    tabBarController.delegate = self;
  • Swift

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    // 设置首先显示的视图控制器

    // 视图的添加顺序已知
    /*
    用添加顺序的标号指定
    */
    tabBarController.selectedIndex = 1;

    // 视图的添加顺序未知

    // for-in 循环
    for vc in viewControllerArray {

    if vc.isKindOfClass(ViewController14.self) {

    // 设置首先显示的 viewController
    /*
    直接指定视图控制器的名称
    */
    tabBarController.selectedViewController = vc
    }
    }

    // 设置分栏标题文字颜色
    /*
    选中时颜色,默认为蓝色
    */

    // 选中时颜色
    tabBarController.tabBar.tintColor = UIColor.greenColor()

    // 选中时颜色
    UITabBarItem.appearance()
    .setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.greenColor()],
    forState: .Selected)

    // 未选中时的标题颜色
    UITabBarItem.appearance()
    .setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.grayColor()],
    forState: .Normal)

    // 设置背景颜色
    /*
    一个 tabBarController 只有一个 tabBar
    */
    tabBarController.tabBar.barTintColor = UIColor.cyanColor()

    // 设置背景图片
    tabBarController.tabBar.backgroundImage = UIImage(named: "tabbarBkg.png")

    // 消除图片阴影线
    /*
    消除图片边框线
    */
    tabBarController.tabBar.shadowImage = UIImage()

    // 设置分栏图片大小
    /*
    图片尺寸为 49*49 时,此设置值能使图片高度与分栏高度重合
    */
    let item0 = tabBarController.tabBar.items?[0]
    item0!.imageInsets = UIEdgeInsetsMake(5, 0, -6, 0)

    // 关闭分栏的半透明状态
    tabBarController.tabBar.translucent = false

    // 隐藏分栏视图控制器
    /*
    导航视图控制器推出新的视图时,隐藏新视图下的分栏视图控制器
    */
    tabBarController.hidesBottomBarWhenPushed = true

    // 设置代理,需遵守协议 UITabBarControllerDelegate
    tabBarController.delegate = self;

3、UITabBarControllerDelegate 协议方法

  • 需遵守协议 UITabBarControllerDelegate,并设置代理

  • Objective-C

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    // 将要选择的某个 viewController 是否允许被选择
    - (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController {

    // 允许编辑
    return YES;
    }

    // 已经选择
    - (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {

    NSLog(@"%li", tabBarController.selectedIndex);
    }

    // 将要开始编辑(超过5个时进行 edit 时触发)
    - (void)tabBarController:(UITabBarController *)tabBarController willBeginCustomizingViewControllers:(NSArray *)viewControllers {

    }

    // 已经结束编辑
    - (void)tabBarController:(UITabBarController *)tabBarController willEndCustomizingViewControllers:(NSArray *)viewControllers changed:(BOOL)changed {

    }

    // 已经结束编辑
    - (void)tabBarController:(UITabBarController *)tabBarController didEndCustomizingViewControllers:(NSArray *)viewControllers changed:(BOOL)changed {

    }
  • Swift

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    // 将要选择的某个 viewController 是否允许被选择
    func tabBarController(tabBarController: UITabBarController, shouldSelectViewController viewController: UIViewController) -> Bool {

    // 允许编辑
    return true
    }

    // 已经选择
    func tabBarController(tabBarController: UITabBarController, didSelectViewController viewController: UIViewController) {

    }

    // 将要开始编辑(超过5个时进行 edit 时触发)
    func tabBarController(tabBarController: UITabBarController, willBeginCustomizingViewControllers viewControllers: [UIViewController]) {

    }

    // 已经结束编辑
    func tabBarController(tabBarController: UITabBarController, willEndCustomizingViewControllers viewControllers: [UIViewController], changed: Bool) {

    }

    // 已经结束编辑
    func tabBarController(tabBarController: UITabBarController, didEndCustomizingViewControllers viewControllers: [UIViewController], changed: Bool) {

    }

4、Storyboard 中设置

4.1 在 Storyboard 场景中设置

TabBar

4.1.1 Tab Bar Item

Badge 未读消息标记
System Item tabBarItem 类型
Selected Image 选中时的图片,设置时无效,需在代码中设置
Title Position 标题的位置

4.1.2 Bar Item

Title tabBarItem 标题
Image 未选中时的图片
Tag tag 值
– Enable tabBarItem 是否允许点击

4.2 在 Storyboard 场景绑定的 Controller 中设置

  • 设置分栏选中时的文字颜色

    1
    2
    3
    4
    5
    6
    /*
    只需要设置一次,在所有的 item 中都会改变
    同时会改变未选中时的图片的颜色
    */

    self.tabBarController.tabBar.tintColor = [UIColor greenColor];
  • 设置分栏选中时的图片

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    /*
    每个 item 中都需要单独设置
    */

    // 在每个场景绑定的 ViewController 中单独设置

    self.tabBarItem.selectedImage = [[UIImage imageNamed:@"tabbar_mainframeHL"]
    imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

    // 在一个场景绑定的 ViewController 中全部设置

    UITabBarItem *item0 = [self.tabBarController.tabBar.items objectAtIndex:0];
    item0.selectedImage = [[UIImage imageNamed:@"tabbar_mainframeHL"]
    imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

    UITabBarItem *item1 = [self.tabBarController.tabBar.items objectAtIndex:1];
    item1.selectedImage = [[UIImage imageNamed:@"tabbar_contactsHL"]
    imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

    UITabBarItem *item2 = [self.tabBarController.tabBar.items objectAtIndex:2];
    item2.selectedImage = [[UIImage imageNamed:@"tabbar_discoverHL"]
    imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

    UITabBarItem *item3 = [self.tabBarController.tabBar.items objectAtIndex:3];
    item3.selectedImage = [[UIImage imageNamed:@"tabbar_meHL"]
    imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
文章目录
  1. 1. 前言
  2. 2. 1、tabBarController 的创建
  3. 3. 2、tabBarController 的设置
  4. 4. 3、UITabBarControllerDelegate 协议方法
  5. 5. 4、Storyboard 中设置
    1. 5.1. 4.1 在 Storyboard 场景中设置
      1. 5.1.1. 4.1.1 Tab Bar Item
      2. 5.1.2. 4.1.2 Bar Item
    2. 5.2. 4.2 在 Storyboard 场景绑定的 Controller 中设置
隐藏目录