Detailed explanation of banner example for IOS to realize automatic loop playback

Time:2020-10-30

preface

For banner rotation chart, I believe we will often use. Automatic looping banner is a very common UI component. How to achieve it? Now let’s give you a detailed introduction. Let’s learn together.

1. Realization ideas

1. Banner of horizontal rolling.

  • UIScrollViw+UIImageView.
  • UICollectionView+UICollectionViewCell.
  • The former needs to reuse uiimageview by itself, while the latter can directly reuse uicollectionviewcell. If the former is not reused, it will occupy more memory.

2. Automatic loop playback banner.

  • You can use a timer to trigger loop playback
  • When you drag or manually slide the banner, stop automatically looping the banner. After the gesture stops, turn on the automatic loop playback banner.

3. Special banner bit processing.

  • When it is in the first or the last one, special treatment is needed to ensure the smoothness of the lateral automatic sliding effect without jumping.
  • When a banner is generated, the last banner is inserted before the first. Insert the first banner after the last one. When sliding to the last banner, it is reset to the second banner bit.

2. This paper adopts the second method: uicollectionview + uicollectionviewcell

Key code implementation

2.1 special processing for generating 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 automatically plays the triggered events


- (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 turn on or off auto play Bannner.


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

2.4. Special treatment for sliding.


- (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;
 }
}

summary

The above is the whole content of this article, I hope that the content of this article has a certain reference value for your study or work. If you have any questions, you can leave a message and exchange, thank you for your support to developeppaer.