UIScrollView视差滑动轮播图

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;
}

这几行代码的意义：

1. 记录scrollview 相对于初始位置的移动距离moveX
2. 使leftimage 与 rightImage移动的速率与滑动距离moveX保持一个差值。
3. 使midImage与他的父视图midContainer的移动速率保持不一致。注意我们这里移动的是midContainer里的图片而不是midContainer
4. 如果当前的moveX已经已经是一张图片的宽度时，调起completedHandler()
5. 记录本次的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;

就可以大致完成一个简单的视差滚动视图了。看一下效果：

完整的代码可以在这里下载。

但是这是你会发现，当你滑动你的视图时，视差滚动视图并没有像格瓦拉那样有如丝般顺滑的感觉。格瓦拉到底做了什么呢，你可以不妨思考一下？下一篇，将优化滑动动画，带来如丝般的顺滑感觉