iOS实现图片自动轮播展示

一、需要实现的效果如下图1，首页图片自动轮播展示，其中图片从网络异步加载，加载过程用风火轮显示加载中，如图2。

本文参考了以下博客文章：

http://www.haodaima.net/art/2687144
http://www.cnblogs.com/xiaobaizhu/archive/2012/12/18/2824255.html

图1

图2

二、需要用到的控件和工具：

(1)UIScrollView显示轮播图片

(2)UIPageControl显示页数

(3)UIActivityIndicatorView显示加载中的风火轮

(4)NSTimer控制自动轮播

(3)SDWebImage，第三方网络图片加载工具

三、实现代码

storyboard布局实现截图：

（1）初始化UIScrollView

-(void)initImageScrolView{
    self.scrollview.frame = CGRectMake(_scrollview.frame.origin.x, _scrollview.frame.origin.y, self.scrollview.frame.size.width, self.scrollview.frame.size.height);
    self.scrollview.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);
    CGFloat imageW = self.scrollview.frame.size.width;
    CGFloat imageH = self.scrollview.frame.size.height;
    // 图片的Y坐标
    CGFloat imageY = 0;
    // 图片总数
    NSInteger totalCount = [imageArr count];
    for (int i = 0; i < totalCount; i++) {
        UIImageView *imageView = [[UIImageView alloc] init];
        // 图片X坐标
        CGFloat imageX = i * imageW;
        // 设置frame
        imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);
        // 设置图片
        [self createActivityView:imageView];
        // 隐藏水平和垂直指示条
        self.scrollview.showsHorizontalScrollIndicator = NO;
        self.scrollview.showsVerticalScrollIndicator=NO;
        NSString *imageUrlStr = [[NSString alloc] initWithFormat:@"%@%@",HttpURL,[imageArr objectAtIndex:i]];
        NSURL *imageUrl = [[NSURL alloc] initWithString:imageUrlStr];
        //使用SDWebImage
        [imageView sd_setImageWithURL:imageUrl placeholderImage:nil completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL){
            [self stopActivityView:imageView];
        }];
        
        [self.scrollview addSubview:imageView];
    }
    // 设置scrollview的滚动范围
    CGFloat contentW = totalCount *imageW;
    //不允许在垂直方向上进行滚动
    self.scrollview.contentSize = CGSizeMake(contentW, 0);
    
    // 3.设置分页
    self.scrollview.pagingEnabled = YES;
    // 4.监听scrollview的滚动
    self.scrollview.delegate = self;
    self.pageControl.numberOfPages = totalCount;
    [self addTimer];
}

（2）方法1中调用的方法createActivityView和stopActivityView

- (void)createActivityView:(UIImageView*)img//创建风火轮
{
    static int size = 40;
    UIActivityIndicatorView *activityView = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
    activityView.frame = CGRectMake(img.frame.size.width/2 - size/2, img.frame.size.height/2 - size/2, size, size);
    [img addSubview:activityView];
    [activityView startAnimating];
}

- (void)stopActivityView:(UIImageView*)img;//移除风火轮
{
    if (img.image != nil)
        for (UIView *view in [img subviews]) {//读出UIButton里的所有控件，再选择UIActivityIndicatorView进行更改
            if ([view isKindOfClass:[UIActivityIndicatorView class]]) {
                [view removeFromSuperview];//把风火轮UIActivityIndicatorView移除
        }
    }
}

（3）实现UIScrollViewDelegate 代理，并重写代理的以下三个回调函数

// scrollview滚动的时候调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {    
    CGFloat scrollviewW = scrollView.frame.size.width;
    CGFloat x = scrollView.contentOffset.x;
    int page = (x + scrollviewW / 2) / scrollviewW;
    self.pageControl.currentPage = page;
}

// 开始拖拽的时候调用
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    // 关闭定时器(注意点; 定时器一旦被关闭,无法再开启)
    [self.timer invalidate];
    [self removeTimer];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{ // 开启定时器
    [self addTimer];
}

（4）实现方法（3）中有关定时器函数

/**
 * 开启定时器
 */
-(void)addTimer{
    self.timer = [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes]; }

/**
 * 关闭定时器
 */
- (void)removeTimer{
    [self.timer invalidate];
}

（5）完成，测试。

(6)已封装，快速集成：http://blog.csdn.net/dolacmeng/article/details/51177765