Swift 使用CollectionView 實現圖片輪播封裝就是這樣簡單

前言: 這篇你能夠學會自定義視圖,建立collectionView,協議的使用,定時器;

自制圖片

先上Demo:Github上封裝好的下載即用, 好用請Star Thanks
首先新建一個繼承於UIView的視圖, 且用collectionView實現因此須要簽定兩個協議代碼以下:

let sectionNum: Int = 100 // 區的數量 let width = UIScreen.mainScreen().bounds.size.width // 屏幕寬度 let height = UIScreen.mainScreen().bounds.size.width // 屏幕高度 // 由於要實現輪播圖片能夠點擊定義一個協議 // 協議 protocol XTCycleViewDelegate { func didSelectIndexCollectionViewCell(index: Int)->Void }

class XTCycleScrollView: UIView, UICollectionViewDelegate, UICollectionViewDataSource{

使用到的變量以及建立視圖

var delegate: XTCycleViewDelegate? var cycleCollectionView: UICollectionView? var images = NSMutableArray() var pageControl = UIPageControl() var flowlayout = UICollectionViewFlowLayout() var timer = NSTimer() override init(frame: CGRect) { super.init(frame: frame) self.createSubviews(frame) } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") }

佈局必要的UI以及建立定時器

func createSubviews(frame: CGRect){ cycleCollectionView = UICollectionView.init(frame: CGRectMake(0, 0, frame.size.width, frame.size.height), collectionViewLayout: flowlayout) flowlayout.itemSize = CGSizeMake(frame.size.width, frame.size.height); flowlayout.minimumInteritemSpacing = 0; flowlayout.minimumLineSpacing = 0; flowlayout.scrollDirection = UICollectionViewScrollDirection.Horizontal; cycleCollectionView!.backgroundColor = UIColor.lightGrayColor() cycleCollectionView!.pagingEnabled = true cycleCollectionView!.dataSource = self cycleCollectionView!.delegate = self cycleCollectionView!.showsHorizontalScrollIndicator = false cycleCollectionView!.showsVerticalScrollIndicator = false cycleCollectionView!.registerClass(ZJCustomCycleCell.self, forCellWithReuseIdentifier: "cellId") self.addSubview(cycleCollectionView!) pageControl = UIPageControl.init(frame: CGRectMake(0, 0, frame.size.width / 2, 30)) pageControl.center = CGPointMake(frame.size.width / 2, frame.size.height - 20); self.addSubview(pageControl); self.addTimer() }

定時器初始化

func addTimer(){ let timer1 = NSTimer.init(timeInterval: 2, target: self, selector: "nextPageView", userInfo: nil, repeats: true) NSRunLoop.currentRunLoop().addTimer(timer1, forMode: NSRunLoopCommonModes) timer = timer1 }

銷燬定時器

func removeTimer(){ self.timer.invalidate() }

實現循環滾動

func returnIndexPath()->NSIndexPath{ var currentIndexPath = cycleCollectionView!.indexPathsForVisibleItems().last currentIndexPath = NSIndexPath.init(forRow: (currentIndexPath?.row)!, inSection: sectionNum / 2) cycleCollectionView!.scrollToItemAtIndexPath(currentIndexPath!, atScrollPosition: UICollectionViewScrollPosition.Left, animated: false) return currentIndexPath!; } func nextPageView(){ let indexPath = self.returnIndexPath() var item = indexPath.row + 1; var section = indexPath.section; if item == images.count { item = 0 section++ } self.pageControl.currentPage = item; let nextIndexPath = NSIndexPath.init(forRow: item, inSection: section) cycleCollectionView!.scrollToItemAtIndexPath(nextIndexPath, atScrollPosition: UICollectionViewScrollPosition.Left, animated: true) }

collectionView Delegate

// 重用池 func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { // 這裏使用的自定義cell, 下面會貼出自定義cell代碼 let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cellId", forIndexPath: indexPath) as! ZJCustomCycleCell // 這個Label實現顯示數字,表示是第幾張圖片 cell.labelTitle.text = NSString(format: "%d", indexPath.row) as String // 這裏是圖片賦值 let url:String = self.images[indexPath.row] as! String // 這裏我使用的是一個賦值圖片的三方庫,看本身喜愛,爲方便我沒有本身寫 cell.imageView.hnk_setImageFromURL(NSURL.init(string: url)!) return cell } func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int { return sectionNum } func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { // 在這裏給出了pageControl的數量 pageControl.numberOfPages = images.count return images.count }

// 從新添加定時器 func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) { self.addTimer() } // 手動滑動的時候銷燬定時器 func scrollViewWillBeginDragging(scrollView: UIScrollView) { self.removeTimer() }

設置當前的pagecontrol

func scrollViewDidEndDecelerating(scrollView: UIScrollView) { let page = (Int(scrollView.contentOffset.x) / Int(width)) % images.count pageControl.currentPage = page }

點擊方法

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) { self.delegate?.didSelectIndexCollectionViewCell(indexPath.row) }

下面是我在自定義cell中的代碼

var urlImage: String = "" var imageView = UIImageView() var labelTitle = UILabel() override init(frame: CGRect) { super.init(frame: frame) self.createSubviews(frame) } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } func createSubviews(frame: CGRect){ imageView = UIImageView.init(frame: CGRectMake(0, 0, frame.size.width, frame.size.height)) self.contentView.addSubview(imageView) labelTitle = UILabel.init(frame: CGRectMake(10, 10, 30, 30)) imageView.addSubview(labelTitle) }

封裝基本完成了, 下面看看如何使用

// 建立 let cycle = XTCycleScrollView.init(frame: CGRectMake(0, 70, width, 175)) // 要實現點擊須要制定代理人 cycle.delegate = self; // 圖片連接數組 let images: NSMutableArray = ["", "", "", ""] // 數組賦值 cycle.images = images self.view.addSubview(cycle)

實現代理方法

func didSelectIndexCollectionViewCell(index: Int) { print("\\(index)") }

總結: 這樣就實現了簡單的圖片輪播效果,而且帶有點擊方法, 都看到這裏就點個贊吧. 哈哈

文／夏自然後（簡書做者） 原文連接：http://www.jianshu.com/p/f5fa66699a96 著做權歸做者全部，轉載請聯繫做者得到受權，並標註「簡書做者」。