UIScrollView实现图片轮播器

在很多应用中我们都可以看到图片轮播器，类似于下面的网易新闻，头部图片区域就是一个图片轮播器

网易新闻

这一次我们自己来实现一个简单的图片轮播器

• 新建一个工程，storyboard中拖入UIScrollView和一个UIPageControl,给她们设置合适大小和位置
• 准备5张图片，按数字顺序命名，拖入到工程
• 两个控件分别脱线到控制器

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
/** 定时器 */
@property (nonatomic, weak) NSTimer *timer;

设置控制器为scrollView的代理并遵守协议

• viewDidLoad方法中：

- (void)viewDidLoad {
    [super viewDidLoad];
    // 1.添加图片
    CGFloat scrollViewW = self.scrollView.frame.size.width;
    CGFloat scrollViewH = self.scrollView.frame.size.height;
    int count = 5;
    for (int i = 0; i < count; i ++) {
        UIImageView *imageView = [[UIImageView alloc] init];
        NSString *name = [NSString stringWithFormat:@"img_0%d",i + 1];
        imageView.image = [UIImage imageNamed:name];
        imageView.frame = CGRectMake(i * scrollViewW, 0, scrollViewW, scrollViewH);
        [self.scrollView addSubview:imageView];
    }
    // 2.设置contentSize
    // 这个0表示竖直方向不可以滚动
    self.scrollView.contentSize = CGSizeMake(count * scrollViewW, 0);
    // 3.开启分页功能
    // 标准:以scrollView的尺寸为一页
    self.scrollView.pagingEnabled = YES;
    // 4.设置总页数
    self.pageControl.numberOfPages = count;
    // 5.单页的时候是否隐藏pageControl
    self.pageControl.hidesForSinglePage = YES;
   // 7.开启定时器
    [self startTimer];
}

• 实现scrollView的几个代理方法：

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 1.计算页码
    int page = (int)(scrollView.contentOffset.x / scrollView.frame.size.width + 0.5);
   // 2.设置页码
    self.pageControl.currentPage = page;
}
/**
 *  用户即将开始拖拽scrollView时,停止定时器
 */
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [self stopTimer];
}
/**
 *  用户已经停止拖拽scrollView时,开启定时器
 */
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self startTimer];
}

• 定时器相关代码：

#pragma mark - 定时器相关的代码
- (void)startTimer
{
    // 返回一个自动执行的定时器对象
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage:) userInfo:@"123" repeats:YES];
    // NSDefaultRunLoopMode(默认): 同一时间只能执行一个任务
    // NSRunLoopCommonModes(公用): 可以分配一定的时间执行其他任务
    // 作用:修改timer在runLoop中的模式为NSRunLoopCommonModes
    // 目的:不管主线程在做什么操作,都会分配一定的时间处理定时器
    [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}

- (void)stopTimer
{
    [self.timer invalidate];
}
/**
 *  滚动到下一页
 */
- (void)nextPage:(NSTimer *)timer
{
    // 1.计算下一页的页码
    NSInteger page = self.pageControl.currentPage + 1;
    // 2.超过了最后一页
    if ( page == 5) {
        page = 0;
    }
    // 3.滚动到下一页
    [self.scrollView setContentOffset:CGPointMake(page * self.scrollView.frame.size.width, 0) animated:YES];
}

这里还有一些storyboard里面的设置：

• scrollview默认是自带拖动条的，垂直和水平方向都有，选中scrollview，在storyboard中把Scroll Indicators的勾选去掉
• 在storyboard还可以设置pageControl的Tint Color和current page(当前页颜色)

运行得到一个简单的图片轮播器：
能够自动轮播，2秒翻下一页，手动拖动的时候，自动轮播停止，手指松开，2秒后自动翻页。

简单图片轮播器