snapchat tablebar切换方式实现

国外的一些app总是引领着国内的潮流。snapchat上面的交互和动画总是走在新颖时尚的前沿，整体框架交互顺畅，动画顺滑自然，在对产品体验更严苛的北美市场，依然深受年轻一代的喜爱。今天，我们来实现类似snapchat底部导航栏变魔术一样的切换效果，至于动画，因为太花时间，就不展开模仿，这里只实现snapchat切换方式。
如下动画

snapchat_tablebar.gif

1.建立常规maintable bar的数组。将三个主页面的控制器丢进去，先实现普通的table bar切换。代码如下：

- (void)initViewControllers {
    FirstPageViewController *firstVC = [[FirstPageViewController alloc] init];
    SecondPageViewController  *secondVC = [[SecondPageViewController alloc] init];
    ThirdPageViewController  *thirdVC = [[ThirdPageViewController alloc] init];
    CameraPageViewController *cameraVC = [[CameraPageViewController alloc] init];
    NSArray *viewControllers = @[firstVC, secondVC, thirdVC];
    NSMutableArray *arrayM = [NSMutableArray arrayWithCapacity:viewControllers.count];
    _mainRootViewControllers = [NSMutableArray arrayWithCapacity:viewControllers.count];
    
    for (int i = 0; i < viewControllers.count; i++) {
        UIViewController *baseVC = viewControllers[i];
        
        [_mainRootViewControllers addObject:baseVC];
        
        [arrayM addObject:baseVC];
    }

    self.viewControllers = arrayM;
    
    //默认进入 around 页面
    self.selectedIndex = PdMainPageIndexAround;
}

自定义的tabble bar，选中的时候需要根据被选中的index做UI切换：

- (void)setSelectedIndex:(NSUInteger)selectedIndex {
    [_customMainTabBar configSelectIndex:selectedIndex];
    
    [super setSelectedIndex:selectedIndex];
}

进入类似snapchat相机拍照页面的时候，会present出相机页面。

#pragma mark - 进入相机拍照页面
- (void)mainTabBarAroundBtnDidClicked:(PdMainTabBar *)mainTabBar {
    CameraPageViewController *cameraPageVC = [[CameraPageViewCont![tablebar.gif](https://upload-images.jianshu.io/upload_images/3613568-e7ffa2f555276f15.gif?imageMogr2/auto-orient/strip)
roller alloc] init];
    [self presentViewController:cameraPageVC animated:YES completion:nil];
}

自定义table bar的实现，观察snapchat的切换过程，会发现，一共三个普通页面，从左至右为A，B，C。除了中间table bar，命名为Camera，其余地方的table bar只相应一次点击，不会连续相应点击事件，即第一次点击A显示A，第二次点击A的时候还是选中该A页控制器，不进行切换；点击中间table bar的时候，第一次点击之时，会切换到拍照页面Camera的入口；如果连续点击，第二次则进入拍照页面Camera。如果切换到非中间table bar页面，则中间table bar又会恢复至初始页面。如下动画过程：

tabbarswitch.gif

最后show you the code：
https://github.com/Bigjohn123/tabbarSwitch