前言
最近公司要求实现抖音的左右滑动效果即：左滑显示个人详情页，右滑显示搜索页，通过对抖音的观察发现左滑应该是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里面，有需要的可自行下载查看。
网友评论