iOS之輪播圖(collectionView)加定時器

今天為大家分享一波輪播圖,本人不才,希望此分享對大家有用。今天為什么寫這個呢,之前寫過項目用scrollView封裝寫過輪播圖,但是感覺不是很好,而且傳值也很不好寫,所以今天用collectionView寫的輪播圖,傳值也很是好寫的。

5517BA7A-0DE8-43B6-8C97-7BACA687416D.png

<1>先定一些我們需要的屬性


@property (nonatomic, retain) UICollectionView *collection;
@property (nonatomic, retain) NSMutableArray *marr;// 存圖片的數(shù)組
@property (nonatomic, retain) UIPageControl *page;
@property (nonatomic, retain) NSTimer *timer;
// 調(diào)用的一些方法
- (void)viewDidLoad {
    [super viewDidLoad];
    [self createCollectionView];
    [self createPhone];
    [self createPage];
    [self addTimer];
    // Do any additional setup after loading the view, typically from a nib.
}

<2>//先做一些事前工作,把collectionView鋪好


    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
    layout.itemSize = CGSizeMake(WIDTH, 300);
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    layout.minimumLineSpacing = 0;
    self.collection = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, WIDTH, 300) collectionViewLayout:layout];
    [self.view addSubview:self.collection];
    self.collection.backgroundColor = [UIColor whiteColor];
    self.collection.pagingEnabled = YES;//開啟翻頁效果
    self.collection.delegate = self;
    self.collection.dataSource = self;
    self.collection.showsHorizontalScrollIndicator = NO;//滑條不出現(xiàn)
    [self.collection registerClass:[CellOfFirst class] forCellWithReuseIdentifier:@"pool"];
    

<3>collectionView 的協(xié)議方法


- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
   
    return self.marr.count;// 返回圖片的個數(shù)
}
// 說一下為什么返回100個分區(qū)
// 我們可以將第50個分區(qū)的一組圖片作為用戶看到的第一組圖片,這樣就實現(xiàn)輪播的效果了。(100分區(qū)足夠了,除非腦殘劃100次)
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 100;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
// 自定義的Cell類
    CellOfFirst *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"pool" forIndexPath:indexPath];
   cell.pic.image = self.marr[indexPath.row];
    return cell;
    
}

// 本地的圖片

- (void)createPhone {
    self.marr = [NSMutableArray array];
    for (int i = 1; i < 12; i++) {
        NSString *name = [NSString stringWithFormat:@"123_%d.jpg",i];
        UIImage *image = [UIImage imageNamed:name];
        [self.marr addObject:image];
    }
    //設置起始位置
    [self.collection scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:50] atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
}

// 獲取pageControoler

// 別忘記調(diào)用呦
- (void)createPage {
    self.page = [[UIPageControl alloc]initWithFrame:CGRectMake(0, 250, WIDTH, 50)];
    [self.view addSubview:self.page];
    self.page.numberOfPages = self.marr.count;
 }

// 當圖片劃得時候已經(jīng)減速時

// collectionView繼承于scrollview 所以我們可用此方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    // 計算page算法
    int page = (int) (scrollView.contentOffset.x / WIDTH + 0.5) % self.marr.count;
    self.page.currentPage = page;
    
    
}

// 我們可以添加定時器了 (一樣別忘記獲取完圖片調(diào)用)

- (void)addTimer {
    self.timer = [NSTimer scheduledTimerWithTimeInterval:3.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];
}
- (void)nextImage {
    //設置當前 indePath
    NSIndexPath *currrentIndexPath = [[self.collection indexPathsForVisibleItems]lastObject];
    NSIndexPath *currentIndexPathReset = [NSIndexPath indexPathForItem:currrentIndexPath.item inSection:50];
    [self.collection scrollToItemAtIndexPath:currentIndexPathReset atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
    // 設置下一個滾動的item
    NSInteger nextItem = currentIndexPathReset.item +1;
    NSInteger nextSection = currentIndexPathReset.section;
    if (nextItem==self.marr.count) {
        // 當item等于輪播圖的總個數(shù)的時候
        // item等于0, 分區(qū)加1
        // 未達到的時候永遠在50分區(qū)中
        nextItem=0;
        nextSection++;
    }
    NSIndexPath *nextIndexPath = [NSIndexPath indexPathForItem:nextItem inSection:nextSection];
      [self.collection scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
}

// 當用戶自己劃圖片時 當然我們也需要定時器被移除 (時機很重要)

- (void)removeTimer{
    [self.timer invalidate];
    self.timer = nil;
  }

// 當圖片即將開始被拖拽時 我們將定時器移除

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    
    [self removeTimer];
}

// 當圖片已經(jīng)完成被拖拽時 我們還需加上定時器

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    
    [self addTimer];
}

這些做完我們基本就完成輪播圖自動輪播了,大家有興趣的可以嘗試下。

5.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容