How do I define the size of a CollectionView on rotate

Question

I have a viewcontroller with 2 CollectionView Controllers.

I would like on rotation that only one of the collection views resize to a custom size while the other remains the same.

I have tried to use:

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout  *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
  {    
     // Adjust cell size for orientation
     if (UIDeviceOrientationIsLandscape([[UIApplication sharedApplication] statusBarOrientation])) {
        return CGSizeMake(170.f, 170.f);
     }
    return CGSizeMake(192.f, 192.f);
}

However that just changes both collectionviews. How do I get it to be specific to only one collection?

looks like it should work on iOS11 without any tricks – dollar2048 Mar 12 '18 at 20:34 — dollar2048, Mar 12 '18 at 20:34

Oliver Atkinson · Accepted Answer · 2015-07-22T10:06:04.397

65

Heres my 2 cents - because your item sizes are static why don't you set the item size on the collectionViewLayout?

It will be quicker to do this rather than expecting the collection view to call its delegate method for every cell.

viewWillLayoutSubviews can be used for detection of rotation on view controllers. invalidateLayout can be used on a collection view layout to force it to prepare the layout again causing it to position the elements with the new sizes in this case.

- (void)viewWillLayoutSubviews;
{
    [super viewWillLayoutSubviews];
    UICollectionViewFlowLayout *flowLayout = (id)self.firstCollectionView.collectionViewLayout;

    if (UIInterfaceOrientationIsLandscape(UIApplication.sharedApplication.statusBarOrientation)) {
        flowLayout.itemSize = CGSizeMake(170.f, 170.f);
    } else {
        flowLayout.itemSize = CGSizeMake(192.f, 192.f);
    }

    [flowLayout invalidateLayout]; //force the elements to get laid out again with the new size
}

edit: updated with Swift2.0 example

override func viewWillLayoutSubviews() {
  super.viewWillLayoutSubviews()

  guard let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else {
    return
  }

  if UIInterfaceOrientationIsLandscape(UIApplication.sharedApplication().statusBarOrientation) {
    flowLayout.itemSize = CGSize(width: 170, height: 170)
  } else {
    flowLayout.itemSize = CGSize(width: 192, height: 192)
  }

  flowLayout.invalidateLayout()
}

edited Jul 22 '15 at 10:06

answered Sep 24 '13 at 18:48

Oliver Atkinson

7,970
32
43

1

This works however I am now getting a warning that states: Incompatible pointer types initializing 'UICollectionViewFlowLayout *' with an expression of type 'UICollectionViewLayout *' – Robert Farr Sep 24 '13 at 19:43
you will need to cast the collectionViewLayout, i will adjust the answer now @RobertFarr – Oliver Atkinson Sep 24 '13 at 19:44
@OliverAtkinson tks. it's already worked with my app. but what is happen when in each cell, i have 1 imageview? after resize collection view cell, but image did'nt load, i have to reload or swipe left / right to get image update. how can i update/ reload these imageview ? – TomSawyer Aug 30 '14 at 19:25
@TomSawyer you can use reloadItemsAtIndexPath if the data has changed - but rotation should not affect the underlying data and should not require a reload of the data if it is already there. – Oliver Atkinson Sep 01 '14 at 07:27
@OliverAtkinson I've changed itemSize after rotate but imageview in cell will not fit with new itemSize. Here is screenshot: http://i.stack.imgur.com/dEjY8.png , so, i have to swipe left / right to update imageView or use collectionView.reloadData() to get imageView fit with new cell itemSize like this http://i.stack.imgur.com/XB9AA.jpg . Any better way to solve it , i heard about constraint ? – TomSawyer Sep 01 '14 at 08:58
Are you using autolayout? make the imageView leading and trailing constraints to the superview - or if not turn all its autoresizing masks on and make it the full size of the cell – Oliver Atkinson Sep 01 '14 at 09:25
Thanks. Worked for me. – Pushpa Y Jul 06 '18 at 05:39

Tomasz Bąk · Answer 2 · 2016-07-13T07:38:22.473

With new API since iOS 8 I'm using:

Swift 3:

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
    updateCollectionViewLayout(with: size)
}

private func updateCollectionViewLayout(with size: CGSize) {
    if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
        layout.itemSize = (size.width < size.height) ? itemSizeForPortraitMode : itemSizeForLandscapeMode
        layout.invalidateLayout()
    }
}

Objective-C:

- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
        [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
        [self updateCollectionViewLayoutWithSize:size];
}

