使用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: /255.0, green: /255.0, blue: /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 -  *  -  * ) /  +  +
         rect.origin.y =
         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
     }
     func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

         return
     }
     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 =    // 边界的间距
 let padding: CGFloat =      // 内部每个cell的间距
 let column: Int =       // 每页有多少列
 let row: Int =         // 每页有多少行

 class CustomLayout: UICollectionViewLayout {

     private var layoutAttr: [UICollectionViewLayoutAttributes] = []

     var totalCount: Int {  // 有多少cell
         get {
             return collectionView!.numberOfItemsInSection()
         }
     }

     var page: Int {
         get {
             let numOfPage: Int = column * row
             return totalCount / numOfPage +
         }
     }

     // 重写此方法，自定义想要的布局
     override func prepareLayout() {
         super.prepareLayout()

         // 这个方法最主要的任务是计算出每个cell的位置
         layoutAttr = []
         var indexPath: NSIndexPath
         for index in ..<totalCount {
             indexPath = NSIndexPath(forRow: index, inSection: )
             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 *  - CGFloat(column - ) * 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