服务器之家：专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Swift - 使用Swift实现iOScollectionView广告无限滚动效果(DEMO)

使用Swift实现iOScollectionView广告无限滚动效果(DEMO)

2020-12-30 14:37木子沉雨 Swift

本文给大家分享使用Swift实现iOScollectionView广告无限滚动效果(DEMO)，非常不错，具有一定的参考借鉴价值，感兴趣的朋友一起看看吧

今天公司里的实习生跑过来问我一般App上广告的无限滚动是怎么实现的,刚好很久没写博客了,就决定写下了,尽量帮助那些处于刚学iOS的程序猿.

做一个小demo,大概实现效果如下图所示:

使用Swift实现iOScollectionView广告无限滚动效果(DEMO)

基本实现思路:

1. 在你需要放置无限滚动展示数据的地方把他的数据,在原本的基础上把你要展示的数据扩大三倍.(当然扩大两倍也是可以的,三倍的话,比较好演示)

?
1
2
3
4
5
// MARK: - 设置数据源
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
// print(self.arrayM.count)
return self.arrayM.count * 3
}

2.当在定时器的作用下,或者在拖动情况存下滚动到第八个时候,设置此时的collectionView.contentOffset.x等于滚动到第三个cell的contentOffset.x

使用Swift实现iOScollectionView广告无限滚动效果(DEMO)

?
1
2
3
if collectionView.contentOffset.x == CGFloat(3 * self.arrayM.count - 1) * self.collectionView.bounds.width {
self.collectionView.contentOffset.x = CGFloat(self.arrayM.count - 1) * self.collectionView.bounds.width
}

3.当拖动到第0个cell时,设置此时的collectionView.contentOffset.x等于第六个cell的contentOffset.x

使用Swift实现iOScollectionView广告无限滚动效果(DEMO)

?
1
2
3
if collectionView.contentOffset.x == 0 {
self.collectionView.contentOffset.x = CGFloat(2 * self.arrayM.count - 1) * self.collectionView.bounds.width
}

代码如下:

我在代码中用到5张照片,所以应该一共有15个cell

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import UIKit
class ViewController: UIViewController ,UICollectionViewDataSource, UICollectionViewDelegate {
@IBOutlet weak var collectionView: UICollectionView!
var timer : Timer?
var arrayM : [BOModel] = [] {
didSet {
self.collectionView.reloadData()
}
}
static let CellID = "cell"
override func viewDidLoad() {
super.viewDidLoad()
self.collectionView.dataSource = self
self.collectionView.delegate = self
// 加载数据
loadData()
self.collectionView.register(UINib.init(nibName: "BOCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: ViewController.CellID)
//设置collextionView
setupCollectionView()
// 开启定时器
starTimer()
}
/// 从polist中加载数据
func loadData() {
let stemp: NSArray = NSArray(contentsOfFile: Bundle.main.path(forResource: "shops.plist", ofType: nil)!)!
for dict in stemp {
let model = BOModel.init(dict: dict as! [String : Any])
self.arrayM.append(model)
}
}
/// 设置cellection的布局方式
///
/// - Returns: 一个布局类型
func setupCollectionFlowlayout() -> (UICollectionViewFlowLayout) {
let flowLayout = UICollectionViewFlowLayout()
flowLayout.itemSize = self.collectionView.bounds.size
flowLayout.minimumLineSpacing = 0
flowLayout.minimumInteritemSpacing = 0
flowLayout.scrollDirection = .horizontal
flowLayout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)
return flowLayout
}
/// 设置collectionVIew
func setupCollectionView() -> () {
self.collectionView.collectionViewLayout = self.setupCollectionFlowlayout()
self.collectionView.showsVerticalScrollIndicator = false
self.collectionView.showsHorizontalScrollIndicator = false
self.collectionView.isPagingEnabled = true
}
// MARK: - 设置数据源
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
// print(self.arrayM.count)
return self.arrayM.count * 3
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = self.collectionView.dequeueReusableCell(withReuseIdentifier: ViewController.CellID, for: indexPath) as! BOCollectionViewCell
cell.model = self.arrayM[indexPath.row % self.arrayM.count]
return cell
}
// MARK: - 实现代理方法
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
//contentOffset.x == 0 时,重新设置contentOffset.x的值
if collectionView.contentOffset.x == 0 {
self.collectionView.contentOffset.x = CGFloat(2 * self.arrayM.count - 1) * self.collectionView.bounds.width
}
//当到达最后一个cell时,重新设置contentOffset.x的值
if collectionView.contentOffset.x == CGFloat(3 * self.arrayM.count - 1) * self.collectionView.bounds.width {
self.collectionView.contentOffset.x = CGFloat(self.arrayM.count - 1) * self.collectionView.bounds.width
}
}
/// 开启定时器
func starTimer () {
let timer = Timer.init(timeInterval: 1, target: self, selector: #selector(ViewController.nextPage), userInfo: nil, repeats: true)
// 这一句代码涉及到runloop 和 主线程的知识,则在界面上不能执行其他的UI操作
RunLoop.main.add(timer, forMode: RunLoopMode.commonModes)
self.timer = timer
}
/// 在1秒后,自动跳转到下一页
func nextPage() {
// 如果到达最后一个,则变成第四个
if collectionView.contentOffset.x == CGFloat(3 * self.arrayM.count - 1) * self.collectionView.bounds.width {
self.collectionView.contentOffset.x = CGFloat(self.arrayM.count - 1) * self.collectionView.bounds.width
}else {
// 每过一秒,contentOffset.x增加一个cell的宽度
self.collectionView.contentOffset.x += self.collectionView.bounds.size.width
}
}
/// 当collectionView开始拖动的时候,取消定时器
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
self.timer?.invalidate()
self.timer = nil
}
/// 当用户停止拖动的时候,开启定时器
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
starTimer()
}
}

