iOS Swift利用UICollectionView实现无限轮播功能（原理）详解
更新时间：2018年09月29日 08:59:02 作者：枫developer
无线轮播图的实现方式有很多，下面这篇文章主要给大家介绍了关于iOS Swift利用UICollectionView实现无限轮播功能（原理）的相关资料,需要的朋友可以参考下
前言
作为一个资深(自认为)iOS程序猿，会经常用到轮播图，上一次使用UIScrollView实现无限轮播的效果，这一次在Swift语言中，我使用UICollectionView再为大家讲解一次无限轮播的实现原理。
先上图：
UICollectionView-无限轮播.gif
首先需要实现了就是UICollectionView的分页，这个很简单：
collectionView.isPagingEnabled = true
接下来就是原理，在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
}
这样在滑动的时候，通过偏移量就可以实现无限轮播的效果了。当滑动停止时判断偏移量，当偏移量为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
}
}
其实原理很简单，个人认为使用UICollectionView实现无限轮播比起UIScrollView更加实用并且便于维护，接下来我将代码全部列一下：
import UIKit
let kScreenWidth = UIScreen.main.bounds.width
class 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, 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
}
}
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 = 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
}
}
}
/// collectionView图片的cell
class 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")
}
}
ok，喜欢的话可以点一下收藏哈，用UIScrollView实现轮播的原理在：https://www.jb51.net/article/148185.htm，大家需要的话也可以了解一下。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
详解iOS开发中解析JSON中的boolean类型的数据遇到的问题
这篇文章主要介绍了详解iOS开发中解析JSON中的boolean类型的数据遇到的问题，具有一定的参考价值，有兴趣的可以了解一下。2016-12-12
随着腾讯QQ的普及，现在越来越多的社交类APP在显示头像的时候，都选择了圆形头像，本文将更进一步的介绍如何实现带文字的圆形头像效果，效果非常不错，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。2016-10-10
如何禁止输入表情符号呢？下面脚本之家小编给大家分享IOS程序开发之禁止输入表情符号实例代码，感兴趣的朋友参考下吧2016-04-04
这篇文章主要为大家详细介绍了iOS获取手机的Mac地址的多种方法，感兴趣的小伙伴们可以参考一下2016-04-04
Grand Central Dispatch (GCD)是Apple开发的一个多核编程的解决方法，本文给大家详细介绍IOS中GCD的使用，需要的朋友参考下2016-03-03
下面小编就为大家分享一篇iOS 本地存储NSUserDefaults封装代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要给大家介绍了关于iOS app中无网络页面的添加方法的相关资料，通过文中提供的方法可以很方便的给大家进行提供一个提醒，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2018-01-01
这篇文章主要介绍了IOS 基础之设置 tableview 的分割线的相关资料,需要的朋友可以参考下2017-03-03
这篇文章主要为大家详细介绍了ios实现tableView顶部弹簧图片效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了iOS 弹幕功能的实现思路图文详解，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
最新评论