這篇文章主要為大家展示了“iOS中Swift如何利用UICollectionView實現無限輪播功能”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“iOS中Swift如何利用UICollectionView實現無限輪播功能”這篇文章吧。
三亞網站建設公司成都創(chuàng)新互聯公司,三亞網站設計制作,有大型網站制作公司豐富經驗。已為三亞上1000+提供企業(yè)網站建設服務。企業(yè)網站搭建\外貿營銷網站建設要多少錢,請找那個售后服務好的三亞做網站的公司定做!
前言
作為一個資深(自認為)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偏移到最后一張圖片的位置?;瑒拥轿捕藭r是同理。
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實現無限輪播功能”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯行業(yè)資訊頻道!
本文題目:iOS中Swift如何利用UICollectionView實現無限輪播功能
文章起源:http://muchs.cn/article14/jpjsde.html
成都網站建設公司_創(chuàng)新互聯,為您提供網站維護、網站設計、網站內鏈、App開發(fā)、標簽優(yōu)化、網站排名
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