Expanding UICollectionView and its cell when tapped

Question

I am trying to make a transition animation like the demonstration in the link here. So when I clicked the cell, it expands and covers the whole screen.

Here are my codes(I have to admit that I am not familiar with CollectionView)`

import UIKit

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

@IBOutlet weak var mainDesLabel: UILabel!
@IBOutlet weak var collectionView: UICollectionView!
@IBOutlet weak var secDesLabel: UILabel!
let searchBar = UISearchBar()

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    self.collectionView.delegate   = self
    self.collectionView.dataSource = self
    self.collectionView.backgroundColor = UIColor.clearColor()
    ////////////////////////////////////////////////////////////////////////
    self.searchBar.frame = CGRect(x: 175, y: 0, width: 200, height: 50)
    self.searchBar.searchBarStyle = UISearchBarStyle.Minimal
    self.searchBar.backgroundColor = UIColor.whiteColor()
    self.view.addSubview(searchBar)
    ////////////////////////////////////////////////////////////////////////
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 10
}

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as UICollectionViewCell

    cell.layer.cornerRadius = 5

    return cell
}



func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return 1
}

//Use for size
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
    self.collectionView.frame = self.view.bounds
    let cell = collectionView.cellForItemAtIndexPath(indexPath)
    cell!.frame = CGRectMake(0, 0, self.view.bounds.width, self.view.bounds.height)
}


}

So I thought use 'didSelectItemAtIndexPath' would help, however it turns out like this

thoughts? Any help would be highly appreciated!

Answer 1

You cannot just use didSelectItemAtIndexPath or any similar methods to update the size of a UICollectionViewCell once the UICollectionView is done performing the view layout.

To update cell height, You can first capture which cell had been tapped in didSelectItemAtIndexPath. Then, you can either reload the entire collection view with the new cell frame being passed in the sizeForItemAtIndexpath. Or, you can just reload the specific cell with reloadItemsAtIndexPaths, but you still need to pass the updated size of the cell via sizeForItemAtIndexpath.

UPDATE I now see the question details have been updated by an animation which you desire to have.

I had performed a similar animation by:-

1. Capturing the cell which had been tapped in didSelectItemAtIndexPath.
2. Adding a replica view to the UIViewContrller, but with its frame totally coinciding with the cell which had been tapped.
3. Then, animating this view which had been added. Thus giving an impression that the cell was animated.

Any additional functionality which has to be given can also be written in this view. Thus the code of the cell and the animated view is separated too.