阅读器多种翻页的设计与实现
- 2020 年 2 月 18 日
- 笔记
前言
前文介绍的是小说阅读器的设计和实现,本文作为补充对多种翻页模式做详细剖析。
正文
常见的阅读器翻页模式包括:平移、仿真、滑页和上下:
- 平移:左右滑动;

- 仿真:左右滑动;(纸质书翻页效果)

- 滑页:左右滑动;(覆盖效果)

- 上下:上下滑动;

1、平移
UIKit提供UIPageViewController可以很方便实现平移的页面切换效果,使用流程: 1、创建UIPageViewController;
self.pageVC = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options: @{ UIPageViewControllerOptionSpineLocationKey:@(UIPageViewControllerSpineLocationMin) }]; self.pageVC.delegate = self; self.pageVC.dataSource = self; [self addChildViewController:self.pageVC]; [self.view addSubview:self.pageVC.view];
2、初始化首个界面;
- (void)customInitFirstPage { UIViewController *vc = [self getRandomVCWithIndex:5]; [self.pageVC setViewControllers:@[vc] direction:UIPageViewControllerNavigationDirectionReverse animated:NO completion:^(BOOL finished) { }]; }
3、滑动时返回相邻的界面;
#pragma mark - UIPageViewControllerDelegate - (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController { UIViewController *ret; UIViewController *vc = viewController; if (vc) { NSInteger index = vc.view.tag; if (index > 0) { ret = [self getRandomVCWithIndex:index - 1]; } } return ret; } - (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController { UIViewController *ret; UIViewController *vc = viewController; if (vc) { NSInteger index = vc.view.tag; if (index < 10) { ret = [self getRandomVCWithIndex:index + 1]; } } return ret; }
2、仿真
相对安卓,iOS实现这个翻页效果非常方便——UIPageViewController同样支持这个翻页效果。 使用流程和平移类似,但多了一些注意事项:
-
initWithTransitionStyle:
由UIPageViewControllerTransitionStyleScroll
变为UIPageViewControllerTransitionStyleScroll
; - 支持翻页的时候,对背面做一个自定义展示,需要打开
self.pageVC.doubleSided = YES;
; - 初始化界面的时候和平移一样,但是在使用过程中再调用
-setViewControllers
时,如果animated的参数为YES,则需要手动传入两个vc,如下:
- (void)manualChangePage { UIViewController *vc = [self getRandomVCWithIndex:5]; NSArray *arr; if (self.pageVC.doubleSided) { BackViewController *backVC = [[BackViewController alloc] init]; [backVC updateWithViewController:vc]; backVC.view.tag = vc.view.tag; arr = @[vc, backVC]; } else { arr = @[vc]; } [self.pageVC setViewControllers:arr direction:UIPageViewControllerNavigationDirectionReverse animated:YES completion:^(BOOL finished) { }]; }
- 设置doubleSided为YES之后,每次翻页会调用两次
viewControllerAfterViewController
或viewControllerBeforeViewController
,需要特殊返回一个BackViewController
作为背面的VC:
- (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController { UIViewController *ret; UIViewController *vc = viewController; // 注意这里不是pageViewController.viewControllers if (vc) { NSInteger index = vc.view.tag; if (index > 0) { if ([vc isKindOfClass:BackViewController.class]) { ret = [self getRandomVCWithIndex:index - 1]; } else { BackViewController *backVC = [[BackViewController alloc] init]; [backVC updateWithViewController:vc]; backVC.view.tag = vc.view.tag; ret = backVC; } } } return ret; }
- 背面的VC可以添加自定义的view,但通常采用的做法是作为当前界面的镜像(用截图的方式):
- (UIImage *)captureView:(UIView *)view { if ([self checkNullRect:view]) { return nil; } CGRect rect = view.bounds; UIGraphicsBeginImageContextWithOptions(rect.size, YES, 0.0f); CGContextRef context = UIGraphicsGetCurrentContext(); CGAffineTransform transform = CGAffineTransformMake(-1.0, 0.0, 0.0, 1.0, rect.size.width, 0.0); CGContextConcatCTM(context,transform); [view.layer renderInContext:context]; UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return image; }
增加的-checkNullRect:
方法是避免iOS9可能出现的frame为CGRectNull的crash。
- (BOOL)checkNullRect:(UIView *)view { BOOL ret = CGRectIsNull(view.frame); for (UIView *subView in view.subviews) { ret = ret || [self checkNullRect:subView]; } return ret; }
3、滑页
滑页没有系统库支持,需要手动实现。 对前面两种翻页模式进行分析,我们可以发现一些共性,比如说以页(VC)为单位、实时获取界面VC和页面之间有先后顺序等。 分解UI层的实现,整个动画可以用以下流程来表示: 1、页面初始化,直接显示页面,监听用户pan手势; 2、用户pan手势开始,根据方向确定左滑还是右滑,获取新的VC; 3、处理用户左右滑动,视图跟随用户滑动; 4、用户pan手势结束,根据动画完成程度确定是补齐动画还是回退; 5、处理完动画相关,将状态重置为1,接受用户的pan手势;
如果还要支持tap手势,则自动完成一次动画效果,再将状态重置为status_show(只有在此状态才响应tap的手势)。

核心逻辑:
- pan手势开始时,记录点的位置:
CGPoint point = [rec translationInView:self.view]; static CGPoint startPoint; //手势开始 if (rec.state == UIGestureRecognizerStateBegan) { startPoint = point; }
- pan手势触发过程中,先确定方向,再获取对应的VC;然后根据左右滑动,分别改变位置(showVC对应不不动的VC,moveVC跟着pan手势移动):
//手势进行 if (rec.state == UIGestureRecognizerStateChanged) { if (self.currentStatus == SSReaderPageEffectViewStatusDefault) { // 用户开始移动,此时判断是左移还是右移 if (point.x >= startPoint.x) { // 右移 self.currentStatus = SSReaderPageEffectViewStatusMovingToLastPage; } else { self.currentStatus = SSReaderPageEffectViewStatusMovingToNextPage; } if (self.delegate) { if (self.currentStatus == SSReaderPageEffectViewStatusMovingToLastPage) { UIViewController *lastVC = [self.delegate slideViewControllerGetLastVC:self]; if (!lastVC) { [rec cancelCurrentGestureReccongizing]; self.currentStatus = SSReaderPageEffectViewStatusDefault; SSLOG_INFO(@"info, reach last end"); } else { [self addChildViewController:lastVC]; [self.view insertSubview:lastVC.view aboveSubview:self.showVC.view]; self.moveVC = lastVC; [self addMaskToVC:self.moveVC]; } } else if (self.currentStatus == SSReaderPageEffectViewStatusMovingToNextPage) { UIViewController *nextVC = [self.delegate slideViewControllerGetNextVC:self]; if (!nextVC) { [rec cancelCurrentGestureReccongizing]; self.currentStatus = SSReaderPageEffectViewStatusDefault; SSLOG_INFO(@"info, reach next end"); } else { [self addChildViewController:nextVC]; [self.view insertSubview:nextVC.view belowSubview:self.showVC.view]; self.moveVC = self.showVC; self.showVC = nextVC; [self addMaskToVC:self.moveVC]; } } if (self.currentStatus == SSReaderPageEffectViewStatusMovingToLastPage) { [self.delegate slideViewController:self willTransitionToViewControllers:self.moveVC]; } else if (self.currentStatus == SSReaderPageEffectViewStatusMovingToNextPage) { [self.delegate slideViewController:self willTransitionToViewControllers:self.showVC]; } } } if (self.currentStatus == SSReaderPageEffectViewStatusMovingToNextPage) { self.moveVC.view.right = self.view.width * (1 - rate); } else if (self.currentStatus == SSReaderPageEffectViewStatusMovingToLastPage) { self.moveVC.view.right = self.view.width * rate; } }
- pan手势结束时,根据动画完成程度决定是否完成该动作(用
animateWithDuration:
的动画block来完成);
注意事项: 滑页效果通常都需要添加一个阴影效果,可以对showVC进行处理:
- (void)addMaskToVC:(UIViewController *)vc { vc.view.layer.shadowColor = [UIColor colorWithRed:0/255.0 green:0/255.0 blue:0/255.0 alpha:0.8].CGColor; vc.view.layer.shadowOffset = CGSizeMake(5, 5); vc.view.layer.shadowOpacity = 0.8; vc.view.layer.shadowRadius = 6; }
在手势结束的时候,除了根据动画完成程度来判断是否完成该动作外,速度通常也会作为参考值:
CGPoint speed = [rec velocityInView:rec.view]; rate = (rate >= kCompleteRate || fabs(speed.x) > 200) ? 1 : 0; // 经验数值,多次尝试得出
另外一个问题是手势在进行到一半时如果APP切入后台,动画出现暂停的情况。这是因为pan手势在切后台时会自动cancel,所以需要在手势处理增加对cancel状态的处理。
4、上下滑动
上下滑动同样没有系统库支持,需要手动实现。 效果分解: 1、当用户滑动的过程,视图要跟随手指的移动; 2、当用户往上滑然后松开时,视图要带有加速度的往上滑动;(附加特性:在滑动过程中用户可以通过重复这个行为加速滑动) 3、在视图滑动的过程中,用户可以通过简单的tap操作停止交互;
用户的交互有3种touchBegin/touchMove/touchEnd,上述的三个效果实现如下: 1、监听touchMove,计算手指的移动距离,换算成view的移动; 2、touchEnd之后,根据pan手势的移动速度和原来的滑动速度,计算得到滑动的新初始速度; 3、touchBegin开始,讲当前速度重置为0;
上述的过程2的处理非常复杂,需要考虑原来的滑动速度,才能实现效果分解中的附加特性。 通常iOS实现滑动会有两大选择:UIScrollView和UITableView;(UICollectionView和UITableView类似) UIScrollView存在一个较大的局限:上面的视图资源无法回收利用,当添加的view过多的时候会占用内存; UITableView用cell重复利用
规避上面的局限,但是存在新的问题:当数据源(排版数据)变化时,需要频繁调用reloadData,造成性能瓶颈;同时reload会造成contentSize和contentOffset的改变,导致界面可能会出现闪烁,需要各类逻辑的特殊处理。
综上的分析,这里提供一个基于UIScrollView的方案,避免去手动计算速度,也可以及时回收内存,并且contentSize一直保持不变。 以下图为例,我们使得UIScrollView的contentSize为(view.width, 3*view.height),偏移contentOffsetY为view.height(初始状态相当于将窗口放置在中间):

B是我们创建的第一个vc,大小和UIScrollView的size一样大;当我们向下滑动时,我们创建vcA放在B的上面; 当我们上滑到vcA完全展示的时候,vcB已经滑动到屏幕外面(红色为窗口大小);此时我们回收vcB,然后将UIScrollView的Y偏移重新改为view.height,回到了初始化状态。 同理,我们可以处理向上滑动的情况。至此,我们可以不依赖UITableView完成无限视图的滚动,同时避免各类touch事件处理和加速度计算。

简单的实现效果
上图的实现过程非常简短:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { if (self.scrollView.contentOffset.y >= (self.scrollView.contentSize.height - self.height)) { UIView *firstView = [self.viewArr firstObject]; [self.viewArr removeObjectAtIndex:0]; firstView.top = self.scrollView.contentSize.height; [self.viewArr addObject:firstView]; for (UIView *view in self.viewArr) { view.top -= self.height; } [self.scrollView setContentOffset:CGPointMake(0, self.scrollView.contentOffset.y - self.height)]; } }
基于出延伸出来我们的整体流程图:

遇到的问题(Q&A): Q:如何实现UIScrollView改变offset,但是继承原来的速度? A: [self.scrollView setContentOffset:CGPointMake(0, self.view.height) animated:NO];
[self.scrollView setContentOffset:CGPointMake(0, self.view.height);
上面两个API均可以改变offset,但是-setContentOffset:animated:
会使得当前的速度重置为0,使得跨页时滑动不流畅;使用-setContentOffset:
可以解决这个问题,仅仅改变offset,并且继承原来的速度接着运动;
Q: -scrollViewDidScroll:
方法怎么会出现递归循环调用? A: 在通过-setContentOffset:
改变offset之后,仍会触发-scrollViewDidScroll:
的回调,如果在此回调又触发了offset的改变,则进入了递归调用的坑,从下图的堆栈可以看到:

解决办法是在设置偏移时,先把delegate取消,修改完成后再赋值回去:
- (void)safeSetContentOffsetY:(CGFloat)y { self.scrollView.delegate = nil; [self.scrollView setContentOffset:CGPointMake(self.scrollView.contentOffset.x, y) animated:NO]; self.scrollView.delegate = self; }
Q: 滑动到最后一页的时候,没有再往下的VC(返回的nextVC为nil),如果用户没有中断手势继续滑动,如何避免触发再次获取nextVC? A: 当滑动到最后一页的时候,此时没有nextVC,无法接着往下滑,但是因为手势还在,会频繁触发getNextVC的方法。对此可以新增手势取消的方法:
- (void)cancelCurrentGestureReccongizing { // disabled gesture recognizers will not receive touches. when changed to NO the gesture recognizer will be cancelled if it's currently recognizing a gesture self.enabled = NO; self.enabled = YES; }
Q:滑页效果,在进行到一半时切入后台,如何避免动画出现异常现象? A: 这是因为pan手势在切后台时会自动cancel,所以需要在手势处理增加对cancel状态的处理;
Q:如果初始化的时候,传进的VC.view不满一屏,该如何处理? A: 手动填充到满屏幕。
- (void)fullFillContent { CGFloat downFillY; if (self.viewControllers && self.viewControllers.count > 0) { UIViewController *vc = [self.viewControllers lastObject]; downFillY = vc.view.bottom; } else { downFillY = self.scrollView.contentOffset.y; } while (downFillY < windowMaxY) { if (!self.delegate) { NSLog(@"error, empty delegate"); break; } UIViewController *vc = [self.delegate scrollViewControllerGetNextVC:self]; if (!vc) { NSLog(@"info, reach next end"); break; } [self.vcArr addObject:vc]; [self addChildViewController:vc]; [self.scrollView addSubview:vc.view]; vc.view.top = downFillY; downFillY = vc.view.bottom; NSLog(@"info, add next vc, frame:%@", NSStringFromCGRect(vc.view.frame)); } }
总结
demo地址是在GitHub,包括四种翻页效果,其中的滑页和上下滑动都以参考UIPageViewController的接口做了调整,基本可以直接复制代码进行接入。 上下滑动的代码不多,但是经过多次尝试再有的定论,中间也换过多次方案,最终优化得到的结论就是demo中的做法。 阅读器的翻页模式多种多样,欢迎交流新的翻页模式或者其他实现方案。