iOS Swift利用UICollectionView實(shí)現(xiàn)無(wú)限輪播功能(原理)詳解
前言
作為一個(gè)資深(自認(rèn)為)iOS程序猿,會(huì)經(jīng)常用到輪播圖,上一次使用UIScrollView實(shí)現(xiàn)無(wú)限輪播的效果,這一次在Swift語(yǔ)言中,我使用UICollectionView再為大家講解一次無(wú)限輪播的實(shí)現(xiàn)原理。
先上圖:
UICollectionView-無(wú)限輪播.gif
首先需要實(shí)現(xiàn)了就是UICollectionView的分頁(yè),這個(gè)很簡(jiǎn)單:
collectionView.isPagingEnabled = true
接下來(lái)就是原理,在UICollectionView的兩端需要先添加兩張圖片,首段需要添加最后一張圖片,而尾端需要添加第一張圖片,然后在中間的位置上一次添加各個(gè)圖片。這個(gè)其實(shí)是很容易實(shí)現(xiàn)的:
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 }
這樣在滑動(dòng)的時(shí)候,通過(guò)偏移量就可以實(shí)現(xiàn)無(wú)限輪播的效果了。當(dāng)滑動(dòng)停止時(shí)判斷偏移量,當(dāng)偏移量為0時(shí)(視圖上顯示的是最后一張圖片),這時(shí)候就直接調(diào)動(dòng)調(diào)整偏移量的方法,把UICollectionView偏移到最后一張圖片的位置?;瑒?dòng)到尾端時(shí)是同理。
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { /// 當(dāng)UIScrollView滑動(dòng)到第一位停止時(shí),將UIScrollView的偏移位置改變 if (scrollView.contentOffset.x == 0) { scrollView.contentOffset = CGPoint(x: CGFloat(self.imageNameList.count) * kScreenWidth,y: 0) self.pageControl.currentPage = self.imageNameList.count /// 當(dāng)UIScrollView滑動(dòng)到最后一位停止時(shí),將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 } }
其實(shí)原理很簡(jiǎn)單,個(gè)人認(rèn)為使用UICollectionView實(shí)現(xiàn)無(wú)限輪播比起UIScrollView更加實(shí)用并且便于維護(hù),接下來(lái)我將代碼全部列一下:
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() { /// 設(shè)置數(shù)據(jù) 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) { /// 當(dāng)UIScrollView滑動(dòng)到第一位停止時(shí),將UIScrollView的偏移位置改變 if (scrollView.contentOffset.x == 0) { scrollView.contentOffset = CGPoint(x: CGFloat(self.imageNameList.count) * kScreenWidth,y: 0) self.pageControl.currentPage = self.imageNameList.count /// 當(dāng)UIScrollView滑動(dòng)到最后一位停止時(shí),將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,喜歡的話(huà)可以點(diǎn)一下收藏哈,用UIScrollView實(shí)現(xiàn)輪播的原理在:http://www.dbjr.com.cn/article/148185.htm,大家需要的話(huà)也可以了解一下。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
詳解iOS開(kāi)發(fā)中解析JSON中的boolean類(lèi)型的數(shù)據(jù)遇到的問(wèn)題
這篇文章主要介紹了詳解iOS開(kāi)發(fā)中解析JSON中的boolean類(lèi)型的數(shù)據(jù)遇到的問(wèn)題,具有一定的參考價(jià)值,有興趣的可以了解一下。2016-12-12IOS程序開(kāi)發(fā)之禁止輸入表情符號(hào)實(shí)例代碼
如何禁止輸入表情符號(hào)呢?下面腳本之家小編給大家分享IOS程序開(kāi)發(fā)之禁止輸入表情符號(hào)實(shí)例代碼,感興趣的朋友參考下吧2016-04-04iOS 本地存儲(chǔ)NSUserDefaults封裝代碼
下面小編就為大家分享一篇iOS 本地存儲(chǔ)NSUserDefaults封裝代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01iOS app中無(wú)網(wǎng)絡(luò)頁(yè)面的添加方法詳解
這篇文章主要給大家介紹了關(guān)于iOS app中無(wú)網(wǎng)絡(luò)頁(yè)面的添加方法的相關(guān)資料,通過(guò)文中提供的方法可以很方便的給大家進(jìn)行提供一個(gè)提醒,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01IOS 基礎(chǔ)之設(shè)置 tableview 的分割線(xiàn)
這篇文章主要介紹了IOS 基礎(chǔ)之設(shè)置 tableview 的分割線(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-03-03ios實(shí)現(xiàn)tableView頂部彈簧圖片效果
這篇文章主要為大家詳細(xì)介紹了ios實(shí)現(xiàn)tableView頂部彈簧圖片效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08