Proper way to manage collection view cell layout on orientation change - ios

Question

I have few cells on my UICollectionView and on rotations the number of rows and columns changes. I am able to achieve this with:
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
{
if UIDevice.currentDevice().orientation.isPortrait.boolValue{
return CGSizeMake((collectionView.frame.size.width-2)/2, (collectionView.frame.size.height - 4)/3)
}
else{
return CGSizeMake((collectionView.frame.size.width-4)/3, (collectionView.frame.size.height - 4)/3)
}
}
All is well and fine until device is rotated. For rotation I have reloaded the collection view like this
override func didRotateFromInterfaceOrientation(fromInterfaceOrientation: UIInterfaceOrientation) {
myCollectionView!.reloadData()
}
The end result looks like this.(Sorry for bad gif)
The desired number of cells is achieved. But as you can see from the link, for a brief second there is a gap noticed when rotation occurs. This effect is not desired. Also it is bad to keep reloading the UICollectionView again and again just to fix the layout. I am able to achieve what I want but not in a proper way. Some expert ideas will be appreciated.

Answer 1

Here is a solution assuming you have a UICollectionViewFlowLayout:
First, add this to your ViewController:
NSNotificationCenter.defaultCenter().addObserver(self, selector: #selector(ResultsCollectionViewController.orientationDidChange(_:)), name: UIDeviceOrientationDidChangeNotification, object: nil)
Don't forget to remove self when VC is closed:
deinit {
NSNotificationCenter.defaultCenter().removeObserver(self)
}
Then implement the selector method :
func orientationDidChange(notification: NSNotification) {
collectionView!.collectionViewLayout.invalidateLayout()
}
Basically you just send a notification when the device orientation changes, then the selector invalidates your layout so that it gets refreshed.
EDIT :
Here is a basic UICollectionViewFlowLayout setup method :
func setupCollectionViewLayout(minimumInteritemSpacing minimumInteritemSpacing: CGFloat, minimumLineSpacing: CGFloat) {
let layout = UICollectionViewFlowLayout()
layout.minimumInteritemSpacing = minimumInteritemSpacing
layout.minimumLineSpacing = minimumLineSpacing
collectionView?.collectionViewLayout = layout
}
Then in viewDidLoad you can call :
// Setup a layout
setupCollectionViewLayout(minimumInteritemSpacing: 0, minimumLineSpacing: 0)
If you wish to use a UICollectionViewDelegateFlowLayout, you can use the following template, but keep in mind that you have to adapt it !
// ----------------------------------------------------------------------------------
// MARK: - UICollectionViewDelegateFlowLayout
// ----------------------------------------------------------------------------------
extension ResultsCollectionViewController: UICollectionViewDelegateFlowLayout {
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
switch UIDevice.currentDevice().userInterfaceIdiom {
case .Phone:
return CGSize(width: self.view.frame.width, height: 100.0)
case .Pad:
return CGSize(width: self.view.frame.width/2.0, height: 100.0)
default:
return CGSize(width: self.view.frame.width, height: 100.0)
}
}
}