iOS-可交互滑动的TabBarController

1.先看一下效果

左右滑动交互的TabBarController

2.在iOS7.0以前,要实现这样的效果,只有自定义TabBar了,但这很麻烦。而在iOS7.0以后,苹果在UITabBarControllerDelegate中增加了下面两个代理方法:

/** 
 *  实现该代理,即可以实现自定义的各界面切换时的动画(如平推,缩放,淡入淡出等)
 *  fromVC:当前显示的VC
 *  toVC:将要切换到的VC
 *  返回一个自定义的切换动画,在本例中,我自定义了一个平推效果的动画
 */
- (nullable id <UIViewControllerAnimatedTransitioning>)tabBarController:(UITabBarController *)tabBarController
            animationControllerForTransitionFromViewController:(UIViewController *)fromVC
                                              toViewController:(UIViewController *)toVC  NS_AVAILABLE_IOS(7_0);

/**
 *  实现该代理,即可以实现与动画的交互
 *  tabBarController:当前的tabBarController
 *  animationController:动画百分比控制器
 *  返回一个自定义的动画百分比控制器,以控制当前动画进行的百分比。
 */
- (nullable id <UIViewControllerInteractiveTransitioning>)tabBarController:(UITabBarController *)tabBarController
                      interactionControllerForAnimationController: (id <UIViewControllerAnimatedTransitioning>)animationController NS_AVAILABLE_IOS(7_0);

3.下面是实现过程

  • 首先需要一个TabBarController,在本例中,我写了两个MainViewController(点击item切换时,也用自定义动画)、MainTabBarViewController(点击item是没有动画),可以在AppDelegate中选则使用哪一个。
  • 在TabBarController中,添加一个pan手势
- (void)viewDidLoad {
    [super viewDidLoad];
    self.delegate = self;
    self.selectedIndex = 0;

    // 添加pan手势
    _panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panGestureRecognizer:)];
    [self.view addGestureRecognizer:self.panGestureRecognizer];

    // 添加TabBar子控制器
    壹ViewController *vc1 = [[壹ViewController alloc]init];
    贰ViewController *vc2 = [[贰ViewController alloc]init];
    叁ViewController *vc3 = [[叁ViewController alloc]init];
    肆ViewController *vc4 = [[肆ViewController alloc]init];
    伍ViewController *vc5 = [[伍ViewController alloc]init];
    self.viewControllers = @[vc1,vc2,vc3,vc4,vc5];

    for (int i = 0; i < self.tabBar.items.count; i ++) {
        NSDictionary *dic = @{NSForegroundColorAttributeName: [UIColor colorWithRed:0.451 green:0.553 blue:0.584 alpha:1.00]};
        NSDictionary *selecteddic = @{NSForegroundColorAttributeName: [UIColor colorWithRed:0.384 green:0.808 blue:0.663 alpha:1.00]};

        UITabBarItem *item = [self.tabBar.items objectAtIndex:i];
        [item setTitleTextAttributes:dic forState:UIControlStateNormal];
        [item setTitleTextAttributes:selecteddic forState:UIControlStateSelected];
        
        switch (i) {
            case 0:
                item.title = @"壹";
                break;
            case 1:
                item.title = @"贰";
                break;
            case 2:
                item.title = @"叁";
                break;
            case 3:
                item.title = @"肆";
                break;
            case 4:
                item.title = @"伍";
                break;
            default:
                break;
        }
    }
}
  • pan手势的实现
- (void)panGestureRecognizer:(UIPanGestureRecognizer *)pan{
    // 如果没有动画控制器,则不执行动画,动画控制器就是用来展示切换动画
    if (self.transitionCoordinator) {
        return;
    }
    
    // 开始执行动画
    if (pan.state == UIGestureRecognizerStateBegan || pan.state == UIGestureRecognizerStateChanged){
        [self beginInteractiveTransitionIfPossible:pan];
    }
}

