写在前面

本文将讲解实现类似爱奇艺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图,如果不会动请刷新)
https://img.wangquanwei.com/wp-content/uploads/2020/03/iyiqi_gif1.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图,如果不会动请刷新)
https://img.wangquanwei.com/wp-content/uploads/2020/03/iyiqi_gif2.gif

demo

https://github.com/quanweiwang/iQIYIDemo