iOS項目開發之實現無限輪播

  • 簡介
  • 分析
  • 實現
  • 代碼下載

1、簡介git

在實際的開發當中,會常常有界面須要實現圖片的無限輪播這樣的需求。好比新聞app,或者其餘app的廣告位github

實現的方式有不少種,最早想動的必定是scrollView,可是其實scrollView實現起來並無那麼容易。這裏,我用了一個較爲取巧的辦法,使用UICollectionView來實現無限輪播app

2、分析oop

無限輪播,一般就是圖片的無限循環的播放。當到最後一個圖片的時候,再次輪播時,顯示第一個圖片。spa

UICollectionView能夠進行上下滾動,也能夠進行左右滾動,全部這裏咱們只須要使用它,而且讓它左右滾動便可代理

我這裏將整個內容封裝到一個View裏面,使用起來較爲簡單,另外代碼中註釋也很清晰,這裏不作闡述。code

3、實現blog

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的實現ci

#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

4、代碼下載地址

https://github.com/wangzi9521/InfinitePicture

相關文章
相關標籤/搜索