UI-图片轮播器

效果图

LoopView.h

1 #import <UIKit/UIKit.h>
2
3 @interface LoopView : UICollectionView
4
5 - (instancetype)initWithUrls:(NSArray <NSURL *> *)urls didSelectedIndex:(void (^)(NSInteger index))selectedIndex;
6
7 @end

LoopView.m

 1 #import "LoopView.h"
 2 #import "LoopViewFlowLayout.h"
 3 #import "LoopViewCell.h"
 4
 5 NSString *const LoopViewCellIdentifier = @"LoopViewCellIdentifier";
 6
 7 @interface LoopView() <UICollectionViewDataSource, UICollectionViewDelegate>
 8 @property (nonatomic, copy) void (^selectedCallBack)(NSInteger index);
 9 @end
10
11 @implementation LoopView {
12     NSArray <NSURL *> *_urls;
13 }
14
15 - (instancetype)initWithUrls:(NSArray <NSURL *> *)urls didSelectedIndex:(void (^)(NSInteger))selectedIndex {
16     self = [super initWithFrame:CGRectZero collectionViewLayout:[LoopViewFlowLayout new]];
17     if (self) {
18         _urls = urls;
19         _selectedCallBack = selectedIndex;
20
21         self.dataSource = self;
22         self.delegate = self;
23
24         [self registerClass:[LoopViewCell class] forCellWithReuseIdentifier:LoopViewCellIdentifier];
25
26         // 滚动到第 count 的位置
27         if (_urls.count > 1) {
28             dispatch_async(dispatch_get_main_queue(), ^{
29                 NSIndexPath *indexPath = [NSIndexPath indexPathForItem:_urls.count inSection:0];
30
31                 [self scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
32             });
33         }
34     }
35     return self;
36 }
37
38 #pragma mark - UICollectionViewDataSource
39 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
40     // 如果只有一张图片，不滚动，否则显示 2 倍 的图像
41     return _urls.count * (_urls.count == 1 ? 1 : 100);
42 }
43
44 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
45
46     LoopViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:LoopViewCellIdentifier forIndexPath:indexPath];
47
48     cell.url = _urls[indexPath.item % _urls.count];
49
50     return cell;
51 }
52
53 /// 滚动视图停止滚动
54 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
55     NSInteger offset = scrollView.contentOffset.x / scrollView.bounds.size.width;
56
57     // 判断是否是第0页和最后一页
58     if (offset == 0 || offset == ([self numberOfItemsInSection:0] - 1)) {
59
60         // 第 0 页，切换到 count 位置，最后一页，切换到 count - 1 的位置
61         offset = _urls.count - (offset == 0 ? 0 : 1);
62
63         // 调整 offset
64         scrollView.contentOffset = CGPointMake(offset * scrollView.bounds.size.width, 0);
65     }
66 }
67
68 - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
69     if (_selectedCallBack != nil) {
70         _selectedCallBack(indexPath.item % _urls.count);
71     }
72 }
73
74 @end

LoopViewFlowLayout.m

 1 #import "LoopViewFlowLayout.h"
 2
 3 @implementation LoopViewFlowLayout
 4
 5 - (void)prepareLayout {
 6     [super prepareLayout];
 7
 8     self.itemSize = self.collectionView.bounds.size;
 9     self.minimumLineSpacing = 0;
10     self.minimumInteritemSpacing = 0;
11     self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
12
13     self.collectionView.pagingEnabled = YES;
14     self.collectionView.bounces = NO;
15     self.collectionView.showsVerticalScrollIndicator = NO;
16     self.collectionView.showsHorizontalScrollIndicator = NO;
17 }
18
19 @end

LoopViewCell.h

1 #import <UIKit/UIKit.h>
2
3 @interface LoopViewCell : UICollectionViewCell
4
5 @property (nonatomic) NSURL *url;
6
7 @end

LoopViewCell.m

 1 #import "LoopViewCell.h"
 2
 3 @implementation LoopViewCell {
 4     UIImageView *_imageView;
 5 }
 6
 7 - (instancetype)initWithFrame:(CGRect)frame {
 8     self = [super initWithFrame:frame];
 9     if (self) {
10         _imageView = [[UIImageView alloc] initWithFrame:self.bounds];
11         [self.contentView addSubview:_imageView];
12     }
13     return self;
14 }
15
16 - (void)setUrl:(NSURL *)url {
17     _url = url;
18
19     NSData *data = [NSData dataWithContentsOfURL:url];
20     _imageView.image = [UIImage imageWithData:data];
21 }
22
23 @end

ViewController.m

 1 #import "ViewController.h"
 2 #import "LoopView.h"
 3
 4 @interface ViewController ()
 5
 6 @end
 7
 8 @implementation ViewController {
 9     NSArray <NSURL *> *_urls;
10 }
11
12 - (void)viewDidLoad {
13     [super viewDidLoad];
14
15     // 1. 加载数据
16     [self loadData];
17
18     // 2. 图片轮播器视图
19     LoopView *loopView = [[LoopView alloc] initWithUrls:_urls didSelectedIndex:^(NSInteger index) {
20     }];
21
22     CGFloat width = self.view.bounds.size.width;
23     loopView.frame = CGRectMake(20, width / 2, width - 40, 200);
24     [self.view addSubview:loopView];
25 }
26
27 - (void)loadData {
28     NSMutableArray *array = [NSMutableArray array];
29
30     for (int i = 0; i < 3; i++) {
31         NSString *fileName = [NSString stringWithFormat:@"%02zd.jpg", (i + 1)];
32         NSURL *url = [[NSBundle mainBundle] URLForResource:fileName withExtension:nil];
33
34         [array addObject:url];
35     }
36     _urls = array.copy;
37 }
38
39 @end