UICollectionView 实现整页翻动（每页3个cell）

zhanglizhi111

已于 2023-05-06 12:35:51 修改

阅读量2.1k

点赞数

文章标签： objective-c ios

于 2023-05-06 12:34:01 首次发布

本文链接：https://blog.csdn.net/zhanglizhi111/article/details/130523547

版权

本文介绍了如何使用UICollectionView实现每页展示3个cell的无限翻动效果，通过设置轮播倍数建立多个section，结合UIScrollViewDelegate方法实现翻页与PageControl联动。详细步骤包括数据源创建、初始化尺寸、关键代码实现等。

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

提示：页面架构是通过UICollectionView做的分页，分页点PageControl使用的是<SDCycleScrollView/TAPageControl.h> ，布局架构使用的是Masonry

前言

为了实现UICollectionView无限翻动，连续滑动，主要是利用pagingEnabled属性，配合 UIScrollViewDelegate的代理方法来实现的。

一、准备列表数据和计算思路

1.数据源的创建（9个元素，作为数据源），目的是让翻页效果是3页。

最终达到效果：

2. 思路：通过设置轮播倍数目的是通过建立多个section来实现轮播联动在最后一次循环从头开始排序达到循环播放。

二、使用步骤

1.初始化尺寸数据准备

代码如下（示例）：

static CGFloat const Cell_Height = 174;
static CGFloat const PageDot_Height = 30;

// 轮播倍数Num
static const int kLoopMaxMultiple = 4;

-(void)setArr_data:(NSMutableArray *)arr_data{
    _arr_data = arr_data;
    self.pageControl.numberOfPages = arr_data.count%3==0?arr_data.count/3:(arr_data.count/3+1);
    self.pageControl.currentPage = 0;
    [self.mainCV reloadData];
}

2.绘画view

代码如下（示例）：

- (void)drawView {
    self.backgroundColor = [UIColor clearColor];
    CGFloat img_w = (SCREEN_WIDTH - 15 * 4) / 3.0;

    [self addSubview:self.bkgView];
    self.bkgView.backgroundColor = [UIColor clearColor];
    [self.bkgView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.top.right.mas_equalTo(self);
        make.height.mas_equalTo(Cell_Height+PageDot_Height);
    }];

    //collectionview
    [self.bkgView addSubview:self.mainCV];
    self.mainCV.delegate = self;
    self.mainCV.dataSource = self;
    [self.mainCV mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(self.bkgView.mas_top);
        make.left.mas_equalTo(self.bkgView.mas_left).mas_offset(15);
        make.right.mas_e