使用UICollectionView實現首頁的滾動效果

實現類似這樣的效果，可以滾動大概有兩種實現方案

1. 使用scrollview來實現

2. 使用UICollectionView來實現

第一種比較簡單，而且相對於效能來說不太好，於是我們使用第二種方案

UICollectionView 的基礎知識再次就不做說明了，在網上隨便一搜都是一大把，我們就說說這個如何實現的吧，

其實很簡單

就這麼幾個檔案。

先看看控制器裡邊的程式碼 

import UIKit

class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource {

    var myCollectionView: UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        view.backgroundColor = UIColor(red: 220/255.0, green: 220/255.0, blue: 220/255.0, alpha: 1.0)
        
        setupCollectionView()
        
    }

  
    // set up collection view
    private func setupCollectionView() {
        
        let screenW = UIScreen.mainScreen().bounds.size.width;
        var rect = view.bounds
        rect.size.height = (screenW - 15 * 2 - 10 * 3) / 2 + 30 + 10
        rect.origin.y = 100
        myCollectionView = UICollectionView(frame: rect, collectionViewLayout: collectionLayout())
        myCollectionView.backgroundColor = UIColor.whiteColor()
        myCollectionView.pagingEnabled = true
        myCollectionView.showsHorizontalScrollIndicator = true
        myCollectionView.delegate = self
        myCollectionView.dataSource = self
        view.addSubview(myCollectionView)


      myCollectionView.registerClass(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell")
      
    }
    
    // set up layout
    private func collectionLayout() -> UICollectionViewLayout {
        
        let layout = CustomLayout()
        return layout;
    }
    
    
    //MARK:- collection view data source
    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        
        return 1
    }
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        
        return 26
    }
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        
        let cell: UICollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("CollectionViewCell", forIndexPath: indexPath)
    
        return cell
    }
    
    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        print(indexPath.row)
    }

}

就是在控制器中見了一個UICollectionView 所有的設定跟我們平時使用的一模一樣，唯一不同的地方就是我們自定義的佈局

import UIKit

let edgeMargin: CGFloat = 15   // 邊界的間距
let padding: CGFloat = 10     // 內部每個cell的間距
let column: Int = 4      // 每頁有多少列
let row: Int = 2        // 每頁有多少行


class CustomLayout: UICollectionViewLayout {
    
    private var layoutAttr: [UICollectionViewLayoutAttributes] = []
    
    var totalCount: Int {  // 有多少cell
        get {
            return collectionView!.numberOfItemsInSection(0)
        }
    }
    
    var page: Int {
        get {
            let numOfPage: Int = column * row
            return totalCount / numOfPage + 1
        }
    }
    
    // 重寫此方法，自定義想要的佈局
    override func prepareLayout() {
        super.prepareLayout()
        
        // 這個方法最主要的任務是計算出每個cell的位置
        layoutAttr = []
        var indexPath: NSIndexPath
        for index in 0..<totalCount {
            indexPath = NSIndexPath(forRow: index, inSection: 0)
            let attributes = layoutAttributesForItemAtIndexPath(indexPath)!
            
            layoutAttr.append(attributes)
        }
    }

    override func collectionViewContentSize() -> CGSize { // 返回滾動的Size，根據頁數計算出來
        return CGSizeMake(collectionView!.frame.size.width * CGFloat(page), collectionView!.frame.size.height)
    }
    
    override func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {
        return true
    }
    
    override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? {
        
        // 這個方法用來計算每一個cell的位置
        let att: UICollectionViewLayoutAttributes = UICollectionViewLayoutAttributes(forCellWithIndexPath: indexPath)
        
        let collectW: CGFloat = collectionView!.frame.size.width   // collection view 寬度
        let numOfPage: Int = column * row
        let pageIndex: Int = indexPath.row / numOfPage    // 當前cell處在哪一個頁
        let columnInPage: Int = indexPath.row % numOfPage % column   // 當前cell 在當前頁的哪一列，用來計算位置
        let rowInPage: Int = indexPath.row % numOfPage / column  // 當前cell 在當前頁的哪一行，用來計算位置
        // 計算寬度
        let cellW: CGFloat = (collectW - edgeMargin * 2 - CGFloat(column - 1) * padding) / CGFloat(column)
        // 高度
        let cellH: CGFloat = cellW
        // x
        let cellX: CGFloat = collectW * CGFloat(pageIndex) + edgeMargin + (cellW + padding) * CGFloat(columnInPage)
        // y
        let cellY :CGFloat = edgeMargin + (cellH + padding) * CGFloat(rowInPage)
        
        att.frame = CGRectMake(cellX, cellY, cellW, cellH)
        return att
    }
    
    override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        return layoutAttr
    }
    
    
}

prepareLayout 這個方法使我們自定義佈局的方法
只要我們自定義了這幾個方法就是實現了上邊圖片中的效果，

其實到這裡，就跟使用scrollviewview 差不多了。效果圖如下


下載地址 https://github.com/agelessman/ScrollItemView