iOS UITabBarController基本使用
阿新 • • 發佈:2020-06-24
底部TabBar可以說每個App的標配了,大部分一個Tab就是App的一個模組的功能首頁。在Android中,底部TabBar一般用RadioGroup和RadioButton來自定義,就是單選組和單選按鈕。而iOS上則提供了UITabBarController。Android上的TabBar切換一般為Fragment,而iOS上的TabBar切換是切換ViewController。
Android直觀感覺就是給你一堆控制元件,你自己自由發揮,而iOS則是封裝好了給你讓你直接用,還把建議給你,按照他來做就好了。
UITabBarController建立和基本配置
UITabBarController就是多個ViewController的容器,他們之間的層級是平行的,它會在底部新增一個TabBar的UIView,通過點選TabBar上的按鈕tabBarItem來切換對應的ViewController。
- UITabBarController一般配合UINavigationController來使用,這樣可以實現多Tab,多棧跳轉頁面檢視。
分為4步走:
- 建立Tab所屬的ViewController。
- 建立一個陣列,將控制器放到陣列中。
- 建立UITabBarController,將控制器陣列設定給它。
- 將UITabBarController設定為Window的rootViewController。
- 顯示Window。
@interface AppDelegate ()
@end
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
self.window = [[UIWindow alloc] initWithFrame:UIScreen.mainScreen.bounds];
//1.建立Tab所屬的ViewController
//首頁
HomeViewController *homeVC = [[HomeViewController alloc] init];
UINavigationController *homeNav = [[UINavigationController alloc] initWithRootViewController:homeVC];
homeNav.navigationBar.translucent = NO;
//工作
WorkViewController *workVC = [[WorkViewController alloc] init];
UINavigationController *workNav = [[UINavigationController alloc] initWithRootViewController:workVC];
workNav.navigationBar.translucent = NO;
//通知
NoticeViewController *noticeVC = [[NoticeViewController alloc] init];
UINavigationController *noticeNav = [[UINavigationController alloc] initWithRootViewController:noticeVC];
noticeNav.navigationBar.translucent = NO;
//我的
MineViewController *mineVC = [[MineViewController alloc] init];
UINavigationController *mineNav = [[UINavigationController alloc] initWithRootViewController:mineVC];
mineNav.navigationBar.translucent = NO;
//2、建立一個陣列,放置多有控制器
NSArray *vcArray = [NSArray arrayWithObjects:homeNav,workNav,noticeNav,mineNav,nil];
//3、建立UITabBarController,將控制器陣列設定給UITabBarController
UITabBarController *tabBarVC = [[UITabBarController alloc] init];
//設定多個Tab的ViewController到TabBarViewController
tabBarVC.viewControllers = vcArray;
//4、將UITabBarController設定為Window的RootViewController
self.window.rootViewController = tabBarVC;
//顯示Window
[self.window makeKeyAndVisible];
return YES;
}
@end
複製程式碼
TabBar樣式和紅點氣泡
經過上面的設定,3個Tab的ViewController能顯示也能切換。但是TabBar上沒有控制元件顯示,TabBar的控制元件通過UITabBarItem來設定,每個ViewController都有一個self.tabBarItem屬性,通過設定一個屬性來設定TabBar上的Tab。下面演示的方法都在ViewContoller中使用。
- 以Tab文字和非選中、選中圖片來建立Tab,按鈕的UIImage預設會受TabBar的tintColor屬性影響而著色,一般希望不跟隨tintColor屬性,會使用imageWithRenderingMode設定UIImageRenderingModeAlwaysOriginal來保持圖片原有的顏色。
//根據標題、非選中圖片、選中圖片來構建一個Tab
UITabBarItem *tabItem = [[UITabBarItem alloc] initWithTitle:@"首頁" image:[[UIImage imageNamed:@"home_icon_home_normal"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] selectedImage:[[UIImage imageNamed:@"home_icon_home_selected"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
//設定Tab
self.tabBarItem = tabItem;
複製程式碼
- 以系統圖示風格來構建一個Tab
UITabBarItem* tabItem = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemFavorites tag:1];
//設定Tab
self.tabBarItem = tabItem;
複製程式碼
- 設定未讀紅點
//設定未讀數量字串
tabItem.badgeValue = @"99+";
複製程式碼
TabBar風格
- 設定TabBar是否透明,預設為透明
tabBarVC.tabBar.translucent = NO;
複製程式碼
- 設定TabBar的顏色
tabBarVC.tabBar.barTintColor = [UIColor redColor];
複製程式碼
- 設定TabBar的風格顏色,會將圖片和文字都設定,除非圖片設定了imageWithRenderingMode為UIImageRenderingModeAlwaysOriginal。
tabBarVC.tabBar.tintColor = [UIColor redColor];
複製程式碼
UITabBarController的Api和代理方法
- 設定預設選擇控制器的索引
//選中第三個Tab
tabBarVC.selectedIndex = 2;
複製程式碼
- 獲取當前選中的Tab的索引
NSUInteger curSelectIndex = tabBarVC.selectedIndex;
NSLog(@"當前選中的Tab角標:%lu",curSelectIndex);
複製程式碼
- 獲取當前選中的Tab的ViewController
UIViewController *curSelectVC = tabBarVC.selectedViewController;
複製程式碼
- 設定UITabBarController代理
//1.遵循協議UITabBarControllerDelegate
@interface AppDelegate : UIResponder <UIApplicationDelegate,UITabBarControllerDelegate>
@end
//2.設定代理
tabBarVC.delegate = self;
/**
* 當選中控制器時回撥
*/
- (void) tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {
//選中的ViewController例項
UIViewController *selectVC = tabBarController.selectedViewController;
NSLog(@"選中的index: %zd, 選中的ViewController: %@",tabBarController.selectedIndex,selectVC);
}
複製程式碼