国外的一些 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
来源: http://www.jianshu.com/p/773eb31e5dd6