经常使用美团团购电影票，看到海报切换动画挺好玩的。就想着开始仿写一下
image
分页的实现
网上查找UIScrollView分页实现，有类代码是这样的:
根据偏移量计算出pageIndex，然后设置偏移量切换到那一页
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
NSLog(@"scrollViewDidScroll");
float pageWidth = CGRectGetWidth(scrollView.frame);
NSInteger pageIndex = floor((scrollView.contentOffset.x - pageWidth/2)/pageWidth)+1;
scrollView.contentOffset = CGPointMake(pageIndex*pageWidth, 0);
}
这种也可以实现效果，但有个问题就是每一次的偏移量需要超过pageWidth的一半时才会切换到下一个页面，影响用户体验。
好的做法是直接设置pagingEnabled = YES;不用在delegate methods中作任何其他处理。轻扫、拖拽都可以出发响应。
我们看这个动效会发现PageWidth小于CGRectGetWidth(scrollView.frame)，所以需要解决的第一个问题是如何实现小于UIScrollview宽度的翻页切换效果:
设置UIScrollview的宽度为pageWidth, pagingEnable = YES。这样就可以实现分页
效果。frame区域外无法响应触摸事件，只需利用runtime扩大scrollview的响应区域即可。
美团滑动cell是用UICollectionView实现的，这里为了方便简单的用UIScrollview实现：
UIScrollview中加载6个UILabel作为"cell",宽度为60，cell间的间距space=10，则每一页的宽度为70。UIScrollView在storyboard中水平居中，宽度为70.
storyboard布局如下：
image
利用runtime重写hittest方扩大uiscrollview的相应区域代码如下
#import "UIScrollView+LargeArea.h"
#import <objc/runtime.h>
static NSString *const topNameKey = @"topNameKey";
static NSString *const leftNameKey = @"leftNameKey";
static NSString *const bottomNameKey = @"bottomNameKey";
static NSString *const rightNameKey = @"rightNameKey";
static NSString *const nextResponser = @"nextResponser";
@implementation UIScrollView (LargeArea)
- (void)setEnlargeEdgeWithTop:(CGFloat)top left:(CGFloat)left bottom:(CGFloat)bottom right:(CGFloat)right {
objc_setAssociatedObject(self, &topNameKey, [NSNumber numberWithFloat:top], OBJC_ASSOCIATION_COPY_NONATOMIC);
objc_setAssociatedObject(self, &leftNameKey, [NSNumber numberWithFloat:left], OBJC_ASSOCIATION_COPY_NONATOMIC);
objc_setAssociatedObject(self, &bottomNameKey, [NSNumber numberWithFloat:bottom], OBJC_ASSOCIATION_COPY_NONATOMIC);
objc_setAssociatedObject(self, &rightNameKey, [NSNumber numberWithFloat:right], OBJC_ASSOCIATION_COPY_NONATOMIC);
}
- (CGRect) enlargedRect
{
NSNumber* topEdge = objc_getAssociatedObject(self, &topNameKey);
NSNumber* rightEdge = objc_getAssociatedObject(self, &rightNameKey);
NSNumber* bottomEdge = objc_getAssociatedObject(self, &bottomNameKey);
NSNumber* leftEdge = objc_getAssociatedObject(self, &leftNameKey);
if (topEdge && rightEdge && bottomEdge && leftEdge)
{
return CGRectMake(self.bounds.origin.x - leftEdge.floatValue,
self.bounds.origin.y - topEdge.floatValue,
self.bounds.size.width + leftEdge.floatValue + rightEdge.floatValue,
self.bounds.size.height + topEdge.floatValue + bottomEdge.floatValue);
}
else
{
return self.bounds;
}
}
//优于pointInside:withEvent方法
- (UIView*)hitTest:(CGPoint)point withEvent:(UIEvent*)event
{
CGRect rect = [self enlargedRect];
if (CGRectEqualToRect(rect, self.bounds))
{
return [super hitTest:point withEvent:event];
}
UIView *nextView = objc_getAssociatedObject(self, &nextResponser);
if (nextView) {
return CGRectContainsPoint(rect, point) ? self : nextView;
} else {
return CGRectContainsPoint(rect, point) ? self : nil;
}
}
我们只需要在工程中作如下设置就实现了分页宽度小于scrollview宽度的效果：
#import "ViewController.h"
#import "UIScrollView+LargeArea.h"
#define cellPageWidth 60
#define space 10
#define ScrollViewEnlargeLeftSpace ( CGRectGetWidth([UIScreen mainScreen].bounds)/2 - cellPageWidth/2 )
#define ScrollViewEnlargeRightSpace ( CGRectGetWidth([UIScreen mainScreen].bounds)/2 - (cellPageWidth/2+space) )
@interface ViewController () <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *myScroolView;
@property (strong, nonatomic) IBOutletCollection(UILabel) NSArray *contentLabels;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.pageCount = self.contentLabels.count;
self.customPageWidth = space + cellPageWidth;
// Do any additional setup after loading the view, typically from a nib.
[self.myScroolView setEnlargeEdgeWithTop:0 left:ScrollViewEnlargeLeftSpace bottom:0 right:ScrollViewEnlargeRightSpace];
self.myScroolView.layer.masksToBounds = NO;
self.myScroolView.pagingEnabled = YES;
self.myScroolView.delegate = self;
}
@end
滑动时跟随的放大缩小效果实现
仔细观察动画效果，我们会发现同时进行动画的最多只有两个cell,每次当两个cell的spac的中线越过屏幕中线时当前pageIndex切换。分析过程如下：
image
代码处理过程如下：
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
NSInteger index = floor((scrollView.contentOffset.x - self.customPageWidth/2)/self.customPageWidth)+1;
double currentOffX = scrollView.contentOffset.x;
double DIF = (currentOffX - index *self.customPageWidth);
if (currentOffX > self.lastScollPosition) {
if (DIF >= 0 && DIF <=35) {
UILabel *labelA;
if (-1< index < self.pageCount) {
labelA = self.contentLabels[index];
} else {
labelA = nil;
}
labelA.transform = CGAffineTransformMakeScale(1, (150- 50.0*fabs(DIF)/self.customPageWidth)/100.0);
UILabel *labelB;
if (index+1 >= self.pageCount) {
labelB = nil;
} else {
labelB = self.contentLabels[index+1];
}
labelB.transform = CGAffineTransformMakeScale(1, (100 + 50*fabs(DIF)/self.customPageWidth )/100.0);
}
if (-35<= DIF && DIF <0) {
UILabel *labelA;
if (-1< index && index < self.pageCount) {
labelA = self.contentLabels[index];
} else {
labelA = nil;
}
labelA.transform = CGAffineTransformMakeScale(1, (150- 50.0*fabs(DIF)/self.customPageWidth)/100.0);
UILabel *labelC;
if (index-1 < 0) {
labelC = nil;
} else {
labelC = self.contentLabels[index-1];
}
labelC.transform = CGAffineTransformMakeScale(1, (100 + 50*fabs(DIF)/self.customPageWidth )/100.0);
}
} else {
if (DIF <0 && DIF >=-35) {
UILabel *labelA;
if (-1< index && index < self.pageCount) {
labelA = self.contentLabels[index];
} else {
labelA = nil;
}
labelA.transform = CGAffineTransformMakeScale(1, (150- 50.0*fabs(DIF)/self.customPageWidth)/100.0);
UILabel *labelC;
if (index-1 < 0) {
labelC = nil;
} else {
labelC = self.contentLabels[index-1];
}
labelC.transform = CGAffineTransformMakeScale(1, (100 + 50*fabs(DIF)/self.customPageWidth )/100.0);
} else if (DIF >= 0 && DIF <= 35) {
UILabel *labelA;
if (-1< index && index < self.pageCount) {
labelA = self.contentLabels[index];
} else {
labelA = nil;
}
labelA.transform = CGAffineTransformMakeScale(1, (150- 50.0*fabs(DIF)/self.customPageWidth)/100.0);
UILabel *labelB;
if (index+1 >= self.pageCount) {
labelB = nil;
} else {
labelB = self.contentLabels[index+1];
}
labelB.transform = CGAffineTransformMakeScale(1, (100 + 50*fabs(DIF)/self.customPageWidth )/100.0);
}
}
}
//注意offset<0及offset>contensize.width时继续drag时的临界处理
基本效果实现了但是在scrollview上轻扫时会有些cell的高度高度异常，拖动时不会有这个问题。后续解决吧，大家知道怎么处理的评论里指点下哈。先谢谢了
Demo地址
2017年2月6日追加
以上方式有局限性，由于UIColleciotionView的复用机制超出显示区域的Cell是不会被创建的无法显示超出frame的cell，故此方法不适用于UIcollectionview。
更通用的做法是设置pagingEnable属性为NO，同时在
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {}
方法中改变targetContentOffset偏移量即可。
具体参考这篇文章自定义UICollectionView横向滑动分页功能
网友评论