正文

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

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0711

无线轮播图的实现方式有很多，下面这篇文章主要给大家介绍了关于iOS Swift利用UICollectionView实现无限轮播功能（原理）的相关资料,需要的朋友可以参考下

前言

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

先上图：

iOS 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，大家需要的话也可以了解一下。

总结

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

原文链接：https://www.jianshu.com/p/0ba33e59a784