iOS中Swift如何利用UICollectionView實現無限輪播功能

這篇文章主要為大家展示了“iOS中Swift如何利用UICollectionView實現無限輪播功能”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“iOS中Swift如何利用UICollectionView實現無限輪播功能”這篇文章吧。

前言

作為一個資深(自認為)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")
 } 
}

以上是“iOS中Swift如何利用UICollectionView實現無限輪播功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！