iOS仿格瓦拉 轮播图 Parallax Rolling Banner
作者：yuan
前言
在绝大多数的APP中，产品经理都会要求有一个轮播图来展示重要的图片与信息。而大多数的轮播图都是比较僵硬的Side By Side的滑动动画。如何让这一个枯燥的UI组件变得有趣，并且有丝滑般的感觉呢？我想滚动视差会是一个不错的选择。
如果你经常使用格瓦拉，我想你也许就会注意到，格瓦拉的首页就有着这么一个有意思的视差滚动视图。让我们来尝试实现它吧。
思考与观察
在滑动scrollView时，仔细观察，你会发现在这个视差里面包含了两组动画
- 每当你向右滑动时，中间视图会跟随你的手指一起向右移动，但中间视图里面的图片则会朝左边的方向移动。 你向左滑动是则相反。
- 每当你向右滑动时，中间视图会跟随你的手指一起向右滑动，而左边的视图却朝向相反的方向移动。你向左滑动是则相反，右边的视图却朝向相反的方向移动
这时，我想你就应该想到，它并不是像大多数的滚动试图一样。不是使用N(你需要显示的图片数)+2个视图扑在UIScrollView上来实现, 而是使用了4个主要的视图:
@property (nonatomic, strong)UIView * midContainter;
@property (nonatomic, strong)UIImageView * midImage;
@property (nonatomic, strong)UIImageView * leftImage;
@property (nonatomic, strong)UIImageView * rightImage;
其中，midImage是加载在midContainer上的，以产生第一组动画。而midContainer、leftImage、rightImage这三个视图有着不同的，层次之间的图层关系，中间图层midContainer总是处于另外两个图层的上方，同时三个图层的在ScrollView中的位置些许的重叠， 这里我们使用一个portion来统一标识重叠的比例
//中间视图与它的图片
_midContainter.frame = CGRectMake(self.bounds.size.width, 0, self.bounds.size.width, self.bounds.size.height);
_midContainter.clipsToBounds = YES;//超出bounds rect的视图讲不会显示
[self addSubview:_midContainter];
_midImage.frame = self.midContainter.bounds;
[self.midContainter addSubview:_midImage];
//左侧视图
_leftImage.frame = CGRectMake(self.bounds.size.width * (1- self.portion), 0, 0, self.bounds.size.width, self.bounds.size.height);
[self insertSubview:self.leftImage belowSubview:self.midContainter];
//右侧视图
_rightImage.frame = CGRectMake(self.bounds.size.width * (1 + self.portion), 0, self.bounds.size.width, self.bounds.size.height);
[self insertSubview:self.rightImage belowSubview:self.midContainter];
格瓦拉的实际视图结构:
初始化设置
知道我们需要哪些Views，下面就是对一我们的ScrollView和它的视图进行初始化的设置了：
//初始化设置
- (void)setup{
self.contentSize = CGSizeMake(self.bounds.size.width*3, 0);
self.contentOffset = CGPointMake(self.bounds.size.width, 0);
self.portion = 0.6f;
self.pagingEnabled = NO;
self.showsVerticalScrollIndicator = NO;
self.showsHorizontalScrollIndicator = NO;
self.bounces = NO;
self.layer.masksToBounds = YES;
}
//根据currentIndex重置srollView为最开始状态。
- (void)resetSubViews {
self.midImage.image = self.sourceArr[self.pageControl.currentPage];
self.midImage.tag = self.pageControl.currentPage;
self.midImage.frame = self.midContainter.bounds;
NSInteger leftIndex = self.pageControl.currentPage - 1;
if (leftIndex < 0) {
leftIndex = self.sourceArr.count - 1;
}
self.leftImage.image = self.sourceArr[leftIndex];
self.leftImage.tag = leftIndex;
self.leftImage.frame = CGRectMake(self.bounds.size.width * (1- self.portion), 0, 0, self.bounds.size.width, self.bounds.size.height);
NSInteger rightIndex = self.pageControl.currentPage + 1;
if (rightIndex >= self.sourceArr.count) {
rightIndex = 0;
}
self.rightImage.image = self.sourceArr[rightIndex];
self.rightImage.tag = rightIndex;
self.rightImage.frame = CGRectMake(self.bounds.size.width * (1 + self.portion), 0, self.bounds.size.width, self.bounds.size.height);
[self bringSubviewToFront:self.midContainter];
[self sendSubviewToBack:self.leftImage];
[self sendSubviewToBack:self.rightImage];
[self setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO];
self.currentIndex = self.pageControl.currentPage;
}
实现
此外，为了能让这个视图循环滚动，我们还需要监听滚动时UIScrollView的contentOffset.x。在监听过程中，我们可以根据self.portion来调整每个视图的移动速度，以此来达到一个滚动视差的效果
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat moveX = scrollView.contentOffset.x - self.bounds.size.width;
[self adjsutSubViews:moveX];
if (fabs(moveX) >= self.bounds.size.width && fabs(self.lastMoveX) < self.bounds.size.width) {
[self completedHandler];
}
self.lastMoveX = moveX;
}
- (void)adjustSubViews:(CGFloat)moveX{
[self move:self.midImage from:0 byX:moveX * (1 - self.portion)];
[self move:self.leftImage from:self.bounds.size.width * (1- self.portion) byX:moveX * (1- self.portion)];
[self move:self.rightImage from:self.bounds.size.width * (1 + self.portion) byX:(moveX) * (1 - self.portion)];
}
#pragma mark - tools
- (void)move:(UIView *)view from:(CGFloat)start byX:(CGFloat)x {
CGRect frame = view.frame;
frame.origin.x = x + start;
view.frame = frame;
}
这几行代码的意义：
- 记录
scrollview相对于初始位置的移动距离moveX - 使
leftimage与rightImage移动的速率与滑动距离moveX保持一个差值。 - 使
midImage与他的父视图midContainer的移动速率保持不一致。注意我们这里移动的是midContainer里的图片而不是midContainer - 如果当前的
moveX已经已经是一张图片的宽度时，调起completedHandler() - 记录本次的
moveX距离到lastMoveX里，以方便下一次使用。
由于RunLoop的缘故，
ScrollView代理对contentoffset记录的会非常不精确。scrollViewDidScroll()可能会重复调用completedHandler()。这里记录lastMoveX是因为我们想确保：当moveX大于一张图片宽度时，completedHandler()只被调起一次。当lastMoveX已经大于一张图片宽度时，说明completedHandler()已被调用，不需要再重复调用。
在completedHandler()里面，我们需要做的是每当一张新图片被完整显示在屏幕上时，不管他是letfImage还是rightImage,我们需要把这张图片重新赋值到midContainer的midImage上面，并根据这个图片的index计算出新的leftImage与rightImage。同时欺骗用户,调用resetSubViews(),把scrollView的offset重新设置为初始值(显示中间视图)：
//重新计算letimage, midImage,rightImage的index
- (void)completedHandler{
CGFloat moveX = self.contentOffset.x - self.bounds.size.width;
if (fabs(moveX) >= self.bounds.size.width) {
if (moveX > 0 && self.pageControl.currentPage + 1 < self.sourceArr.count) {
self.pageControl.currentPage++;
} else if (moveX >0 && self.pageControl.currentPage +1 == self.sourceArr.count) {
self.pageControl.currentPage = 0;
} else if (self.pageControl.currentPage >= 1){
self.pageControl.currentPage--;
} else if (self.pageControl.currentPage == 0 && moveX < 0) {
self.pageControl.currentPage = self.sourceArr.count - 1;
}
[self resetSubViews];
}
}
做完这些，在设置ScrollView的pagingEnabled属性为YES
self.pagingEnabled = YES;
就可以大致完成一个简单的视差滚动视图了。看一下效果：
完整的代码可以在这里下载。
但是这是你会发现，当你滑动你的视图时，视差滚动视图并没有像格瓦拉那样有如丝般顺滑的感觉。格瓦拉到底做了什么呢，你可以不妨思考一下？下一篇，将优化滑动动画，带来如丝般的顺滑感觉
