iOS 无限轮播图的两种实现

首先说一下实现的思想：

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

就用一个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 无限轮播图的两种实现

相关文章