UI-图片轮播器

Posted 2020-08-19 Hibiscus_MO

效果图

 

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