iOS - UITabBarController

前言

	NS_CLASS_AVAILABLE_IOS(2_0) @interface UITabBarController : UIViewController <UITabBarDelegate, NSCoding>
	@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

  • 创建分栏视图控制器

    	UITabBarController *tabBarController = [[UITabBarController alloc] init];
    
      	// 将 tabBarController 添加到 viewController 上
    	[self addChildViewController:tabBarController];
    	[self.view addSubview:tabBarController.view];
    
       	// 将 navigationController 做为 window 的根视图控制器
    	self.window.rootViewController = tabBarController;
    

  • 设置分栏视图控制器包含的视图控制器

    	// 实例化视图控制器对象（或者 导航视图控制器对象）
    	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;
    

  • 设置分栏显示的标题和图片

    	// 设置显示的 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]];
    	}
    

  • 设置分栏标题文字颜色

    	// 选中时颜色，默认为蓝色
    	tabBarController.tabBar.tintColor = [UIColor greenColor];
    

• Swift

  • 创建分栏视图控制器

    	let tabBarController = UITabBarController()
    
    	// 将 tabBarController 添加到 viewController 上
    	self.addChildViewController(tabBarController)
    	self.view.addSubview(tabBarController.view)
    
    	// 将 navigationController 做为 window 的根视图控制器
    	self.window?.rootViewController = tabBarController
    

  • 设置分栏视图控制器包含的视图控制器

    	// 实例化视图控制器对象（或者 导航视图控制器对象）
    	let viewController1 = ViewController11()
    	let viewController2 = ViewController12()
    	let viewController3 = ViewController13()
    	let viewController4 = ViewController14()
    
    	let viewControllerArray:Array = [viewController1, viewController2,
                                     viewController3, viewController4]
    
    	// 向分栏视图控制器中添加视图控制器
    	tabBarController.viewControllers = viewControllerArray
    

  • 设置分栏显示的标题和图片

    	// 设置显示的 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))
    	}
    

  • 设置分栏标题文字颜色

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

2、tabBarController 的设置

• Objective-C

  	// 设置首先显示的视图控制器
  
  		// 视图的添加顺序已知
  		/*
  			用添加顺序的标号指定
  		*/
      	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

  	// 设置首先显示的视图控制器
  
  		// 视图的添加顺序已知
  		/*
  			用添加顺序的标号指定
  		*/
      	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

  	// 将要选择的某个 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

  	// 将要选择的某个 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 中设置

• 在 Storyboard 场景中设置

  

  • Tab Bar Item

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

  • Bar Item

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

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

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

    	/*
    		只需要设置一次，在所有的 item 中都会改变
    		同时会改变未选中时的图片的颜色
    	*/
    
    	self.tabBarController.tabBar.tintColor = [UIColor greenColor];
    

  • 设置分栏选中时的图片

    	/*
    		每个 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];