iOS Swift利用UICollectionView实现无限轮播功能（原理）详解

概述iOS Swift利用UICollectionView实现无限轮播功能（原理）详解 前言 作为一个资深(自认为)iOS程序猿,会经常用到轮播图,上一次使用UIScrollView实现无限轮播的效果,这一次在Swift语言中,我使用UICollectionView再为大家讲解一次无限轮播的实现原理. 先上图: UICollectionView-无限轮播.gif 首先需要实现了就是UICollectionView的分页,这个很简单: collectionView.isPagingEnabled = true 接下来就是原理,在UICollectionView的两端需要先添加两张图片 @H_301_0@前言

@H_301_0@作为一个资深(自认为)iOS程序猿，会经常用到轮播图，上一次使用UIScrollVIEw实现无限轮播的效果，这一次在Swift语言中，我使用UICollectionVIEw再为大家讲解一次无限轮播的实现原理。

@H_301_0@先上图：

@H_301_0@

UICollectionVIEw-无限轮播.gif

@H_301_0@首先需要实现了就是UICollectionVIEw的分页，这个很简单：

collectionVIEw.isPagingEnabled = true

@H_301_0@接下来就是原理，在UICollectionVIEw的两端需要先添加两张图片，首段需要添加最后一张图片，而尾端需要添加第一张图片，然后在中间的位置上一次添加各个图片。这个其实是很容易实现的：

 func collectionVIEw(_ collectionVIEw: UICollectionVIEw,cellForItemAt indexPath: IndexPath) -> UICollectionVIEwCell { let cell = collectionVIEw.dequeueReusableCell(withReuseIDentifIEr: "ImageCollectionVIEwCell",for: indexPath) as! ImageCollectionVIEwCell /// 给图片赋值（在首尾分别添加两张图片） if (indexPath.row == 0) {  cell.imagename = imagenameList.last } else if (indexPath.row == self.imagenameList.count + 1) {  cell.imagename = imagenameList.first } else {  cell.imagename = imagenameList[indexPath.row - 1] } return cell }

@H_301_0@这样在滑动的时候，通过偏移量就可以实现无限轮播的效果了。当滑动停止时判断偏移量，当偏移量为0时（视图上显示的是最后一张图片），这时候就直接调动调整偏移量的方法，把UICollectionVIEw偏移到最后一张图片的位置。滑动到尾端时是同理。

 func scrollVIEwDIDEndDecelerating(_ scrollVIEw: UIScrollVIEw) { /// 当UIScrollVIEw滑动到第一位停止时，将UIScrollVIEw的偏移位置改变 if (scrollVIEw.contentOffset.x == 0) {  scrollVIEw.contentOffset = CGPoint(x: CGfloat(self.imagenameList.count) * kScreenWIDth,y: 0)  self.pageControl.currentPage = self.imagenameList.count  /// 当UIScrollVIEw滑动到最后一位停止时，将UIScrollVIEw的偏移位置改变 } else if (scrollVIEw.contentOffset.x == CGfloat(self.imagenameList.count + 1) * kScreenWIDth) {  scrollVIEw.contentOffset = CGPoint(x: kScreenWIDth,y: 0)  self.pageControl.currentPage = 0 } else {  self.pageControl.currentPage = Int(scrollVIEw.contentOffset.x / kScreenWIDth) - 1 } }

@H_301_0@其实原理很简单，个人认为使用UICollectionVIEw实现无限轮播比起UIScrollVIEw更加实用并且便于维护，接下来我将代码全部列一下：

import UIKitlet kScreenWIDth = UIScreen.main.bounds.wIDthclass VIEwController: UIVIEwController { lazy var collectionVIEw: UICollectionVIEw = { let flowLayout = UICollectionVIEwFlowLayout() flowLayout.minimumlinespacing = 0 flowLayout.minimumInteritemSpacing = 0 flowLayout.scrollDirection = .horizontal flowLayout.itemSize = CGSize(wIDth: kScreenWIDth,height: 200) let collectionVIEw = UICollectionVIEw(frame: CGRect(x: 0,y: 0,wIDth: UIScreen.main.bounds.wIDth,height: 200),collectionVIEwLayout: flowLayout) collectionVIEw.isPagingEnabled = true collectionVIEw.showsHorizontalScrollindicator = false collectionVIEw.backgroundcolor = UIcolor.white collectionVIEw.delegate = self collectionVIEw.dataSource = self self.vIEw.addSubvIEw(collectionVIEw) return collectionVIEw }() lazy var pageControl: UIPageControl = { let pageControl = UIPageControl(frame: CGRect(x: 0,y: 150,wIDth: kScreenWIDth,height: 50)) pageControl.numberOfPages = self.imagenameList.count pageControl.currentPage = 0 pageControl.tintcolor = UIcolor.black pageControl.pageIndicatorTintcolor = UIcolor.gray; return pageControl; }() lazy var imagenameList: [String] = { let imageList = ["image0","image1","image2","image3"] return imageList }() overrIDe func vIEwDIDLoad() { super.vIEwDIDLoad() setupController() } func setupController() { /// 设置数据 collectionVIEw.register(ImageCollectionVIEwCell.self,forCellWithReuseIDentifIEr: "ImageCollectionVIEwCell") collectionVIEw.reloadData() collectionVIEw.scrollToItem(at: IndexPath(row: 1,section: 0),at: .left,animated: false) self.vIEw.addSubvIEw(pageControl) }}extension VIEwController: UICollectionVIEwDataSource { func collectionVIEw(_ collectionVIEw: UICollectionVIEw,numberOfItemsInSection section: Int) -> Int { /// 这步只是防止崩溃 if (imagenameList.count == 0) {  return 0 } return imagenameList.count + 2 } func collectionVIEw(_ collectionVIEw: UICollectionVIEw,for: indexPath) as! ImageCollectionVIEwCell /// 给图片赋值（在首尾分别添加两张图片） if (indexPath.row == 0) {  cell.imagename = imagenameList.last } else if (indexPath.row == self.imagenameList.count + 1) {  cell.imagename = imagenameList.first } else {  cell.imagename = imagenameList[indexPath.row - 1] } return cell }}extension VIEwController: UICollectionVIEwDelegate { func scrollVIEwDIDEndDecelerating(_ scrollVIEw: UIScrollVIEw) { /// 当UIScrollVIEw滑动到第一位停止时，将UIScrollVIEw的偏移位置改变 if (scrollVIEw.contentOffset.x == 0) {  scrollVIEw.contentOffset = CGPoint(x: CGfloat(self.imagenameList.count) * kScreenWIDth,y: 0)  self.pageControl.currentPage = 0 } else {  self.pageControl.currentPage = Int(scrollVIEw.contentOffset.x / kScreenWIDth) - 1 } }}/// collectionVIEw图片的cellclass ImageCollectionVIEwCell: UICollectionVIEwCell { /// 显示的图片 let imageVIEw = UIImageVIEw() var imagename: String? = "" { dIDSet {  if let name = imagename {  imageVIEw.image = UIImage(named: name)  } } } overrIDe init(frame: CGRect) { super.init(frame: frame) setupCell(); } /// 初始化视图 func setupCell() { imageVIEw.frame = self.bounds contentVIEw.addSubvIEw(imageVIEw) } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") }}

@H_301_0@ok，喜欢的话可以点一下收藏哈，用UIScrollVIEw实现轮播的原理在：https://www.jb51.net/article/148185.htm，大家需要的话也可以了解一下。

@H_301_0@总结

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

总结

以上是内存溢出为你收集整理的iOS Swift利用UICollectionView实现无限轮播功能（原理）详解全部内容，希望文章能够帮你解决iOS Swift利用UICollectionView实现无限轮播功能（原理）详解所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。