- (void)updateCollectionViewLayoutWithSize:(CGSize)size {
        UICollectionViewFlowLayout *layout = (UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout;
        layout.itemSize = (size.width < size.height) ? itemSizeForPortraitMode : itemSizeForLandscapeMode;
        [layout invalidateLayout];
}

score 15 · Answer 3 · answered Dec 15 '15 at 10:57

The Verified Answer Is Not Efficient

The Problem - Invalidating the layout in viewWillLayoutSubviews() is heavy work. viewWillLayoutSubviews() gets called multiple times when a ViewController is instantiated.

My Solution (Swift) - Embed your size manipulation within the UICollectionViewDelegateFlowLayout.

// Keep a local property that we will always update with the latest 
// view size.
var updatedSize: CGSize!

// Use the UICollectionViewDelegateFlowLayout to set the size of our        
// cells.
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    // We will set our updateSize value if it's nil.
    if updateSize == nil {
        // At this point, the correct ViewController frame is set.
        self.updateSize = self.view.frame.size
    }

    // If your collectionView is full screen, you can use the 
    // frame size to judge whether you're in landscape.
    if self.updateSize.width > self.updateSize.height {
        return CGSize(width: 170, 170)
    } else {
        return CGSize(width: 192, 192)
    }
}

// Finally, update the size of the updateSize property, every time 
// viewWillTransitionToSize is called.  Then performBatchUpdates to
// adjust our layout.
override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransitionToSize(size, withTransitionCoordinator: coordinator)
    self.updateSize = size
    self.collectionView!.performBatchUpdates(nil, completion: nil)
}

Instead of saving the size and calling performBatchUpdates, all you need to do is call self.collectionView!.collectionViewLayout.invalidateLayout() Then in sizeForItemAtIndexPath simply get the new bounds from the view/collectionView — Gene De Lisa, May 03 '16 at 13:10

score 3 · Answer 4 · answered Sep 24 '13 at 18:34

You can change your if statement. You will need to have a reference to the collection views

if (UIDeviceOrientationIsLandscape([[UIApplication sharedApplication] statusBarOrientation]) && collectionView == self.firstCollectionView) {
   return CGSizeMake(170.f, 170.f);
}

score 2 · Answer 5 · answered Oct 11 '15 at 18:35

The question was , how to separate two collection views in sizeForItemAtIndexPath. Why just not something like this?

 func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

    if collectionView == firstCollectionView{

            return CGSize(width: self.frame.width/3, height: 40)
       }


    else if collectionView == secondCollectionView{

        return CGSize(width: self.frame.width, height: self.frame.height-2)
    }

    abort()
}

score 1 · Answer 6 · answered Sep 15 '16 at 21:10

I've solved this problem by checking the rotation of the device and then reloading the layout. Checking the screen size and using this size to display my cell.

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
    //get new width of the screen
    screenRect = [[UIScreen mainScreen] bounds];
    screenWidth = screenRect.size.width;

    //if landscape mode
    if (UIDeviceOrientationIsLandscape([UIDevice currentDevice].orientation))
    {
        screenDivide = 5;
    }
    else
    {
        screenDivide = 3;
    }

    //reload the collectionview layout after rotating
    UICollectionViewFlowLayout *layout = (UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout;
    [layout invalidateLayout];
}

Then I defined the cells like this

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    screenRect = [[UIScreen mainScreen] bounds];
    screenWidth = screenRect.size.width;

    CGSize elementSize = CGSizeMake(screenWidth/screenDivide, 100);
    return elementSize;
}

score -2 · Answer 7 · answered Sep 24 '13 at 17:36

I've handled this by detecting the orientation change in the setBounds: method. We subclass the UICollectionView and override the setBounds: method (see below). In flowLayoutForGallerySize we create a new UICollectionViewFlowLayout with different spacing and itemSize depending on the size of the collection view.

- (void)setBounds:(CGRect)bounds
{
    // detect orientation changes and update itemSize in the flow layout
    CGSize oldSize = self.bounds.size;

    [super setBounds:bounds];

    BOOL wasLandscape = (oldSize.width > oldSize.height);
    BOOL nowLandscape = (bounds.size.width > bounds.size.height);

    if (wasLandscape != nowLandscape) {
        // create a new flow layout object for the new gallery size
        self.flowLayout = [self flowLayoutForGallerySize:bounds.size];

        // change to the new flow layout
        [self setCollectionViewLayout:self.flowLayout animated:NO];

        DLog(@"orientation change to %@", NSStringFromCGSize(bounds.size));
    }
}

The code I posted works fine for resizing, however I want it to only resize one of the 2 seperate collection views — Robert Farr, Sep 24 '13 at 17:58
Why don't you just look at the collectionView: parameter to see which one is being passed in and only apply it when its the right one?? — progrmr, Sep 24 '13 at 22:23

How do I define the size of a CollectionView on rotate

7 Answers7

Linked