iOS之仿抖音左右滑动效果

前言

最近公司要求实现抖音的左右滑动效果即：左滑显示个人详情页，右滑显示搜索页，通过对抖音的观察发现左滑应该是push了一个新的控制器，右滑则是UIScrollview的页面滑动（纯属个人猜测）。
由于以前本人写过一个导航控制器的库GKNavigationBarViewController,里面包含了左滑push功能，所以想要集成过来使用，但使用过程中发现了不少问题，所以也对库进行了更新，下面讲讲具体的实现过程吧。

实现

1、右滑功能实现

首先我们先创建一个根控制器GKDouyinHomeViewController，在根控制器上加入UIScrollview，将搜索控制器、播放控制器的view加入到UIScrollview中，然后默认显示播放器页，这样就实现了右滑显示搜索页的功能了。

    [self.view addSubview:self.scrollView];
    self.scrollView.frame = self.view.bounds;
    
    self.childVCs = @[self.searchVC, self.playerVC];
    
    CGFloat w = self.view.frame.size.width;
    CGFloat h = self.view.frame.size.height;
    
    [self.childVCs enumerateObjectsUsingBlock:^(UIViewController *vc, NSUInteger idx, BOOL * _Nonnull stop) {
        [self addChildViewController:vc];
        [self.scrollView addSubview:vc.view];
        
        vc.view.frame = CGRectMake(idx * w, 0, w, h);
    }];
    
    self.scrollView.contentSize = CGSizeMake(self.childVCs.count * w, 0);
    
    // 默认显示播放器页
    self.scrollView.contentOffset = CGPointMake(w, 0);

2、左滑功能实现

首先在根控制器设置左滑push的代理，并实现对应的方法

    // 设置左滑push代理
    self.gk_pushDelegate = self;

     // 实现代理方法
    #pragma mark - GKViewControllerPushDelegate
    - (void)pushToNextViewController {
          GKDouyinPersonalViewController *personalVC = [GKDouyinPersonalViewController new];
          [self.navigationController pushViewController:personalVC animated:YES];
    }

在创建导航控制器的时候，开启左滑push功能

    GKDouyinHomeViewController *douyinVC = [GKDouyinHomeViewController new];
        
    // 设置导航控制器并开启左滑push
    UINavigationController *nav = [UINavigationController rootVC:douyinVC translationScale:NO];
    nav.gk_openScrollLeftPush = YES;
        
    [self presentViewController:nav animated:YES completion:nil];

然后运行，发现并没有起作用。最后又想到根控制器有UIScrollview，而UIScrollview中也有左右滑动手势，可能是UIScrollview与左滑push手势冲突导致的滑动失败，通过各种实验最后找到了下面的解决办法。

3、自定义UIScrollview

通过继承UIScrollview，然后在手势的代理方法中，在固定位置禁止UIScrollview的滑动手势，主要代码如下

    // 临界点：scrollView滑动到最后一屏时的x轴位置，可根据需求改变
    CGFloat criticalPoint = [UIScreen mainScreen].bounds.size.width;
            
    // point.x < 0 代表左滑即手指从屏幕右边向左移动
    // 当UIScrollview滑动到临界点时，则不再相应UIScrollview的滑动左滑手势，防止与左滑手势冲突
    if (point.x < 0 && self.contentOffset.x == criticalPoint) {
        return YES;
        }
     }

这里只贴出了主要的代码，具体内容可从demo中找到。

效果图

通过上面的过程，我们实现了仿抖音的左右滑动效果，下面我们看看效果图

抖音左右滑动

效果图中的图片来自抖音截图。

最后

以上就是实现抖音左右滑动的全过程，如果觉得不错，还请来个star!
具体的demo在GKNavigationBarViewController里面，有需要的可自行下载查看。