在很多應(yīng)用中我們都可以看到圖片輪播器，類似于下面的網(wǎng)易新聞，頭部圖片區(qū)域就是一個圖片輪播器

網(wǎng)易新聞

這一次我們自己來實現(xiàn)一個簡單的圖片輪播器

• 新建一個工程，storyboard中拖入UIScrollView和一個UIPageControl,給她們設(shè)置合適大小和位置
• 準備5張圖片，按數(shù)字順序命名，拖入到工程
• 兩個控件分別脫線到控制器

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

設(shè)置控制器為scrollView的代理并遵守協(xié)議<UIScrollViewDelegate>

• 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.設(shè)置contentSize
    // 這個0表示豎直方向不可以滾動
    self.scrollView.contentSize = CGSizeMake(count * scrollViewW, 0);
    // 3.開啟分頁功能
    // 標準:以scrollView的尺寸為一頁
    self.scrollView.pagingEnabled = YES;
    // 4.設(shè)置總頁數(shù)
    self.pageControl.numberOfPages = count;
    // 5.單頁的時候是否隱藏pageControl
    self.pageControl.hidesForSinglePage = YES;
   // 7.開啟定時器
    [self startTimer];
}

• 實現(xiàn)scrollView的幾個代理方法：

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 1.計算頁碼
    int page = (int)(scrollView.contentOffset.x / scrollView.frame.size.width + 0.5);
   // 2.設(shè)置頁碼
    self.pageControl.currentPage = page;
}
/**
 *  用戶即將開始拖拽scrollView時,停止定時器
 */
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [self stopTimer];
}
/**
 *  用戶已經(jīng)停止拖拽scrollView時,開啟定時器
 */
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self startTimer];
}

• 定時器相關(guān)代碼：

#pragma mark - 定時器相關(guān)的代碼
- (void)startTimer
{
    // 返回一個自動執(zhí)行的定時器對象
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage:) userInfo:@"123" repeats:YES];
    // NSDefaultRunLoopMode(默認): 同一時間只能執(zhí)行一個任務(wù)
    // NSRunLoopCommonModes(公用): 可以分配一定的時間執(zhí)行其他任務(wù)
    // 作用:修改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里面的設(shè)置：

• scrollview默認是自帶拖動條的，垂直和水平方向都有，選中scrollview，在storyboard中把Scroll Indicators的勾選去掉
• 在storyboard還可以設(shè)置pageControl的Tint Color和current page(當前頁顏色)

運行得到一個簡單的圖片輪播器：
能夠自動輪播，2秒翻下一頁，手動拖動的時候，自動輪播停止，手指松開，2秒后自動翻頁。

簡單圖片輪播器