在很多应用中我们都可以看到图片轮播器，类似于下面的网易新闻，头部图片区域就是一个图片轮播器
网易新闻
这一次我们自己来实现一个简单的图片轮播器
- 新建一个工程，storyboard中拖入UIScrollView和一个UIPageControl,给她们设置合适大小和位置
- 准备5张图片，按数字顺序命名，拖入到工程
- 两个控件分别脱线到控制器
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
/** 定时器 */
@property (nonatomic, weak) NSTimer *timer;
设置控制器为scrollView的代理并遵守协议<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.设置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秒后自动翻页。
简单图片轮播器
