iOS项目开发之实现无限轮播

  • 简介
  • 分析
  • 实现
  • 代码下载

一、简介

在实际的开发当中,会经常有界面需要实现图片的无限轮播这样的需求。比如新闻app,或者其他app的广告位

实现的方式有很多种,最先想动的一定是scrollView,但是其实scrollView实现起来并没有那么容易。这里,我用了一个较为取巧的办法,使用UICollectionView来实现无限轮播

二、分析

无限轮播,通常就是图片的无限循环的播放。当到最后一个图片的时候,再次轮播时,显示第一个图片。

UICollectionView可以进行上下滚动,也可以进行左右滚动,所有这里我们只需要使用它,并且让它左右滚动即可

我这里将整个内容封装到一个View里面,使用起来较为简单,另外代码中注释也很清晰,这里不做阐述。

三、实现

1⃣️在主控制器中创建广告位

/**
 *  加载数据
 */
- (void)loadData
{
    NSURL *dataUrl = [[NSBundle mainBundle] URLForResource:@"newses.plist" withExtension:nil];
    NSArray *data = [NSArray arrayWithContentsOfURL:dataUrl];
    NSMutableArray *tempArray = [NSMutableArray array];
    for (NSDictionary *dict in data) {
        AdvertModel *advert = [AdvertModel advertModelWithDict:dict];
        [tempArray addObject:advert];
    }
    _advertData = tempArray;
}

- (void)createAdvertView
{
    CGRect advertRect = CGRectMake(10, 40, 300, 130);
    AdvertView *advertView = [[AdvertView alloc] initWithFrame:advertRect];
    advertView.advertData = _advertData;
    [self.view addSubview:advertView];
}

2⃣️广告位的View的实现

#import "AdvertView.h"
#import "AdvertModel.h"
#import "AdvertCell.h"

#define cellIdentifier @"advertcell"

@interface AdvertView() <UICollectionViewDataSource, UICollectionViewDelegate>
{
    UICollectionView *_advertView;
    UIPageControl *_pageControl;
    
    NSTimer *_timer;
    
    NSInteger _width;
    NSInteger _height;
}
@end

@implementation AdvertView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        //1.设置宽高
        _width = frame.size.width;
        _height = frame.size.height;
        
        //2.创建广告位和PageControl
        [self createAdvertView];
        [self createPageView];
        
        //3.创建定时器
        [self addTimer];
    }
    return self;
}

/**
 *  加载数据
 */
- (void)setAdvertData:(NSArray *)advertData
{
    _advertData = advertData;
    [_advertView reloadData];
    
    [_advertView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:100 inSection:0] atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
}

/**
 *  创建广告位
 */
- (void)createAdvertView
{
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    flowLayout.minimumLineSpacing = 0;
    flowLayout.minimumInteritemSpacing = 0;
    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    flowLayout.itemSize = CGSizeMake(_width, _height);
    
    CGRect advertRect = CGRectMake(0, 0, _width, _height);
    _advertView = [[UICollectionView alloc] initWithFrame:advertRect collectionViewLayout:flowLayout];
    [_advertView registerClass:[AdvertCell class] forCellWithReuseIdentifier:cellIdentifier];
    _advertView.delegate = self;
    _advertView.dataSource = self;
    _advertView.pagingEnabled = YES;
    _advertView.showsHorizontalScrollIndicator = NO;
    _advertView.showsVerticalScrollIndicator = NO;
    [self addSubview:_advertView];
}

/**
 *  创建页码的View
 */
- (void)createPageView
{
    UIPageControl *pageControl = [[UIPageControl alloc] init];
    pageControl.center = CGPointMake(self.frame.size.width * 0.5, _height - 20);
    pageControl.bounds = CGRectMake(0, 0, 100, 0);
    pageControl.numberOfPages = 5;
    pageControl.pageIndicatorTintColor = [UIColor blueColor];
    pageControl.currentPageIndicatorTintColor = [UIColor redColor];
    [self addSubview:pageControl];
    _pageControl = pageControl;
}

/**
 *  添加定时器
 */
- (void)addTimer
{
    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextAdvert) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
    _timer = timer;
}
/**
 *  删除定时器
 */
- (void)removeTimer
{
    [_timer invalidate];
    _timer = nil;
}

/**
 *  下一个广告
 */
- (void)nextAdvert
{
    CGFloat offset = _advertView.contentOffset.x + _width;
    [_advertView setContentOffset:CGPointMake(offset, 0) animated:YES];
}

#pragma mark - UICollectionView的数据源和代理方法

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    //这里将数据放足够大,可以无限的轮播循环
    return _advertData.count * 1000;
}

- (AdvertCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    AdvertCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    cell.advert = _advertData[indexPath.item % 5];
    return cell;
}

- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath
{
    //取出当前可见的单元格
    NSIndexPath *visiablePath = [[collectionView indexPathsForVisibleItems] firstObject];
    _pageControl.currentPage = visiablePath.item % 5;
}

#pragma mark 当拖拽时,暂时将定时器销毁
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [self removeTimer];
}
#pragma mark 停止拖拽时,再次创建定时器
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    [self addTimer];
}

@end

四、代码下载地址

https://github.com/wangzi9521/InfinitePicture

posted @ 2014-09-16 15:26  了透糕糟  阅读(1622)  评论(1编辑  收藏  举报