两种方式实现轮播图

概述

  • 轮播图可以用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
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值