两种方式实现轮播图

Johncahong

已于 2022-02-12 21:56:45 修改

阅读量3.6k

点赞数

分类专栏： iOS 文章标签： objective-c ios

于 2022-02-11 17:04:12 首次发布

本文链接：https://blog.csdn.net/johncahong/article/details/122884451

版权

本文介绍了如何使用UIScrollView和UICollectionView两种方式实现轮播图。对于UIScrollView，通过在图片数组首尾添加额外图片，创建对应数量的UIImageView，并设置内容偏移来实现循环滚动效果。而对于UICollectionView，同样处理图片数组，但只需最多3个Cell即可实现，通过代理方法调整contentOffset以达到无缝滚动。详细代码和实现方法文中均有讲解。

摘要由CSDN通过智能技术生成

概述

轮播图可以用UIScrollView或UICollectionView来实现。
用UIScrollView实现轮播图的思路是：
给图片数组的第一个元素（下标0）添加最后一张图片，之后再往末尾添加第一张图片，这样数组就增加了2张图片，第一个元素和倒数第二个元素是最后一张图片，最后一个元素和第二个元素是第一张图片。
根据图片数组的个数创建UIImageView个数，每个UIImageView占据屏幕宽度。首次展示图片时，scrollView定位到（contentOffset）数组的第二个元素，展示第一张图片内容。当滚动到最后一个元素时，让scrollView定位到第二个元素。当滚动到第一个元素时，让scrollView定位到倒数第二个元素。
这种实现方式的特点：有多少张图片就要创建多少个UIImageView控件。
用UICollectionView实现轮播图的思路是：
处理图片数组的方式和UIScrollView相同，都是在图片数组的前和后各加入一张图片。然后自定义一个view，UICollectionView是该view的子控件，占满该view的bounds，UICollectionViewCell也占满该view的bounds，UICollectionViewCell上面添加UIImageView。
首次展示图片时，collectionView定位到数组的第二个元素，展示第一张图片内容。当滚动到最后一个元素时，让collectionView定位到第二个元素。当滚动到第一个元素时，让collectionView定位到倒数第二个元素。
这种实现方式的特点：无论多少图片，最多只创建3个cell，省内存。当轮播图只有一张图片时，cell只创建一个。当轮播图两张及两张以上时，cell创建3个，图片在这3个cell之间复用。
无论是用UIScrollView还是用UICollectionView方式实现轮播，在横向滚动图片时，contentOffSet.x都在以屏幕宽度的大小改变，利用这一特征，当图片滚动到控件的左右边界时，调整contentOffset就可以形成循环滚动的假象。

具体实现

效果图

以下先讲用UICollectionView方式实现轮播图。
自定义HRCycleView，添加到控制器上。控制器的主要代码

    UITableView *tableView = [[UITableView alloc] initWithFrame:self.view.bounds];
    tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    [self.view addSubview:tableView];

    UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 500)];
    tableView.tableHeaderView = headerView;

    //用UICollectionView实现轮播
    HRCycleView *cycleView = [[HRCycleView alloc] initWithFrame:CGRectMake(0, 20, self.view.bounds.size.width, 200)];
    [headerView addSubview:cycleView];

    //下拉刷新
    tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
   

        cycleView.data = @[@"num_1",@"num_2",@"num_3",@"num_4",@"num_5"];
        [tableView.mj_header endRefreshing];
    }];

    [tableView.mj_header beginRefreshing];

HRCycleView事先创建好子控件UICollectionView和UIPageControl，提供data属性用于接收图片数组。
处理循环播放的关键在于collectionView的代理方法-collectionView:didEndDisplayingCell:forItemAtIndexPath:，当cell完全移出屏幕时，该方法会获得回调，可在该方法中及时调整contentOffSet，让用户永远无法感知到UICollectionView的左右边界，具体代码如下：

#import "HRCycleView.h"
#import "HRCollectionViewCell.h"
    
//轮播间隔
static CGFloat ScrollInterval = 3.0f;
    
@interface HRCycleView ()<UICollectionViewDelegate,UICollectionViewDataSource>
    
@property (nonatomic, strong) UICollectionView *collectionView;
@property (nonatomic, strong) UIPageControl *pageControl;
@property (nonatomic, strong) NSTimer *timer