IOS app中有兩個UITabBarController,即在第一個頁面有4個按鈕,進入子頁面底部也有幾個按鈕。對於一個app中有兩個TabBar,大部分 認為該UI不夠友好,也不符合蘋果的人機交互。
我們先看下效果圖

事實上我們有兩種解決方案
1.在子頁面底部的tabbar我們可以用按鈕代替,跟之前博客說在導航欄上UISegmentedControl,切換顯示不同的VC,
2、在app中添加2個tabbar。
方案1,在此不再贅述,可參考之前的那片博客,直接看下方案2
1)、新建一個VC繼承UITabBarController,然後在該VC中初始化tabbar
/*
初始化Tabbar
*/
- (void)initTabBar{
HomeOneViewController *h1 = [[HomeOneViewController alloc] init];
HomeTwoViewController *h2 = [[HomeTwoViewController alloc] init];
HomeThreeViewController *h3 = [[HomeThreeViewController alloc] init];
HomeFourViewController *h4 = [[HomeFourViewController alloc] init];
NSArray *rootArray = [NSArray arrayWithObjects:h1,h2,h3,h4, nil];
NSArray *nameArray = [NSArray arrayWithObjects:@"首頁",@"簽到",@"日報",@"我的", nil];
h1.title = nameArray[0];
h2.title = nameArray[1];
h3.title = nameArray[2];
h4.title = nameArray[3];
NSMutableArray *vcArray = [NSMutableArray array];
for (int index = 0; index < rootArray.count; index++) {
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:rootArray[index]];
//tabBar未選中的image
UIImage *normalImg = [[UIImage imageNamed:[NSString stringWithFormat:@"tabBar%d_no.png",index + 1]] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
//tabBar已選中的image
UIImage *selectImg = [[UIImage imageNamed:[NSString stringWithFormat:@"tabBar%d_yes.png",index+1]] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
//設置tabBar顯示的文字
nav.tabBarItem = [[UITabBarItem alloc] initWithTitle:nameArray[index] image:normalImg selectedImage:selectImg];
nav.tabBarItem.tag = index +1;
nav.tabBarItem.title = nameArray[index];
[vcArray addObject:nav];
}
//tabbar未選中時文字的顏色,字體大小
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor lightGrayColor],NSForegroundColorAttributeName,[UIFont systemFontOfSize:14.0],NSFontAttributeName, nil] forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:RColor,NSForegroundColorAttributeName,[UIFont systemFontOfSize:14.0],NSFontAttributeName, nil] forState:UIControlStateSelected];
self.viewControllers = vcArray;
self.view.backgroundColor = [UIColor whiteColor];
}
2)、我們在HomeOneViewController中的cell點擊事件中添加如下代碼,即進入第二個tabbar
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
flag = 0;
OneSubViewController *ycf = [[OneSubViewController alloc] init];
ycf.hidesBottomBarWhenPushed=YES;// 進入後隱藏tabbar
[self.navigationController pushViewController:ycf animated:YES];
}
3)、OneSubViewController就是第二個tabbar,也是繼承自UITabBarController,裡面初始化tabbar 方式一樣。代碼不再貼了
然後運行代碼後就會發現一個問題SubOneViewController和SubTwoViewController有兩個導航條,因為在第一個tabbar有導航條,第二個tabbar也有。看下上面的代碼中有flag,看下作用,就是是否需要隱藏第一個tabbar的navigationController,在進入第二個tabbar是需要隱藏,
- (void)viewWillAppear:(BOOL)animated{
[super viewWillAppear:animated];
self.navigationController.navigationBar.hidden= NO;
}
- (void)viewWillDisappear:(BOOL)animated{
[super viewWillDisappear:animated];
if (flag==0) {
self.navigationController.navigationBar.hidden= YES;
}
}
4)、現在看下返回按鈕的事件,一搬的子頁面回到父VC,直接
[self.navigationController popViewControllerAnimated:YES];
但是在第二個tabbar回到上個tabbar,該如何回去呢,如下方式才能回去
[self.tabBarController.navigationController popViewControllerAnimated:YES];
需要注意的是我這邊的子VC都繼承了一個BaseViewController,裡面有對導航欄和頁面樣式的配置。
self.navigationController.navigationBar.translucent = NO;//1、導航欄不模糊,2、view的高度從導航欄底部開始
self.edgesForExtendedLayout = UIRectEdgeNone;//指定邊緣要延伸的方向,它的默認值很自然地是UIRectEdgeAll,四周邊緣均延伸,就是說,如果即使視圖中上有navigationBar,下有tabBar,那麼視圖仍會延伸覆蓋到四周的區域。將屬性設置為UIRectEdgeNone 被上面兩個屬性坑死了
self.extendedLayoutIncludesOpaqueBars = NO;
self.modalPresentationCapturesStatusBarAppearance = NO;
寫這個demo時,我沒有設置self.edgesForExtendedLayout,默認值時UIRectEdgeAll,底部tabor會遮擋子VC的底部49高度。僅此謹記!!!
對於這個2個tabbar還有中實現方式,在AppDelegate中,先初始化2個tabbar,默認rootViewControoler = 第一個tabbar。在點擊cell跳轉到第二個tabbar時,再將rootViewControoler=第二個tabbar,從第二個tabbar回到第一個tabbar時,也是重新設置rootViewControoler。