iOS实现自动循环播放的banner实例详解

所属分类: 软件编程 / IOS 阅读数: 1809
收藏 0 赞 0 分享

前言

对于banner轮播图,相信大家都会经常用到。自动循环播放的banner是很常见的UI组件。如何实现呢?下面就来给大家详细介绍下,话不多说了,下面来一起学习学习吧。

1.实现思路

1.横向滚动的banner。

  • UIScrollViw+UIImageView.
  • UICollectionView+UICollectionViewCell.
  • 前者需要自己做重用UIImageView,后者可以直接重用UICollectionViewCell。如果前者没有做重用,多占用内存。

2.自动循环播放banner。

  • 可以使用计时器触发循环播放.
  • 拖动或手动滑动banner时,停止自动循环播放banner。手势停止后,开启自动循环播放banner。

3.特殊banner位的处理。

  • 处于第1个或最后1个时,为保证横向自动滑动效果流畅性,不跳动,需要特殊处理下。
  • 在生成banner时,第1个前面插入最后1个banner。最后1个banner后面插入第1个banner。当滑动到最后1个banner时,重置于第2个banner位。

2.本文采用第二种:UICollectionView+UICollectionViewCell

关键代码实现

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自动循环播放触发的事件

- (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开启自动播放或关闭自动播放bannner。

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

2.4.滑动时的特殊处理。

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

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

更多精彩内容其他人还在看

iOS开发笔记--详解UILabel的相关属性设置

这篇文章主要介绍了iOS开发笔记--详解UILabel的相关属性设置,对初学者具有一定的参考价值,有需要的可以了解一下。
收藏 0 赞 0 分享

iOS中获取系统相册中的图片实例

这篇文章主要介绍了iOS中获取系统相册中的图片实例,具有一定的参考价值没有需要的朋友可以了解一下。
收藏 0 赞 0 分享

iOS 检测网络状态的两种方法

一般有Reachability和AFNetworking监测两种方式,都是第三方的框架,下文逐一详细给大家讲解,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

IOS 性能优化中离屏渲染

本文主要介绍了IOS 性能优化中离屏渲染的资料,提供了几种方法讲解了优化,有需要的小伙伴可以参考下
收藏 0 赞 0 分享

iOS获取当前设备型号等信息(全)包含iPhone7和iPhone7P

这篇文章主要介绍了iOS获取当前设备型号设备信息的总结包含iPhone7和iPhone7P,包括ios7之前之后的获取方式,本文接的非常详细,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

iOS实现爆炸的粒子效果示例代码

之前在网上看到了一个Android实现的爆炸效果,感觉非常不错,所以自己尝试用iOS来实现下效果,现在将实现的过程、原理以及遇到的问题分享给大家,有需要的朋友们可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享

iOS毕业设计之天气预报App

这篇文章主要为大家详细介绍了iOS毕业设计之天气预报App,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS轻点、触摸和手势代码开发

这篇文章主要为大家详细介绍了iOS轻点、触摸和手势代码开发,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS 实现多代理的方法及实例代码

这篇文章主要介绍了iOS 实现多代理的方法及实例代码的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

iOS文字渐变色效果的实现方法

在大家日常开发iOS的过程中,可能会遇到要实现文字渐变色的效果,这篇文章文章通过示例代码和详细的步骤介绍了如何利用iOS实现文字渐变色的效果,实现后的很不错,感兴趣的朋友们下面来一起看看吧。
收藏 0 赞 0 分享
查看更多