iOS 無限輪播圖的兩種實現

標籤：

首先說一下實現的思想：

1. 用UIScrollView實現，在scrollView上添加3個UIImageView，分別用來顯示上一張圖片，當前顯示的圖片，下一張圖片。scrollView在不滑動的時候永遠顯示當前圖片（第二張圖片）即contentOffset ＝ CGPointMake(scrollViewW,0)，在滑動的時候可以預覽部分上一張圖片或下一張圖片。現在以向左滑動為例，因為已經設定好三張圖片，我們向左滑動可以看到下一張圖片的一部分（此時螢幕顯示著部分當前圖片和部分下一張圖片）。如果完成了向左滑動，在UIScrollView的代理方法 scrollViewDidEndDecelerating:裡 將三個UIImageView上顯示的圖片更換（下標一次＋1），此時第二個imageView顯示的就是之前的第三個imageView上的圖片，最後將scrollView的位移量拉回到第二張圖片上[scrollView setContentOffset:CGPointMake(bannerScrollViewW, 0) animated:NO]

   - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {        NSInteger leftIndex;    NSInteger rightIndex;        if (scrollView.contentOffset.x == bannerScrollViewW * 2) {        ;        /** 向左滑  計算 左 中 右 的下標索引*/        leftIndex = self.centerIndex  % self.imageNames.count;                self.centerIndex = (self.centerIndex+1) % self.imageNames.count;                rightIndex = (self.centerIndex +1) % self.imageNames.count;        //NSLog(@"往左滑");    }else if (scrollView.contentOffset.x == 0) {        /** 向右滑  計算 左 中 右 的下標索引*/        rightIndex = self.centerIndex;        self.centerIndex = (self.centerIndex - 1) < 0?(self.imageNames.count - 1):(self.centerIndex - 1);        leftIndex = (self.centerIndex - 1) < 0?(self.imageNames.count - 1):(self.centerIndex - 1);        //NSLog(@"往右滑");    }else {        // 沒有滑走 什麼都不做，直接return        return;    }        /** 設定圖片 */    self.leftImageView.image = [UIImage imageNamed:self.imageNames[leftIndex]];    self.centerImageView.image = [UIImage imageNamed:self.imageNames[self.centerIndex]];    self.rightImageView.image = [UIImage imageNamed:self.imageNames[rightIndex]];        /** 設定pageControl currentPage  因為永遠顯示中間的圖片，故此currentPage＝centerIndex */    self.pageControl.currentPage = self.centerIndex;        // 將 bannerScrollView 拉回到中間圖片的位置 顯示圖片    [scrollView setContentOffset:CGPointMake(bannerScrollViewW, 0) animated:NO];}

    

2. 就用一個UIImageView來實現，給imageView添加swipe手勢（左右都添加），在手勢綁定的方法裡更換圖片，只是在設定下一張圖片後要添加一個過渡動畫 CATransition；利用過度動畫的過度效果讓圖片產生翻頁的效果；只是這種方式沒有UISCrollView的那種互動性，不能中途終止翻頁；

   - (void)swipeGestureRight:(UISwipeGestureRecognizer *)gesture {        self.centerIndex = (self.centerIndex+1) % self.imageNames.count;        self.centerImageView.image = [UIImage imageNamed:self.imageNames[self.centerIndex]];        CATransition *animation=[CATransition animation];    animation.delegate = self;    animation.type = @"push";    animation.subtype = @"fromRight";    animation.duration = 1;    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];        [self.centerImageView.layer addAnimation:animation forKey:@"cube"];        /** 設定pageControl currentPage  因為永遠顯示中間的圖片，故此currentPage＝centerIndex */    self.pageControl.currentPage = self.centerIndex;    NSLog(@"right");}- (void)animationDidStart:(CAAnimation *)anim {    self.isAnimation = YES;    [self.timer setFireDate:[NSDate dateWithTimeIntervalSinceNow:3]];}- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {    self.isAnimation = NO;}- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {    return !self.isAnimation;}

   完整的代碼：http://pan.baidu.com/s/1c1u6NCG

iOS 無限輪播圖的兩種實現