前言
作为一个资深(自认为)ios程序猿，会经常用到轮播图，上一次使用uiscrollview实现无限轮播的效果，这一次在swift语言中，我使用uicollectionview再为大家讲解一次无限轮播的实现原理。
先上图：
uicollectionview-无限轮播.gif
首先需要实现了就是uicollectionview的分页，这个很简单：
?
|
1
|
collectionview.ispagingenabled = true
|
接下来就是原理，在uicollectionview的两端需要先添加两张图片，首段需要添加最后一张图片，而尾端需要添加第一张图片，然后在中间的位置上一次添加各个图片。这个其实是很容易实现的：
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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偏移到最后一张图片的位置。滑动到尾端时是同理。
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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更加实用并且便于维护，接下来我将代码全部列一下：
?
|
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
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实现轮播的原理在：http://www.zzvips.com/article/163332.html，大家需要的话也可以了解一下。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对快网idc的支持。
相关文章
猜你喜欢
- 64M VPS建站：如何选择最适合的网站建设平台？ 2025-06-10
- ASP.NET本地开发时常见的配置错误及解决方法？ 2025-06-10
- ASP.NET自助建站系统的数据库备份与恢复操作指南 2025-06-10
- 个人网站服务器域名解析设置指南：从购买到绑定全流程 2025-06-10
- 个人网站搭建：如何挑选具有弹性扩展能力的服务器？ 2025-06-10