plist文件如下图所示:

使用Swift实现iOScollectionView广告无限滚动效果(DEMO)

用到的字典转模型因为比较简单的转换,就自己写了个:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import UIKit
class BOCollectionViewCell: UICollectionViewCell {
@IBOutlet weak var imageView: UIImageView!
var model : BOModel? {
didSet {
guard let image = UIImage.init(named: (model?.name)!) else {
return
}
self.imageView.image = image
}
}
override func awakeFromNib() {
super.awakeFromNib()
}
}

自定义collectionViewCell类中的内容:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import UIKit
class BOCollectionViewCell: UICollectionViewCell {
@IBOutlet weak var imageView: UIImageView!
var model : BOModel? {
didSet {
guard let image = UIImage.init(named: (model?.name)!) else {
return
}
self.imageView.image = image
}
}
override func awakeFromNib() {
super.awakeFromNib()
}
}

附: 其实这种方法比较实现无限滚动,利用了一点小技巧,用电脑测试的时候可能有一点缺陷.

以上所述是小编给大家介绍的使用Swift实现iOScollectionView广告无限滚动效果(DEMO)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！

原文链接：http://www.cnblogs.com/muzichenyu/p/6071757.html

  • Swift
  • 滚动
  • iOScollectionView

    • 延伸 · 阅读

    精彩推荐
    • Swift浅谈在Swift中关于函数指针的实现

      浅谈在Swift中关于函数指针的实现

      这篇文章主要介绍了浅谈在Swift中关于函数指针的实现,是作者根据C语言的指针特性在Swifft中做出的一个实验,需要的朋友可以参考下...

      Swift教程网4372020-12-21
    • Swift分析Swift性能高效的原因

      分析Swift性能高效的原因

      绝大多数公司选择Swift语言开发iOS应用，主要原因是因为Swift相比Objc有更快的运行效率，更加安全的类型检测，更多现代语言的特性提升开发效率；这一系...

      louis_wang9092021-01-16
    • Swiftswift相册相机的权限处理示例详解

      swift相册相机的权限处理示例详解

      在iOS7以后要打开手机摄像头或者相册的话都需要权限，在iOS9中更是更新了相册相关api的调用，那么下面这篇文章主要给大家介绍了关于swift相册相机权限处...

      hello老文12682021-01-08
    • SwiftSwift 基本数据类型详解总结

      Swift 基本数据类型详解总结

      在我们使用任何程序语言编程时，需要使用各种数据类型来存储不同的信息。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。在声明...

      Lucky_William4672021-12-26
    • SwiftSwift网络请求库Alamofire使用详解

      Swift网络请求库Alamofire使用详解

      这篇文章主要为大家详细介绍了Swift网络请求库Alamofire的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      lv灬陈强56682021-01-06
    • SwiftSwift算法之栈和队列的实现方法示例

      Swift算法之栈和队列的实现方法示例

      Swift语言中没有内设的栈和队列，很多扩展库中使用Generic Type来实现栈或是队列。下面这篇文章就来给大家详细介绍了Swift算法之栈和队列的实现方法，需要...

      李峰峰10002021-01-05
    • Swift详解Swift 之clipped是什么如何用

      详解Swift 之clipped是什么如何用

      这篇文章主要介绍了详解Swift 之clipped是什么如何用,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下...

      iCloudEnd8532021-05-28
    • SwiftSwift中排序算法的简单取舍详解

      Swift中排序算法的简单取舍详解

      对于排序算法, 通常简单的, 为大家所熟知的有, 选择排序, 冒泡排序, 快速排序, 当然还有哈希, 桶排序之类的, 本文仅比较最为常见的选择, 冒泡和快排，文...

      Castie111012021-01-10
    最近更新
    编辑推荐
    阅读排行
    热门标签
    并发系统 　 swift入门 　 fallthrough 　 面相对象编程 　 反初始化 　 自动引用计数 　 可选链 　 下拉刷新 　 uirefreshcontrol 　 SWRevealViewController 　 侧滑菜单 　 ThPullRefresh 　 异常抛出 　 坐标变换 　 导航控制器 　 UITabBarController 　 UIAlertController 　 Cocoa 　 swift学习 　 点击手势 　 初始化方法 　 swift 教程 　 可选类型 　 占位 　 类型创建 　 遍历方法 　 手势识别 　 地图坐标 　 弹簧动画 　 自动录音器 　
    © 2019-2022 服务器之家(www.tuohang.net) 版权所有关于我们联系我们版权申明网站地图