iOS UICollectionvView cell different layout for landscape and portrait

Question

I want make screen in which collection view Cell should fill whole width of screen while device is in portrait , and when device rotates collection view shows 2 cells in 1 section.

For better visualisation see below image.

enter image description here

I tried to make cell width = device width (for portrait) but in landscape cell shows in centre of screen.

Will it possible to make such design using collection view ? If it is possible then how do I achieve this? OR any other idea will be appreciated.

I think your question is very similar to http://stackoverflow.com/questions/13556554/change-uicollectionviewcell-size-on-different-device-orientations — Asaf, May 09 '15 at 17:11

score 1 · Answer 1 · answered May 09 '15 at 17:17

1

Use size class to position landscape or portrait in different ways.

Have a look to this detailled article go to Add constraints for generic size class

answered May 09 '15 at 17:17

MacKentoch

2,086
3
12
19

This is the best way to accomplish this, as it allows for better control of the cell's layout. – mginn May 11 '15 at 00:43

score 0 · Answer 2 · answered Feb 20 '16 at 23:33

You can try this

#define kNumberOfCellsInARowPortrait 1
#define kNumberOfCellsInARowLandscape 2

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
   return 0;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    if (UIInterfaceOrientationIsLandscape(UIApplication.sharedApplication.statusBarOrientation)) {
        CGFloat cellWidth = floor((CGRectGetWidth(collectionView.bounds)-5) / kNumberOfCellsInARowLandscape);
        return CGSizeMake(cellWidth, cellWidth);
    } else {
        CGFloat cellWidth = floor((CGRectGetWidth(collectionView.bounds)-5) / kNumberOfCellsInARowPortrait);
        return CGSizeMake(cellWidth, cellWidth);
    }
}

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    [self.collectionView reloadData];
}

iOS UICollectionvView cell different layout for landscape and portrait

2 Answers2