使用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