作为一个资深(自认为)iOS程序猿,会经常用到轮播图,上一次使用UIScrollView实现无限轮播的效果,这一次在斯威夫特语言中,我使用UICollectionView再为大家讲解一次无限轮播的实现原理。
collectionView。isPagingEnabled=true
接下来就是原理,在UICollectionView的两端需要先添加两张图片,首段需要添加最后一张图片,而尾端需要添加第一张图片,然后在中间的位置上一次添加各个图片。这个其实是很容易实现的:
func collectionView (_ collectionView: UICollectionView cellForItemAt indexPath: indexPath)→UICollectionViewCell {
让细胞=collectionView.dequeueReusableCell (withReuseIdentifier:“ImageCollectionViewCell”: indexPath)一样!ImageCollectionViewCell///给图片赋值(在首尾分别添加两张图片)
如果(indexPath。行==0){
细胞。imageName=imageNameList.last
如果(indexPath}其他。行==self.imageNameList。数+ 1){
细胞。imageName=imageNameList.first
其他}{
细胞。imageName=imageNameList [indexPath。行- 1)
}
返回单元格
}
这样在滑动的时候,通过偏移量就可以实现无限轮播的效果了。当滑动停止时判断偏移量,当偏移量为0时(视图上显示的是最后一张图片),这时候就直接调动调整偏移量的方法,把UICollectionView偏移到最后一张图片的位置。滑动到尾端时是同理。
func scrollViewDidEndDecelerating(_滚动视图:UIScrollView) {///当UIScrollView滑动到第一位停止时,将UIScrollView的偏移位置改变
如果(scrollView.contentOffset。x==0) {
滚动视图。内容偏移=CGPoint (x: CGFloat (self.imageNameList.count) * kScreenWidth, y: 0)
self.pageControl。当前页=self.imageNameList.count///当UIScrollView滑动到最后一位停止时,将UIScrollView的偏移位置改变
如果(scrollView.contentOffset}其他。x==CGFloat (self.imageNameList。数+ 1)* kScreenWidth) {
滚动视图。内容偏移=CGPoint (x: kScreenWidth y: 0)
self.pageControl。当前页=0
其他}{
self.pageControl。当前页=Int (scrollView.contentOffset。x/kScreenWidth) - 1
}
}
其实原理很简单,个人认为使用UICollectionView实现无限轮播比起UIScrollView更加实用并且便于维护,接下来我将代码全部列一下:
进口UIKit
让kScreenWidth=UIScreen.main.bounds.width
类ViewController: ui {
懒惰的var collectionView: UICollectionView={
让flowLayout=UICollectionViewFlowLayout ()
flowLayout。minimumLineSpacing=0
flowLayout。minimumInteritemSpacing=0
flowLayout。scrollDirection=.horizontal
flowLayout。itemSize=CGSize(宽度:kScreenWidth,身高:200)
让collectionView=UICollectionView(框架:CGRect中(x: 0, y: 0,宽度:UIScreen.main.bounds。宽度,高度:200),collectionViewLayout flowLayout):
collectionView。isPagingEnabled=true
collectionView。showsHorizontalScrollIndicator=false
collectionView。写成backgroundColor=UIColor.white
collectionView.delegate=自我
collectionView。数据源=自我
self.view.addSubview (collectionView)
返回collectionView
}()
懒惰的var pageControl: UIPageControl={
让pageControl=UIPageControl(框架:CGRect中(x: 0 y: 150,宽度:kScreenWidth,高度:50))
pageControl。numberOfPages=self.imageNameList.count
pageControl。当前页=0
pageControl。tintColor=UIColor.black
pageControl。pageIndicatorTintColor=UIColor.gray;
返回pageControl;
}()
懒惰的var imageNameList: [String]={
让imageList=[“image0”、“image1”,“image2”、“image3”)
返回imageList
}()
覆盖func viewDidLoad () {
super.viewDidLoad ()
setupController ()
}
func setupController () {///设置数据
collectionView.register (ImageCollectionViewCell。自我,forCellWithReuseIdentifier:“ImageCollectionViewCell”)
collectionView.reloadData ()
collectionView。scrollToItem (: IndexPath(行:1、部分:0):.left,动画:false)
self.view.addSubview (pageControl)
}
}
扩展ViewController: UICollectionViewDataSource {
func collectionView (_ collectionView: UICollectionView numberOfItemsInSection部分:Int)→Int {///这步只是防止崩溃
如果(imageNameList。数==0){
返回0
}
imageNameList返回。数+ 2
}
func collectionView (_ collectionView: UICollectionView cellForItemAt indexPath: indexPath)→UICollectionViewCell {
让细胞=collectionView.dequeueReusableCell (withReuseIdentifier:“ImageCollectionViewCell”: indexPath)一样!ImageCollectionViewCell///给图片赋值(在首尾分别添加两张图片)
如果(indexPath。行==0){
细胞。imageName=imageNameList.last
如果(indexPath}其他。行==self.imageNameList。数+ 1){
细胞。imageName=imageNameList.first
其他}{
细胞。imageName=imageNameList [indexPath。行- 1)
}
返回单元格
}
}
扩展ViewController: UICollectionViewDelegate {
func scrollViewDidEndDecelerating(_滚动视图:UIScrollView) {///当UIScrollView滑动到第一位停止时,将UIScrollView的偏移位置改变
如果(scrollView.contentOffset。x==0) {
滚动视图。内容偏移=CGPoint (x: CGFloat (self.imageNameList.count) * kScreenWidth, y: 0)
self.pageControl。当前页=self.imageNameList.count///当UIScrollView滑动到最后一位停止时,将UIScrollView的偏移位置改变
如果(scrollView.contentOffset}其他。x==CGFloat (self.imageNameList。数+ 1)* kScreenWidth) {
滚动视图。内容偏移=CGPoint (x: kScreenWidth y: 0)
self.pageControl。当前页=0
其他}{
self.pageControl。当前页=Int (scrollView.contentOffset。x/kScreenWidth) - 1
}
}
}///collectionView图片的细胞
类ImageCollectionViewCell: UICollectionViewCell {///显示的图片
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
