前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS-可交互滑动的TabBarController

iOS-可交互滑动的TabBarController

作者头像
用户2215591
发布2018-06-29 14:58:01
1.7K0
发布2018-06-29 14:58:01
举报
文章被收录于专栏:iOSer成长记录

1.先看一下效果

左右滑动交互的TabBarController

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

代码语言:javascript
复制
/** 
 *  实现该代理,即可以实现自定义的各界面切换时的动画(如平推,缩放,淡入淡出等)
 *  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手势
代码语言:javascript
复制
- (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手势的实现
代码语言:javascript
复制
- (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];
        }
    }];
}
  • 代理的实现
代码语言:javascript
复制
- (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>协议,需要实现下面方法
代码语言:javascript
复制
// 返回动画执行时间
- (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,就可以轻松实现,该类主要有以下方法
代码语言:javascript
复制
// 动画时间
@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;
代码语言:javascript
复制
// 本例中的实现
- (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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016.07.29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档