How to do zoom in UICollectionView

Question

I have working uicollectionview codes with CustomCollectionViewLayout , and inside have a lot of small cells but user cannot see them without zoom. Also all cells selectable.

I want to add my collection view inside zoom feature !

My clear codes under below.

class CustomCollectionViewController: UICollectionViewController {

    var items = [Item]()


    override func viewDidLoad() {
        super.viewDidLoad()


        customCollectionViewLayout.delegate = self

        getDataFromServer()

}

 func getDataFromServer() {

        HttpManager.getRequest(url, parameter: .None) { [weak self] (responseData, errorMessage) -> () in

            guard let strongSelf = self else { return }

            guard let responseData = responseData else {
                print("Get request error \(errorMessage)")
                return
            }

            guard let customCollectionViewLayout = strongSelf.collectionView?.collectionViewLayout as? CustomCollectionViewLayout  else { return }

            strongSelf.items = responseData
            customCollectionViewLayout.dataSourceDidUpdate = true

            NSOperationQueue.mainQueue().addOperationWithBlock({ () -> Void in
                strongSelf.collectionView!.reloadData()
            })
        }
    }
}

extension CustomCollectionViewController {

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

    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return items[section].services.count + 1
    }

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


            cell.label.text = items[indexPath.section].base


        return cell

}

   override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath cellForItemAtIndexPath: NSIndexPath) {

     print(items[cellForItemAtIndexPath.section].base)


}

}

Also my UICollectionView layout properties under below you can see there i selected maxZoom 4 but doesnt have any action !

Thank you !

Answer 1

You don't zoom a collection like you'd zoom a simple scroll view. Instead you should add a pinch gesture (or some other zoom mechanism) and use it to change the layout so your grid displays a different number of items in the visible part of the collection. This is basically changing the number of columns and thus the item size (cell size). When you update the layout the collection can animate between the different sizes, though it's highly unlikely you want a smooth zoom, you want it to go direct from N columns to N-1 columns in a step.

Answer 2

I think what you're asking for looks like what is done in the WWDC1012 video entitled Advanced Collection Views and Building Custom Layouts (demo starts at 20:20) https://www.youtube.com/watch?v=8vB2TMS2uhE

You basically have to add pinchGesture to you UICollectionView, then pass the pinch properties (scale, center) to the UICollectionViewLayout (which is a subclass of UICollectionViewFlowLayout), your layout will then perform the transformations needed to zoom on the desired cell.