Change UICollectionViewCell size on different device orientations

Question

I am using an UICollectionView with UICollectionViewFlowLayout.

I set the size of each cell through the

collectionView:layout:sizeForItemAtIndexPath:

When switching from portrait to landscape, I would like to adjust the size of each cell to completely fit the size of the CollectionView, without leaving padding space between cells.

Questions:

1) How to change the size of a cell after a rotation event?

2) And, even better, how to make the layout where the cells always fit the entire size of the screen?

Answer 1

1) You could maintain and swap out multiple layout objects, but there's a simpler way. Just add the following to your UICollectionViewController subclass and adjust the sizes as required:

- (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);
}

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
    [self.collectionView performBatchUpdates:nil completion:nil];
}

Calling -performBatchUpdates:completion: will invalidate the layout and resize the cells with animation (you can just pass nil to both block params if you've no extra adjustments to perform).

2) Instead of hardcoding the item sizes in -collectionView:layout:sizeForItemAtIndexPath, just divide the height or width of the collectionView's bounds by the number of cells you want to fit on screen. Use the height if your collectionView scrolls horizontally or the width if it scrolls vertically.

Answer 2

If you don't want additional animations brought by performBatchUpdates:completion:, just use invalidateLayout to force the collectionViewLayout to reload.

- (void)viewWillLayoutSubviews
{
    [super viewWillLayoutSubviews];
    [self.collectionView.collectionViewLayout invalidateLayout];
}

Answer 3

I solved using two UICollectionViewFlowLayout. One for portrait and one for landscape. I assign them to my collectionView dinamically in -viewDidLoad

self.portraitLayout = [[UICollectionViewFlowLayout alloc] init];
self.landscapeLayout = [[UICollectionViewFlowLayout alloc] init];

UIInterfaceOrientation orientationOnLunch = [[UIApplication sharedApplication] statusBarOrientation];

if (UIInterfaceOrientationIsPortrait(orientationOnLunch)) {
    [self.menuCollectionView setCollectionViewLayout:self.portraitLayout];
} else {
    [self.menuCollectionView setCollectionViewLayout:self.landscapeLayout];
}

Then I simply modified my collectionViewFlowLayoutDelgate Methods like this

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    CGSize returnSize = CGSizeZero;

    if (collectionViewLayout == self.portraitLayout) {
        returnSize = CGSizeMake(230.0, 120.0);
    } else {
        returnSize = CGSizeMake(315.0, 120.0);
    }

    return returnSize;
}

Last I switch from a layout to one other on rotation

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation{
    if (UIInterfaceOrientationIsPortrait(fromInterfaceOrientation)) {
        [self.menuCollectionView setCollectionViewLayout:self.landscapeLayout animated:YES];
    } else {
        [self.menuCollectionView setCollectionViewLayout:self.portraitLayout animated:YES];
    }
}

Answer 4

There's a simple way to set collection view cell size:

UICollectionViewFlowLayout *layout = (id) self.collectionView.collectionViewLayout;
layout.itemSize = CGSizeMake(cellSize, cellSize);

Not sure if it's animatable though.

Answer 5

Swift : Collection View Cell that is n% of screen height

I needed was a cell that was a certain percentage of views height, and would resize with device rotation.

With help from above, here is the solution

override func viewDidLoad() {
    super.viewDidLoad()
    automaticallyAdjustsScrollViewInsets = false
    // if inside nav controller set to true
}

override func willRotateToInterfaceOrientation(toInterfaceOrientation: UIInterfaceOrientation, duration: NSTimeInterval) {
    collectionViewLayout.invalidateLayout()
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    return CGSize(width: 100, height: collectionView.frame.height * 0.9)
}

Answer 6

If you are using autolayout.You just need to invalidate layout in your view controller when rotating and adjust offset in your flow layout subclass.

So, In your view controller -

override func willRotateToInterfaceOrientation(toInterfaceOrientation:     UIInterfaceOrientation, duration: NSTimeInterval) {
    self.galleryCollectionView.collectionViewLayout.invalidateLayout()
}

And in your FlowLayout Subclass

override func prepareLayout() {
    if self.collectionView!.indexPathsForVisibleItems().count > 0{
    var currentIndex : CGFloat!
    currentIndex = CGFloat((self.collectionView!.indexPathsForVisibleItems()[0] as! NSIndexPath).row)
    if let currentVal = currentIndex{
        self.collectionView!.contentOffset = CGPointMake(currentIndex * self.collectionView!.frame.width, self.collectionView!.contentOffset.y);
    }   
    }     
}