快捷導(dǎo)航

iOS實(shí)現(xiàn)自動(dòng)循環(huán)播放的banner實(shí)例詳解

更新時(shí)間：2017年12月26日 08:42:17 作者：ksnowlv

輪播視圖通常也叫Banner，90%以上App都會(huì)用到的一個(gè)控件，網(wǎng)上有很多開源代碼，下面這篇文章主要給大家介紹了關(guān)于利用iOS如何實(shí)現(xiàn)自動(dòng)循環(huán)播放的banner的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。

前言

對(duì)于banner輪播圖，相信大家都會(huì)經(jīng)常用到。自動(dòng)循環(huán)播放的banner是很常見的UI組件。如何實(shí)現(xiàn)呢？下面就來(lái)給大家詳細(xì)介紹下，話不多說了，下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。

1.實(shí)現(xiàn)思路

1.橫向滾動(dòng)的banner。

UIScrollViw+UIImageView.
UICollectionView+UICollectionViewCell.
前者需要自己做重用UIImageView，后者可以直接重用UICollectionViewCell。如果前者沒有做重用，多占用內(nèi)存。

2.自動(dòng)循環(huán)播放banner。

可以使用計(jì)時(shí)器觸發(fā)循環(huán)播放.
拖動(dòng)或手動(dòng)滑動(dòng)banner時(shí)，停止自動(dòng)循環(huán)播放banner。手勢(shì)停止后，開啟自動(dòng)循環(huán)播放banner。

3.特殊banner位的處理。

處于第1個(gè)或最后1個(gè)時(shí)，為保證橫向自動(dòng)滑動(dòng)效果流暢性，不跳動(dòng)，需要特殊處理下。
在生成banner時(shí)，第1個(gè)前面插入最后1個(gè)banner。最后1個(gè)banner后面插入第1個(gè)banner。當(dāng)滑動(dòng)到最后1個(gè)banner時(shí)，重置于第2個(gè)banner位。

2.本文采用第二種：UICollectionView+UICollectionViewCell

關(guān)鍵代碼實(shí)現(xiàn)

2.1生成banner的特殊處理

- (void)setBannerList:(NSArray<KBannerItem *> *)bannerList {
 if (bannerList.count > 1) {
  NSMutableArray *itemList = [NSMutableArray arrayWithArray:bannerList];
  [itemList insertObject:bannerList.lastObject atIndex:0];
  [itemList addObject:bannerList.firstObject];
  _bannerList = itemList;
 }else{
  _bannerList = bannerList;
 }
 if (self.bannerList.count > 1) {
  self.bannerPageControl.numberOfPages = self.bannerList.count - 2;
 }else{
  self.bannerPageControl.numberOfPages = 0;
 }
 self.noBannerImageView.hidden = self.bannerList.count > 0;
 self.bannerPageControl.currentPage = 0;
 [self.collectionView reloadData];
 self.collectionView.contentOffset = CGPointMake(CGRectGetWidth(self.collectionView.frame), 0);
}

2.2 banner自動(dòng)循環(huán)播放觸發(fā)的事件

- (void)handleBannerChangeEvent:(id)sender {
 if (_bannerPageControl.numberOfPages <= 1) {
  return;
 }
 NSInteger page = _bannerPageControl.currentPage + 1;
 [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:page + 1 inSection:0] atScrollPosition:UICollectionViewScrollPositionRight animated:YES];
}

2.3開啟自動(dòng)播放或關(guān)閉自動(dòng)播放bannner。

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
 self.countTimer.isOpen = NO;
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView
     willDecelerate:(BOOL)decelerate {
 self.countTimer.isOpen = YES;
}

2.4.滑動(dòng)時(shí)的特殊處理。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
 if (_bannerList.count <=1) {
  return;
 }
 CGFloat width = CGRectGetWidth(scrollView.frame);
 NSInteger currentPage = scrollView.contentOffset.x / width;
 if (currentPage == 0) {
  if (scrollView.contentOffset.x < 0) {
   [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:_bannerList.count - 2 inSection:0] atScrollPosition:UICollectionViewScrollPositionRight animated:NO];
   self.bannerPageControl.currentPage = _bannerList.count - 2;
  }else{
   [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:1 inSection:0] atScrollPosition:UICollectionViewScrollPositionRight animated:NO];
   self.bannerPageControl.currentPage = 0;
  }
 }else if (currentPage == _bannerList.count - 1) {
  self.bannerPageControl.currentPage = 0;
  [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:1 inSection:0] atScrollPosition:UICollectionViewScrollPositionRight animated:NO];
 }else{
  self.bannerPageControl.currentPage = currentPage - 1;
 }
}

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: