某科学的触手姬,公安部A级通缉令,私色房网
前言
作为一个资深(自认为)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实现轮播的原理在：，大家需要的话也可以了解一下。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
网友评论