國外的一些app總是引領著國內的潮流。snapchat上面的交互和動畫總是走在新穎時尚的前沿，整體框架交互順暢，動畫順滑自然，在對產品體驗更嚴苛的北美市場，依然深受年輕一代的喜愛。今天，我們來實現類似snapchat底部導航欄變魔術一樣的切換效果，至于動畫，因為太花時間，就不展開模仿，這里只實現snapchat切換方式。
如下動畫
snapchat_tablebar.gif
1.建立常規(guī)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
roller alloc] init];
[self presentViewController:cameraPageVC animated:YES completion:nil];
}
自定義table bar的實現，觀察snapchat的切換過程，會發(fā)現，一共三個普通頁面，從左至右為A，B，C。除了中間table bar，命名為Camera，其余地方的table bar只相應一次點擊，不會連續(xù)相應點擊事件，即第一次點擊A顯示A，第二次點擊A的時候還是選中該A頁控制器，不進行切換；點擊中間table bar的時候，第一次點擊之時，會切換到拍照頁面Camera的入口；如果連續(xù)點擊，第二次則進入拍照頁面Camera。如果切換到非中間table bar頁面，則中間table bar又會恢復至初始頁面。如下動畫過程：
tabbarswitch.gif
最后show you the code：
https://github.com/Bigjohn123/tabbarSwitch
