在很多應(yīng)用中我們都可以看到圖片輪播器送漠，類似于下面的網(wǎng)易新聞顽照，頭部圖片區(qū)域就是一個(gè)圖片輪播器
網(wǎng)易新聞
這一次我們自己來實(shí)現(xiàn)一個(gè)簡單的圖片輪播器
- 新建一個(gè)工程，storyboard中拖入U(xiǎn)IScrollView和一個(gè)UIPageControl,給她們設(shè)置合適大小和位置
- 準(zhǔn)備5張圖片闽寡，按數(shù)字順序命名代兵，拖入到工程
- 兩個(gè)控件分別脫線到控制器
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
/** 定時(shí)器 */
@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
// 這個(gè)0表示豎直方向不可以滾動(dòng)
self.scrollView.contentSize = CGSizeMake(count * scrollViewW, 0);
// 3.開啟分頁功能
// 標(biāo)準(zhǔn):以scrollView的尺寸為一頁
self.scrollView.pagingEnabled = YES;
// 4.設(shè)置總頁數(shù)
self.pageControl.numberOfPages = count;
// 5.單頁的時(shí)候是否隱藏pageControl
self.pageControl.hidesForSinglePage = YES;
// 7.開啟定時(shí)器
[self startTimer];
}
- 實(shí)現(xiàn)scrollView的幾個(gè)代理方法：
#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// 1.計(jì)算頁碼
int page = (int)(scrollView.contentOffset.x / scrollView.frame.size.width + 0.5);
// 2.設(shè)置頁碼
self.pageControl.currentPage = page;
}
/**
* 用戶即將開始拖拽scrollView時(shí),停止定時(shí)器
*/
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
[self stopTimer];
}
/**
* 用戶已經(jīng)停止拖拽scrollView時(shí),開啟定時(shí)器
*/
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
[self startTimer];
}
- 定時(shí)器相關(guān)代碼：
#pragma mark - 定時(shí)器相關(guān)的代碼
- (void)startTimer
{
// 返回一個(gè)自動(dòng)執(zhí)行的定時(shí)器對象
self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage:) userInfo:@"123" repeats:YES];
// NSDefaultRunLoopMode(默認(rèn)): 同一時(shí)間只能執(zhí)行一個(gè)任務(wù)
// NSRunLoopCommonModes(公用): 可以分配一定的時(shí)間執(zhí)行其他任務(wù)
// 作用:修改timer在runLoop中的模式為NSRunLoopCommonModes
// 目的:不管主線程在做什么操作,都會(huì)分配一定的時(shí)間處理定時(shí)器
[[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}
- (void)stopTimer
{
[self.timer invalidate];
}
/**
* 滾動(dòng)到下一頁
*/
- (void)nextPage:(NSTimer *)timer
{
// 1.計(jì)算下一頁的頁碼
NSInteger page = self.pageControl.currentPage + 1;
// 2.超過了最后一頁
if ( page == 5) {
page = 0;
}
// 3.滾動(dòng)到下一頁
[self.scrollView setContentOffset:CGPointMake(page * self.scrollView.frame.size.width, 0) animated:YES];
}
這里還有一些storyboard里面的設(shè)置：
- scrollview默認(rèn)是自帶拖動(dòng)條的，垂直和水平方向都有下隧，選中scrollview奢人，在storyboard中把Scroll Indicators的勾選去掉
- 在storyboard還可以設(shè)置pageControl的Tint Color和current page(當(dāng)前頁顏色)
運(yùn)行得到一個(gè)簡單的圖片輪播器：
能夠自動(dòng)輪播谓媒，2秒翻下一頁淆院，手動(dòng)拖動(dòng)的時(shí)候，自動(dòng)輪播停止句惯，手指松開土辩，2秒后自動(dòng)翻頁。
簡單圖片輪播器
