iOS Swift利用UICollectionView实现无限轮播功能(原理)详解
程序员文章站
2022-04-29 21:17:41
前言
作为一个资深(自认为)ios程序猿,会经常用到轮播图,上一次使用uiscrollview实现无限轮播的效果,这一次在swift语言中,我使用uicollection...
前言
作为一个资深(自认为)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实现轮播的原理在:,大家需要的话也可以了解一下。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
上一篇: 消防整顿