对于一个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,里面有对导航栏和页面样式的配置,在之前一篇已经说过translucent
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。