展开、查看列表项最自然天成的 Peek/Pop 用法及动画效果

shot on dribbble:

The iPhone mockup available here.

Requirements

Installation

Just add the Source folder to your project.

or use CocoaPods with Podfile:

pod 'expanding-collection', '~> 0.0.2'

Usage

import expanding_collection

Create CollectionViewCell

1) Create UICollectionViewCell inherit from BasePageCollectionCell (recommend create cell with xib file)

2) Adding FrontView

• add a view to YOUCELL.xib and connect it to @IBOutlet weak var frontContainerView: UIView!
  

• add width, height, centerX and centerY constraints (width and height constranints must equal cellSize)

  

• connect centerY constraint to @IBOutlet weak var frontConstraintY: NSLayoutConstraint!
• add any desired uiviews to frontView

3) Adding BackView

• repeat step 3 (connect outlets to @IBOutlet weak var backContainerView: UIView!, @IBOutlet weak var backConstraintY: NSLayoutConstraint!)

4) Cell example DemoCell

If set tag = 101 for any FrontView.subviews this view will be hidden during the transition animation

Create CollectionViewController

1) Create a UIViewController inheriting from ExpandingViewController

2) Register Cell and set Cell size:

  override func viewDidLoad() {
      itemSize = CGSize(width: 214, height: 264)
      super.viewDidLoad()

      // register cell
      let nib = UINib(nibName: "CellIdentifier", bundle: nil)
      collectionView?.registerNib(nib, forCellWithReuseIdentifier: String(DemoCollectionViewCell))
  }

3) Add UICollectionViewDataSource methods

extension YourViewController {

  override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return items.count
  }

  override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("CellIdentifier"), forIndexPath: indexPath)
    // configure cell
    return cell
  }
}

4) Open Cell animation

override func viewDidLoad() { itemSize = CGSize(width: 214, height: 264) super.viewDidLoad()

// register cell
let nib = UINib(nibName: "CellIdentifier", bundle: nil)
collectionView?.registerNib(nib, forCellWithReuseIdentifier: String(DemoCollectionViewCell))

  func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {

      cell.cellIsOpen(!cell.isOpened)
    }

override func viewDidLoad() {
    super.viewDidLoad()
    headerHeight = ***
}  

  if cell.isOpened == true {
    let vc: YourTableViewController = // ... create view controller  
    pushToViewController(vc)
  }