UICollectionView的简单使用

显示简单的UICollectionView

import UIKit

class ViewController: UICollectionViewController {

  let allSectionColors = [
    UIColor.redColor(),
    UIColor.greenColor(),
    UIColor.blueColor()]
  
  override init(collectionViewLayout layout: UICollectionViewLayout) {
    super.init(collectionViewLayout: layout)
    
    collectionView!.registerClass(UICollectionViewCell.classForCoder(),
      forCellWithReuseIdentifier: "cell")
    
    collectionView!.backgroundColor = UIColor.whiteColor()
  }
  
  convenience required init(coder aDecoder: NSCoder) {
    
    let flowLayout = UICollectionViewFlowLayout()
    
    flowLayout.minimumLineSpacing = 20
    flowLayout.minimumInteritemSpacing = 10
    flowLayout.itemSize = CGSize(width: 80, height: 120);
    flowLayout.scrollDirection = .Vertical
    
    flowLayout.sectionInset =
      UIEdgeInsets(top: 10, left: 20, bottom: 10, right: 20)
    
    self.init(collectionViewLayout: flowLayout)
  }
  
  override func numberOfSectionsInCollectionView(
    collectionView: UICollectionView) -> Int{
      return allSectionColors.count
  }
  
  override func collectionView(collectionView: UICollectionView,
    numberOfItemsInSection section: Int) -> Int{
      return 3
  }
  
  override func collectionView(collectionView: UICollectionView,
    cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell{
      
      let cell = collectionView.dequeueReusableCellWithReuseIdentifier(
        "cell",
        forIndexPath: indexPath) as UICollectionViewCell
      
      cell.backgroundColor = allSectionColors[indexPath.section]
      
      return cell
      
  }
  
  override func prefersStatusBarHidden() -> Bool {
    return true
  }
  
}

效果如下：

xib文件定制Cell

import UIKit

class ViewController: UICollectionViewController {
  
  let allImages = [
    UIImage(named: "1"),
    UIImage(named: "2"),
    UIImage(named: "3")
  ]
  
  func randomImage() -> UIImage{
    return allImages[Int(arc4random_uniform(UInt32(allImages.count)))]!
  }
  
  override init(collectionViewLayout layout: UICollectionViewLayout) {
    super.init(collectionViewLayout: layout)
    
    let nib = UINib(nibName: "MyCollectionViewCell", bundle: nil)
    
    collectionView!.registerNib(nib, forCellWithReuseIdentifier: "cell")
    collectionView!.backgroundColor = UIColor.whiteColor()
  }
  
  convenience required init(coder aDecoder: NSCoder) {
    let flowLayout = UICollectionViewFlowLayout()
    
    flowLayout.minimumLineSpacing = 20
    flowLayout.minimumInteritemSpacing = 10
    flowLayout.itemSize = CGSize(width: 80, height: 120);
    flowLayout.scrollDirection = .Vertical
    
    flowLayout.sectionInset =
      UIEdgeInsets(top: 10, left: 20, bottom: 10, right: 20)
    
    self.init(collectionViewLayout: flowLayout)
  }
  
  override func numberOfSectionsInCollectionView(
    collectionView: UICollectionView) -> Int {
      return 3
  }
  
  override func collectionView(collectionView: UICollectionView,
    numberOfItemsInSection section: Int) -> Int {
      return 3
  }
  
  override func collectionView(collectionView: UICollectionView,
    cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
      
      let cell = collectionView.dequeueReusableCellWithReuseIdentifier(
        "cell", forIndexPath: indexPath) as! MyCollectionViewCell
      
      cell.imageViewBackgroundImage.image = randomImage()
      cell.imageViewBackgroundImage.contentMode = .ScaleAspectFit
      
      return cell
    
  }
  
}

xib文件如下：

效果如下：

触发事件

  override func collectionView(collectionView: UICollectionView,
    didSelectItemAtIndexPath indexPath: NSIndexPath){
      
      let selectedCell = collectionView.cellForItemAtIndexPath(indexPath)
      as UICollectionViewCell!
      
      UIView.animateWithDuration(animationDuration, animations: {
        selectedCell.alpha = 0
        }, completion: {[weak self] (finished: Bool) in
          UIView.animateWithDuration(self!.animationDuration, animations: {
            selectedCell.alpha = 1
            })
        })
      
  }
  
  override func collectionView(collectionView: UICollectionView,
    didHighlightItemAtIndexPath indexPath: NSIndexPath) {
    
      let selectedCell = collectionView.cellForItemAtIndexPath(indexPath)
      as UICollectionViewCell!
      
      UIView.animateWithDuration(animationDuration, animations: {
        selectedCell.transform = CGAffineTransformMakeScale(4, 4)
        })
      
  }
  
  override func collectionView(collectionView: UICollectionView,
    didUnhighlightItemAtIndexPath indexPath: NSIndexPath){
    
      let selectedCell = collectionView.cellForItemAtIndexPath(indexPath)
      as UICollectionViewCell!
      
      UIView.animateWithDuration(animationDuration, animations: {
        selectedCell.transform = CGAffineTransformIdentity
        })
      
  }

效果如下：

有一个大小和透明度的变化动画效果。

添加Header和Footer

    /* Register the header's nib */
    let headerNib = UINib(nibName: "Header", bundle: nil)
    collectionView!.registerNib(headerNib,
      forSupplementaryViewOfKind: UICollectionElementKindSectionHeader,
      withReuseIdentifier: "header")
    
    /* Register the footer's nib */
    let footerNib = UINib(nibName: "Footer", bundle: nil)
    collectionView!.registerNib(footerNib,
      forSupplementaryViewOfKind: UICollectionElementKindSectionFooter,
      withReuseIdentifier: "footer")

  /* Set the reference size for the header and the footer views */
  flowLayout.headerReferenceSize = CGSize(width: 300, height: 50)
  flowLayout.footerReferenceSize = CGSize(width: 300, height: 50)

  override func collectionView(collectionView: UICollectionView,
    viewForSupplementaryElementOfKind kind: String,
    atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
      
      var identifier = "header"
      if kind == UICollectionElementKindSectionFooter{
        identifier = "footer"
      }
      
      let view = collectionView.dequeueReusableSupplementaryViewOfKind(kind,
        withReuseIdentifier: identifier,
        forIndexPath: indexPath) as UICollectionReusableView
      
      if kind == UICollectionElementKindSectionHeader{
        if let header = view as? Header{
          header.label.text = "Section Header \(indexPath.section+1)"
        }
      }
      else if kind == UICollectionElementKindSectionFooter{
        if let footer = view as? Footer{
          let title = "Section Footer \(indexPath.section+1)"
          footer.button.setTitle(title, forState: .Normal)
        }
      }

      return view
    
  }

效果如下：