- (void)beginInteractiveTransitionIfPossible:(UIPanGestureRecognizer *)sender{
    // 通过滑动的方法判断应该像那边跳转
    CGPoint translation = [sender translationInView:self.view];
    if (translation.x > 0.f && self.selectedIndex > 0) {
        self.selectedIndex --;
    } 
    else if (translation.x < 0.f && self.selectedIndex + 1 < self.viewControllers.count) {
        self.selectedIndex ++;
    } 
    else {
        if (!CGPointEqualToPoint(translation, CGPointZero)) {
            sender.enabled = NO;
            sender.enabled = YES;
        }
    }
    
    // 告知动画控制器,开始执行动画,这里需要注意:苹果提供了两个方法,但是我们只有选择这个方法,并且只有这样写才能按我们的预期执行,否则会有BUG,这一点我也不知道原因
    [self.transitionCoordinator animateAlongsideTransitionInView:self.view animation:^(id<UIViewControllerTransitionCoordinatorContext>  _Nonnull context) {
        
    } completion:^(id<UIViewControllerTransitionCoordinatorContext>  _Nonnull context) {
        if ([context isCancelled] && sender.state == UIGestureRecognizerStateChanged){
            [self beginInteractiveTransitionIfPossible:sender];
        }
    }];
}
  • 代理的实现
- (id<UIViewControllerAnimatedTransitioning>)tabBarController:(UITabBarController *)tabBarController animationControllerForTransitionFromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC{
    // 判断是否是通过手势
    if (self.panGestureRecognizer.state == UIGestureRecognizerStateBegan || self.panGestureRecognizer.state == UIGestureRecognizerStateChanged) {
        // 判断跳转的方向
        NSArray *viewControllers = tabBarController.viewControllers;
        if ([viewControllers indexOfObject:toVC] > [viewControllers indexOfObject:fromVC]) {
            // 返回的自定义动画
            return [[TabBarTransitionAnimation alloc] initWithTargetEdge:UIRectEdgeLeft];
        } 
        else {
            return [[TabBarTransitionAnimation alloc] initWithTargetEdge:UIRectEdgeRight];
        }
    }
    else{
        // 返回空,表示用系统的动画
        return nil;
    }
}

- (id<UIViewControllerInteractiveTransitioning>)tabBarController:(UITabBarController *)tabBarController interactionControllerForAnimationController:(id<UIViewControllerAnimatedTransitioning>)animationController{
    if (self.panGestureRecognizer.state == UIGestureRecognizerStateBegan || self.panGestureRecognizer.state == UIGestureRecognizerStateChanged) {
        // 返回自定义的动画百分比控制器
        return [[TabBarTransitionController alloc] initWithGestureRecognizer:self.panGestureRecognizer];
    } 
    else {
        // 返回空,表示用系统的
        return nil;
    }
}
  • 自定义平推的动画,自定义动画需要遵守<UIViewControllerAnimatedTransitioning>协议,需要实现下面方法
// 返回动画执行时间
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext{
    return 0.35;
}

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
    // 获取执行动画的ViewController
    UIViewController *fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    
    // 获取执行动画的View,注意:该方式只有iOS8.0才有,如果要适配iOS8.0以前,请用fromViewController.view获取
    UIView *fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
    UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];
    
    // 获取执行动画前,两个view的初始frame
    CGRect fromFrame = [transitionContext initialFrameForViewController:fromViewController];
    CGRect toFrame = [transitionContext finalFrameForViewController:toViewController];
   
    // 执行动画前frame的偏移向量
    CGVector offset;
    if (self.targetEdge == UIRectEdgeLeft){
        offset = CGVectorMake(-1.f, 0.f);
    }
    else if (self.targetEdge == UIRectEdgeRight){
        offset = CGVectorMake(1.f, 0.f);
    }
    else{
        NSAssert(NO, @"targetEdge must be one of UIRectEdgeLeft, or UIRectEdgeRight.");
    }
        
    fromView.frame = fromFrame;
    toView.frame = CGRectOffset(toFrame, 
                                toFrame.size.width * offset.dx * -1,
                                toFrame.size.height * offset.dy * -1);
    
    // 将toView添加到动画控制器中
    [transitionContext.containerView addSubview:toView];
    NSTimeInterval transitionDuration = [self transitionDuration:transitionContext];
    // 开始执行动画
    [UIView animateWithDuration:transitionDuration animations:^{
        fromView.frame = CGRectOffset(fromFrame, 
                                      fromFrame.size.width * offset.dx,
                                      fromFrame.size.height * offset.dy);
        toView.frame = toFrame;
    } completion:^(BOOL finished) {
        // 动画执行完成
        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
    }];
}
  • 自定义动画百分比控制器,这个苹果一个给我们定义好了一个类,我们只需要继承UIPercentDrivenInteractiveTransition,就可以轻松实现,该类主要有以下方法
