本文简单介绍 iOS 中
UITabBarController的使用方式。
UITabBarController 对象可以保存一组视图控制器，让用户轻松地在各个视图控制器上自由切换。此外 UITabBarController 对象还会在屏幕底部显示一个标签栏（tab bar），标签栏会有多个标签项（tab item），分别对应 UITabBarController 对象中所保存的每一个视图控制器。单击某个标签项，UITabBarController 对象就会显示该标签项所对应的视图控制器的视图。
下方的标签栏称为 UITabBar，如果 UITabBarController 有 4 个子控制器，那么 UITabBar 内部就会有 4 个 UITabBarButton 作为子控件与之对应。
图自
子控制器数量最多不得超过 5 个，即 UITabBarItem 数量小于等于 5。
示例一
通过代码方式创建 UITabBarController，在 UITabBarController 控件上放两个视图控制器。
Demo 预览
| 第一页 | 第二页 |
|---|---|
|
|
说明：
- 点击 TabBar 底部的 Home 按钮，显示第一个视图控制器；
- 点击 TabBar 底部的 Second 按钮，显示第二个视图控制器。
文档组织结构
实现步骤
- 新建两个父类为 UIViewController 的带 xib 的视图控制器，FirstViewController 和 SecondViewController，为方便标识，我们在每个视图控制器的 xib 页面上添加了一个 Label 标签。
- 修改 SceneDelegate.m 文件，创建
UITabBarController对象，将初始化好的视图控制器传入数组。
#import "SceneDelegate.h"
// Controllers
#import "FirstViewController.h"
#import "SecondViewController.h"
@interface SceneDelegate ()
// 添加选项卡控制器属性，用来展示组合并展示创建的两个视图控制器
@property (strong, nonatomic) UITabBarController *tabBarController;
@end
@implementation SceneDelegate
- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
// 创建 Window
self.window = [[UIWindow alloc] initWithWindowScene:(UIWindowScene *)scene];
self.window.backgroundColor = [UIColor purpleColor];
// 实例化视图控制器对象
FirstViewController *firstViewController = [[FirstViewController alloc] init];
SecondViewController *secondViewController = [[SecondViewController alloc] init];
// 初始化选项卡视图控制器
self.tabBarController = [[UITabBarController alloc] init];
// 将两个视图控制器以数组的式指定给选项卡视图控制器
// 使应用能够在两个视图控制器的对象之间自由的切换
NSArray *array = [NSArray arrayWithObjects:firstViewController,secondViewController, nil];
self.tabBarController.viewControllers = array;
// 设置选项卡视图控制器为当前窗口的根视图控制器
self.window.rootViewController = self.tabBarController;
// 设置 Window 为主窗口并显示
[self.window makeKeyAndVisible];
}
注：在 Xcode 11 之前，自定义 UIWindow 相关的代码是在 AppDelegate 中处理的，在 iOS 13 中，所有 UI 生命周期由 SceneDelegate 负责处理，详情可见：WWDC 2019: Optimizing App Launch
除了与以前版本一样，要删除 Main storyboard file base name 之外，还要在项目 Info.plist 中，删除 SceneDelegate 的 StoryboardName。
- 设置每个视图控制器标签的标题和图标。
分别在每个视图控制器的 .m 文件中覆写视图控制器的指定初始化方法。
FirstViewController.m 文件：
- (instancetype)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// 设置 tabBar 图标和字体
self.tabBarItem.title = @"Home";
self.tabBarItem.image = [UIImage imageNamed:@"home_normal"];
self.tabBarItem.selectedImage = [UIImage imageNamed:@"home_selected"];
}
return self;
}
SecondViewController.m 文件：
- (instancetype)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// 设置 tabBar 图标和字体
self.tabBarItem.title = @"Second";
self.tabBarItem.image = [UIImage imageNamed:@"second_normal"];
self.tabBarItem.selectedImage = [UIImage imageNamed:@"second_selected"];
}
return self;
}
示例二：自定义 UITabBarController 子类对象
另一种设置方式是创建一个 UITabBarController 子类对象，所有子视图的标签项在该子类文件中设置。
TabBarController 和各 ViewController 之间可以通过 StoryBoard 的方式连接。
Demo 预览
代码实现
- (instancetype)init {
self = [super init];
if (self) {
// 设置背景颜色和大小
self.view.backgroundColor = COLOR_BACKGROUND;
self.view.frame = CGRectMake(0, 0, kScreenWidth, kScreenHeight);
[self setViewControllers];
}
return self;
}
/*
* 视图堆栈结构：
* UITabBarController - UINavigationController - UIViewController （首页）
* - UINavigationController - UIViewController （资讯）
* - UINavigationController - UIViewController （我的）
*
*/
- (void)setViewControllers {
// 首页 TabBar
UIViewController *mainViewController = [self renderTabBarItem:[[HQLMainViewController alloc] init] title:@"首页" imageNamed:@"tab_home_normal" selectedImageNamed:@"tab_home_selected"];
HQLNavigationController *mainNavigationController = [[HQLNavigationController alloc] initWithRootViewController:mainViewController];
// 资讯 TabBar
UIViewController *secondViewController = [self renderTabBarItem:[[HQLSecondViewController alloc] init] title:@"资讯" imageNamed:@"tab_news_normal" selectedImageNamed:@"tab_news_selected"];
HQLNavigationController *secondNavigationController = [[HQLNavigationController alloc] initWithRootViewController:secondViewController];
// 我的 Tabbar
UIViewController *thirdViewController = [self renderTabBarItem:[[HQLThirdViewController alloc] initWithStyle:UITableViewStyleGrouped] title:@"我的" imageNamed:@"tab_mine_normal" selectedImageNamed:@"tab_mine_selected"];
HQLNavigationController *thirdNavigationController = [[HQLNavigationController alloc] initWithRootViewController:thirdViewController];
self.viewControllers = @[mainNavigationController,secondNavigationController,thirdNavigationController];
}
- (UIViewController *)renderTabBarItem:(UIViewController *)viewController
title:(NSString *)title
imageNamed:(NSString *)normalImgName
selectedImageNamed:(NSString *)selectedImgName {
// 设置导航栏的标题为 TabBar 标题
viewController.title = title;
// 设置导航栏 TabBar
UIImage *normalImage = [[UIImage imageNamed:normalImgName] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *selectedImage = [[UIImage imageNamed:selectedImgName] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
viewController.tabBarItem = [[UITabBarItem alloc] initWithTitle:title image:normalImage selectedImage:selectedImage];
// 设置导航栏被选中时的字体
[viewController.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName: COLOR_THEME}
forState:UIControlStateSelected];
return viewController;
}
其他
去掉TabBar上部的黑色线条
// 去掉TabBar上部的黑色线条,设置TabBar透明背景
[[UITabBar appearance] setBackgroundImage:[UIImage imageWithColor:[UIColor clearColor]]];
[[UITabBar appearance] setShadowImage:[UIImage new]];
UIView *topLineView = [[UIView alloc] init];
topLineView.frame = CGRectMake(0, 0, CGRectGetWidth(self.tabBar.bounds), 1);
topLineView.backgroundColor = [UIColor colorWithWhite:0.966 alpha:1.000];
[self.tabBar addSubview:topLineView];