写在前面
本文将讲解实现类似爱奇艺iOS客户端泡泡UI的几种实现以及几种实现可能出现的坑。
爱奇艺iOS客户端首页底部有5个按钮UITabBar实现，最右边一个是泡泡按钮，点击泡泡按钮将会push到一个带有UITabBar的界面(第一次见到这种设计)。
截止本文发表时爱奇艺iOS客户端版本为V9.10.0，已经改了泡泡界面，不再是push到一个带有UITabBar的界面。
前置条件
1、实现UITabBarControllerDelegate
@interface IQIYITabBarController ()
@end
@implementation IQIYITabBarController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.delegate = self;
}
@end
2、实现 -tabBarController:shouldSelectViewController:方法
- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController{
}
第一种实现 使用模态视图
使用模态视图并修改模态视图的弹出动画为push的形式
- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController {
//4是泡泡页面
if ([viewController isEqual:[tabBarController.viewControllers objectAtIndex:4]]) {
SecondTabBarController * vc = [[SecondTabBarController alloc] init];
CATransition * ansition = [CATransition animation];
[ansition setDuration:0.25f];
[ansition setType:kCATransitionMoveIn];
[ansition setSubtype:kCATransitionFromRight];
[[UIApplication sharedApplication].keyWindow.layer addAnimation:ansition forKey:nil];
[self presentViewController:vc animated:NO completion:nil];
return NO;
}
return YES;
}
模态视图的返回
详情见文末的demo
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor groupTableViewBackgroundColor];
UIBarButtonItem * leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"返回" style:(UIBarButtonItemStyleDone) target:self action:@selector(back)];
self.navigationItem.leftBarButtonItem = leftBarButtonItem;
}
- (void)back {
CATransition * ansition = [CATransition animation];
[ansition setDuration:0.25f];
[ansition setType:kCATransitionMoveIn];
[ansition setSubtype:kCATransitionFromLeft];
[[UIApplication sharedApplication].keyWindow.layer addAnimation:ansition forKey:nil];
[self dismissViewControllerAnimated:NO completion:nil];
}
效果如下图(gif图，如果不会动请刷新)
弊端
gif图可能看的不是很清楚。
弊端就是在push 或者 pop动画执行时会看到黑影闪过，如果要求不高的可以使用这个。
为了解决这个问题，我们引出第二种实现方案
第二种实现 使用UINavigationController push的形式
导航栏push的方式
还是先实现前置条件里的代码
接着实现以下代码
- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController {
//4是泡泡页面
if ([viewController isEqual:[tabBarController.viewControllers objectAtIndex:4]]) {
SecondTabBarController * vc = [[SecondTabBarController alloc] init];
vc.hidesBottomBarWhenPushed = YES;
UINavigationController * nav = tabBarController.viewControllers[tabBarController.selectedIndex];
[nav pushViewController:vc animated:YES];
return NO;
}
return YES;
}
注意事项
要在第二个TabBar里隐藏掉最外层的导航栏，否则将可能出现2个导航栏的效果
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[self.navigationController setNavigationBarHidden:YES animated:animated];
}
- (void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated];
[self.navigationController setNavigationBarHidden:NO animated:animated];
}
一定要使用 -setNavigationBarHidden:animated: 这个方法来显示隐藏导航栏，并且动画效果不要写YES或者NO要用animated，否则将会出现导航栏黑边闪一下或者手势时出现黑边的情况。
效果如下图(gif图，如果不会动请刷新)
