Collection View does not update layout at Rotation

Question

This is the view of the app when it is in portrait mode.

When it is rotated to landscape mode it looks like this

The view debugger shows that the UIWindow is not rotating as shown here

The UICollectionViewController is created via StoryBoard. I've tried subclassing UICollectionViewFlowLayout that implements shouldInvalidateLayoutForBoundsChange, but it does not fix my issue.

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
    CGRect oldBounds = self.collectionView.bounds;
    if (CGRectGetWidth(newBounds) != CGRectGetWidth(oldBounds)) {
        return YES;
    }
    return NO;
}

Please provide ideas of what to check next or requests for additional code to debug.

Edit - As suggested by MirekE, I attempted to add constraints to the CollectionView but was unable. All of the options for Editor->Pin are unavailable for the CollectionView.

Edit, response to Andrea -

I'm targeting iOS8.3. My understanding is that the main method called at rotation is viewWillTransitionToSize:withTransitionCoordinator:, which is from the UIContentContainer protocol. I've added the following to my CollectionViewController, but same problem persists

-(void)viewWillTransitionToSize:(CGSize)size
      withTransitionCoordinator:(id <UIViewControllerTransitionCoordinator>)coordinator {
    [self.collectionView.collectionViewLayout invalidateLayout];
    [self.collectionView reloadData];
}

Answer 1

The problem was that the collectionView outlet was not properly set. After setting the collectionView, all works properly.

collectionView outlet not set:

collectionView outlet set:

Answer 2

I don't know which iOS version you ara targeting, but let me suppose that you know the rotation process and methods called in the view controller while it's happening.
In one of those methods you just need to call:

[self.collectionView.collectionViewLayout invalidateLayout];

and maybe depending on your layout -reloadData
No need to subclass.

EDIT

I use this method, I guess that is not working because you should relayout the collection after it has resized:

- (void) willTransitionToTraitCollection:(UITraitCollection *)newCollection withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
    [super willTransitionToTraitCollection:newCollection withTransitionCoordinator:coordinator];


    [coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
        [self.collectionView.collectionViewLayout invalidateLayout];            
    } completion:^(id<UIViewControllerTransitionCoordinatorContext> context) {
        [self.collectionView reloadData];
    }];

}

What I'm doing attach the layout invalidation process to the animation process.

Answer 3

It looks like you just drag the collection view on the canvas, but did not add any constraints. So when you rotate the device, the size does not change.

In the storyboard select the collection view, then click on the Pin icon at the bottom of Xcode and add constraints for the top, left, bottom and right margins. After you do that, the collection view should resize on rotation.

Answer 4

If you have custom implementation of UICollectionViewLayout, try to override methods:

override public func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {
    let bounds = self.collectionView!.bounds;
    return ((CGRectGetWidth(newBounds) != CGRectGetWidth(bounds) ||
        (CGRectGetHeight(newBounds) != CGRectGetHeight(bounds))));
}

override public func invalidateLayout() {
    cache.removeAll()  // remove layout attributes ans settings if they exist
    super.invalidateLayout()

}

Cheers !