iOS仿格瓦拉 輪播圖 Parallax Rolling Banner
作者：yuan

前言

在絕大多數(shù)的APP中，產(chǎn)品經(jīng)理都會(huì)要求有一個(gè)輪播圖來展示重要的圖片與信息。而大多數(shù)的輪播圖都是比較僵硬的Side By Side的滑動(dòng)動(dòng)畫。如何讓這一個(gè)枯燥的UI組件變得有趣，并且有絲滑般的感覺呢？我想滾動(dòng)視差會(huì)是一個(gè)不錯(cuò)的選擇。

如果你經(jīng)常使用格瓦拉，我想你也許就會(huì)注意到，格瓦拉的首頁就有著這么一個(gè)有意思的視差滾動(dòng)視圖。讓我們來嘗試實(shí)現(xiàn)它吧。

思考與觀察

在滑動(dòng)scrollView時(shí)，仔細(xì)觀察，你會(huì)發(fā)現(xiàn)在這個(gè)視差里面包含了兩組動(dòng)畫

• 每當(dāng)你向右滑動(dòng)時(shí)，中間視圖會(huì)跟隨你的手指一起向右移動(dòng)，但中間視圖里面的圖片則會(huì)朝左邊的方向移動(dòng)。 你向左滑動(dòng)是則相反。
• 每當(dāng)你向右滑動(dòng)時(shí)，中間視圖會(huì)跟隨你的手指一起向右滑動(dòng)，而左邊的視圖卻朝向相反的方向移動(dòng)。你向左滑動(dòng)是則相反，右邊的視圖卻朝向相反的方向移動(dòng)

這時(shí)，我想你就應(yīng)該想到，它并不是像大多數(shù)的滾動(dòng)試圖一樣。不是使用N(你需要顯示的圖片數(shù))+2個(gè)視圖撲在UIScrollView上來實(shí)現(xiàn), 而是使用了4個(gè)主要的視圖:

@property (nonatomic, strong)UIView      * midContainter;
@property (nonatomic, strong)UIImageView * midImage;
@property (nonatomic, strong)UIImageView * leftImage;
@property (nonatomic, strong)UIImageView * rightImage;

其中，midImage是加載在midContainer上的，以產(chǎn)生第一組動(dòng)畫。而midContainer、leftImage、rightImage這三個(gè)視圖有著不同的，層次之間的圖層關(guān)系，中間圖層midContainer總是處于另外兩個(gè)圖層的上方，同時(shí)三個(gè)圖層的在ScrollView中的位置些許的重疊， 這里我們使用一個(gè)portion來統(tǒng)一標(biāo)識(shí)重疊的比例

//中間視圖與它的圖片
_midContainter.frame = CGRectMake(self.bounds.size.width, 0, self.bounds.size.width, self.bounds.size.height);
_midContainter.clipsToBounds = YES;//超出bounds rect的視圖講不會(huì)顯示
[self addSubview:_midContainter];

_midImage.frame = self.midContainter.bounds;
[self.midContainter addSubview:_midImage];

//左側(cè)視圖
_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];

//右側(cè)視圖
_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];

格瓦拉的實(shí)際視圖結(jié)構(gòu):

初始化設(shè)置

知道我們需要哪些Views，下面就是對一我們的ScrollView和它的視圖進(jìn)行初始化的設(shè)置了：

//初始化設(shè)置
- (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;
}

//根據(jù)currentIndex重置srollView為最開始狀態(tài)。
- (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;
}

實(shí)現(xiàn)

此外，為了能讓這個(gè)視圖循環(huán)滾動(dòng)，我們還需要監(jiān)聽滾動(dòng)時(shí)UIScrollView的contentOffset.x。在監(jiān)聽過程中，我們可以根據(jù)self.portion來調(diào)整每個(gè)視圖的移動(dòng)速度，以此來達(dá)到一個(gè)滾動(dòng)視差的效果

- (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 相對于初始位置的移動(dòng)距離moveX
2. 使leftimage 與 rightImage移動(dòng)的速率與滑動(dòng)距離moveX保持一個(gè)差值。
3. 使midImage與他的父視圖midContainer的移動(dòng)速率保持不一致。注意我們這里移動(dòng)的是midContainer里的圖片而不是midContainer
4. 如果當(dāng)前的moveX已經(jīng)已經(jīng)是一張圖片的寬度時(shí)，調(diào)起completedHandler()
5. 記錄本次的moveX距離到lastMoveX里，以方便下一次使用。

由于RunLoop的緣故，ScrollView代理對contentoffset記錄的會(huì)非常不精確。scrollViewDidScroll()可能會(huì)重復(fù)調(diào)用completedHandler()。這里記錄lastMoveX是因?yàn)槲覀兿氪_保：當(dāng)moveX大于一張圖片寬度時(shí)，completedHandler()只被調(diào)起一次。當(dāng)lastMoveX已經(jīng)大于一張圖片寬度時(shí)，說明completedHandler()已被調(diào)用，不需要再重復(fù)調(diào)用。

在completedHandler()里面，我們需要做的是每當(dāng)一張新圖片被完整顯示在屏幕上時(shí)，不管他是letfImage還是rightImage,我們需要把這張圖片重新賦值到midContainer的midImage上面，并根據(jù)這個(gè)圖片的index計(jì)算出新的leftImage與rightImage。同時(shí)欺騙用戶,調(diào)用resetSubViews(),把scrollView的offset重新設(shè)置為初始值(顯示中間視圖)：

//重新計(jì)算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];
    }
}

做完這些，在設(shè)置ScrollView的pagingEnabled屬性為YES

    self.pagingEnabled = YES;

就可以大致完成一個(gè)簡單的視差滾動(dòng)視圖了?？匆幌滦Ч?/p>

完整的代碼可以在這里下載。

但是這是你會(huì)發(fā)現(xiàn)，當(dāng)你滑動(dòng)你的視圖時(shí)，視差滾動(dòng)視圖并沒有像格瓦拉那樣有如絲般順滑的感覺。格瓦拉到底做了什么呢，你可以不妨思考一下？下一篇，將優(yōu)化滑動(dòng)動(dòng)畫，帶來如絲般的順滑感覺