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 条评论
登录 后参与评论

相关文章

来自专栏Youngxj

Canvas画板

3784
来自专栏Alan's Lab

iOS block-base 动画简单用法+关键帧动画设置线性变化速度的问题

iOS的各种动画相漂亮,相信这是吸引很多人买iPhone的原因之一。不仅如此,这还是吸引我做iOS开发的一大原因,因为在iOS上给界面实现一些像样的动画实在是太...

2142
来自专栏進无尽的文章

实践 -实现一款中间凸起的TabBar

这是看到一篇文章后感觉很有意思于是就把自己的效果改了改实现了一下,文末有原文链接。

1892
来自专栏iOS进阶开发

iOS开发UI篇--iOS动画(Core Animation)总结

IOS 动画主要是指Core Animation框架。官方使用文档地址为:Core Animation Guide。 Core Animation是IOS和OS...

1230
来自专栏一“技”之长

iOS头部渐变的表格视图设计 原

        今天再来给大家带来一个开发中常用到的视图控制器,在很多应用中,可能都会遇到这样的一个需求:表视图控制器最上方有一个头图控件,当表格视图滑动在顶部...

1362
来自专栏Android干货园

Android源码解析--Material Design之水波纹点击效果RippleEffect使用

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/48...

4282
来自专栏ShaoYL

iOS-UI控件之UIButton

3116
来自专栏一“技”之长

iOS开发CoreAnimation解读之二——对CALayer的分析

        每一个UIView的对象中都有一个layer这样的属性,并且layer会负责view中有关图形绘制的相关操作,例如我们设置view的背景颜色和设...

802
来自专栏落影的专栏

直播APP常用动画效果

介绍 记录、总结开发遇到一些问题,大家一起交流学习。 这次带来,对直播APP的常用动画总结。 直播Live 效果展示 下面是一个很多平台都有的入门豪华礼物动...

5778
来自专栏DannyHoo的专栏

iOS开发中创建一个纵向滑动控件

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

861

扫码关注云+社区

领取腾讯云代金券