// 动画时间
@property (readonly) CGFloat duration;
// 动画完成的百分比
@property (readonly) CGFloat percentComplete;
// 完成的速度
@property (nonatomic,assign) CGFloat completionSpeed;
// 动画的加速度 
@property (nonatomic,assign) UIViewAnimationCurve completionCurve;

// 通过该方法来告知当前动画完成的百分比
- (void)updateInteractiveTransition:(CGFloat)percentComplete;
// 取消动画
- (void)cancelInteractiveTransition;
// 完成动画
- (void)finishInteractiveTransition;
// 本例中的实现
- (CGFloat)percentForGesture:(UIPanGestureRecognizer *)gesture{
    // 通过手势在屏幕中滑动的距离来判断当前执行的百分比
    UIView *transitionContainerView = self.transitionContext.containerView;
    CGPoint translation = [gesture translationInView:gesture.view.superview];
    if ((translation.x > 0.f && self.initialTranslationInContainerView.x < 0.f) ||
        (translation.x < 0.f && self.initialTranslationInContainerView.x > 0.f)){
        return -1.f;
    }
    return fabs(translation.x)/CGRectGetWidth(transitionContainerView.bounds);
}

// 这个手势是TabBar中传递过来的
- (void)gestureRecognizeDidUpdate:(UIScreenEdgePanGestureRecognizer *)gestureRecognizer{
    switch (gestureRecognizer.state) {
        case UIGestureRecognizerStateBegan:
            break;
        case UIGestureRecognizerStateChanged:
            if ([self percentForGesture:gestureRecognizer] < 0.f) {
                [self cancelInteractiveTransition];
                [self.gestureRecognizer removeTarget:self action:@selector(gestureRecognizeDidUpdate:)];
            } 
            else {
                // 更新当前动画进度
                [self updateInteractiveTransition:[self percentForGesture:gestureRecognizer]];
            }
            break;
        case UIGestureRecognizerStateEnded:
            if ([self percentForGesture:gestureRecognizer] >= 0.4f){
                // 结束手势,动画执行大于40%时,完成动画
                [self finishInteractiveTransition];
            }
            else{
                // 否则取消动画
                [self cancelInteractiveTransition];
            }
            break;
        default:
            [self cancelInteractiveTransition];
            break;
    }
}

4.最后附上Demo的下载地址:https://github.com/cdcyd/CommonControlsCollection

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吴老师移动开发

【iOS开发】iOS 动画详解

在移动开发中,为了提高用户体验,会用到一些动画来提高应用的视觉效果。让人有眼前一亮的感觉。同时有动画的过渡过程,会让应用看起来不是那么的生硬,更吸引用户。

856
来自专栏iOS Developer

Bison教你1分钟集成3D无限翻转的Banner

931
来自专栏一“技”之长

iOS开发UINavigation系列四——导航控制器UINavigationController

        在前面的博客中,我么你介绍了UINavigationBar,UINavigationItem和UIToolBar,UINavigationCon...

792
来自专栏向治洪

React Native之ScrollView控件详解

概述 ScrollView在Android和ios原生开发中都比较常见,是一个 滚动视图控件。在RN开发中,系统也给我们提供了这么一个控件。不过在RN开发中 ,...

3697
来自专栏图像识别与深度学习

《Android》Lesson21-广播+SharedPreferences

1785
来自专栏DannyHoo的专栏

iOS中的转场动画

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1022
来自专栏胡力的专栏

高斯模糊效果的几种实现方案及性能对比

现在越来越多的 app 在背景图中使用高斯模糊效果,如 yahoo 天气,效果做得很炫。 我们5.2个性资料卡的标签模版也需要使用高斯模糊,这里就用一个 dem...

1.3K0
来自专栏androidBlog

RecycleView下拉刷新控件的封装(包括下拉刷新和加载更多 )

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

491
来自专栏進无尽的文章

UI篇-关于单个页面屏幕旋转要注意的问题

有时候,我们会需要在整个项目中,使某一个ViewController支持屏幕旋转,而其他的ViewController并不能自动旋转。这是一个很常见的需求,下面...

1202
来自专栏何俊林

一款开源Android在线音乐播放器

本文是wangchenyan同学的一个毕业设计作品,对于想研究音乐播放器的同学,特别是歌词自定义滚动部分。如下:支持自动滚动,超长歌词自动换行,自定义属性。 ?...

5589

扫码关注云+社区