思路
采用了最常见的方法，将所要展示的轮播图放在UIScrollView上，并将第一张加到最后，最后一张加到开头，以三张图为例，如下图：
轮播图原理图
轮播图滑动到1s时，将偏移量移动到1的位置，滑动到3s时，将偏移量移动到3的位置，这个过程是没有动画的，所以用户看不出来，这就实现轮播图的循环滚动。
代码
1.自定义一个继承UIView的HomeBannerView，当然，名字根据自己的喜好来定。
定义了两个常用的宏
#define VIEW_WIDTH self.bounds.size.width
#define VIEW_HEIGHT self.bounds.size.height
给HomeBannerView定义一些属性，其中block回调实现轮播图的点击跳转事件，banners中存放的模型，currentSelectedPage是当前的页数。
@property (copy, nonatomic) void(^block)(NSInteger);
@property (strong, nonatomic) NSMutableArray *banners;
@property (strong, nonatomic) UIScrollView *scrollView;
@property (strong, nonatomic) UIPageControl *pageControl;
@property (assign, nonatomic) NSUInteger currentSelectedPage;
@property (strong, nonatomic) NSTimer *timer;
- (void)loadData;
重写HomeBannerView的initWithFrame:函数，调用设置UI的函数。
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame: frame]) {
[self setupUI];
}
return self;
}
设置UI:设置scrollView和pageControl的基本属性，并给scrollView添加单击手势。
- (void)setupUI {
// 设置scrollView
self.scrollView = [[UIScrollView alloc] initWithFrame:self.frame];
self.scrollView.showsHorizontalScrollIndicator = NO;
self.scrollView.pagingEnabled = YES;
self.scrollView.bounces = NO;
self.scrollView.delegate = self;
[self addSubview:self.scrollView];
// 设置pageControl
self.pageControl = [[UIPageControl alloc] init];
self.pageControl.userInteractionEnabled = NO;
[self addSubview:self.pageControl];
[self.pageControl mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.mas_equalTo(self.mas_centerX);
make.bottom.mas_equalTo(self);
}];
// 添加单击手势
UITapGestureRecognizer *tapGestureRecognize = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(singleTapGestureRecognizer:)];
tapGestureRecognize.delegate = self;
tapGestureRecognize.numberOfTapsRequired = 1;
[_scrollView addGestureRecognizer:tapGestureRecognize];
}
设置定时器，定时器事件中让当前页数+1，然后更改scrollView的偏移量，这时就会调用scrollViewDidScroll:函数。
- (void)setupTimer {
self.timer = [NSTimer timerWithTimeInterval:3.0 target:self selector:@selector(timerEvent) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}
- (void)timerEvent {
_currentSelectedPage ++;
[_scrollView setContentOffset:CGPointMake(VIEW_WIDTH * (_currentSelectedPage + 1), 0) animated:YES];
}
加载请求到的数据，这里也可以写成带参函数，将模型数组传进来。
- (void)loadData {
// 移除之前视图
for (UIView *subView in _scrollView.subviews) {
if ([subView isKindOfClass:[UIImageView class]]) {
[subView removeFromSuperview];
}
}
if (self.banners.count == 0) {
// 显示默认页，无数据页面
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, VIEW_WIDTH, VIEW_HEIGHT)];
imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.image = [UIImage imageNamed:@""]; // 设置默认图片
[_scrollView addSubview:imageView];
return;
}
_pageControl.numberOfPages = self.banners.count;
_pageControl.currentPage = 0;
// 这里就是前文提到的，首尾各添加一张图片
[self.banners insertObject:self.banners.lastObject atIndex:0];
[self.banners addObject:[self.banners objectAtIndex:1]];
_scrollView.contentSize = CGSizeMake(VIEW_WIDTH * self.banners.count, VIEW_HEIGHT);
for (NSInteger i = 0; i < self.banners.count; i ++) {
CGRect imgRect = CGRectMake(VIEW_WIDTH * i, 0, VIEW_WIDTH, VIEW_HEIGHT);
UIImageView *imageView = [[UIImageView alloc] initWithFrame:imgRect];
BannerModel *banner = self.banners[i];
[imageView sd_setImageWithURL:[NSURL URLWithString:banner.image_path]];
[_scrollView addSubview:imageView];
}
if (self.banners.count > 1) {
_scrollView.contentOffset = CGPointMake(VIEW_WIDTH, 0);
} else {
_scrollView.contentOffset = CGPointZero;
}
// 最开始setupTimer添加到initWithFrame:函数中，这样当banners.count == 0的时候，也会调用定时器，就会偏移到一片空白，放在这里比较合理。
[self setupTimer];
}
scrollView滚动时调用这个方法，在这里判断偏移量，在这里实现前文思路中提到的1s变1，3s变3的过程。
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat targetX = scrollView.contentOffset.x;
if (self.banners.count >= 3) {
if (targetX >= VIEW_WIDTH * (self.banners.count - 1)) {
targetX = VIEW_WIDTH;
} else if (targetX <= 0) {
targetX = VIEW_WIDTH * (self.banners.count - 2);
}
_scrollView.contentOffset = CGPointMake(targetX, 0);
}
NSInteger page = (scrollView.contentOffset.x + VIEW_WIDTH * 0.5) / VIEW_WIDTH;
if (self.banners.count > 1) {
page--;
if (page >= _pageControl.numberOfPages) {
page = 0;
} else if (page < 0) {
page = _pageControl.numberOfPages - 1;
}
}
_currentSelectedPage = page;
_pageControl.currentPage = page;
}
开始拖动的时候关闭定时器，结束拖动的时候开启定时器。
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
// 关闭定时器
[self.timer invalidate];
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
// 开启定时器
[self setupTimer];
}
scrollView的点击事件，通过block来实现页面的跳转，根据偏移量判断当前点击的是第几个轮播图。
- (void)singleTapGestureRecognizer:(UITapGestureRecognizer *)tapGesture {
NSInteger page = (NSInteger)(_scrollView.contentOffset.x / VIEW_WIDTH);
self.block(page);
}
2.接下来的方法是在控制器中实现的
将bannerView添加到控制器中。
self.bannerView = [[HomeBannerView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, bannerHeight)];
[self.view addSubview:_bannerView];
__weak HomeViewController *weakSelf = self;
self.bannerView.block = ^(NSInteger page){
// 跳转界面的代码写这里
};
在请求到数据之后给bannerView的banners赋值，然后调用bannerView的loadData函数。
self.bannerView.banners = 请求到的数据;
[self.bannerView loadData];
这样轮播图的功能就实现了。
