UICollectionView Center Cells with paging enabled

Question

Been trying to center align my cells using UICollectionView with paging enabled. Unfortunately I can never make the cells align in the center when trying to do this. As I scroll through the collection the cells always move slightly off. Im trying to achieve this for both Portrait and landscape views. Ive been using insets to try and center the cells and their position:

- (UIEdgeInsets)collectionView:
(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    CGFloat cellSpacing = ((UICollectionViewFlowLayout *) collectionViewLayout).minimumLineSpacing;
    CGFloat cellWidth = ((UICollectionViewFlowLayout *) collectionViewLayout).itemSize.width;
    NSInteger cellCount = [collectionView numberOfItemsInSection:section];
    CGFloat inset = (collectionView.bounds.size.width - ((cellCount) * (cellWidth + cellSpacing))) * 0.5;
    inset = MAX(inset, 0.0);

    if(UIDeviceOrientationIsPortrait([UIDevice currentDevice].orientation)){
         return UIEdgeInsetsMake(50.0,inset,0.0,inset);  // top, left, bottom, right
     }
     else{
         return UIEdgeInsetsMake(50.0,inset,0.0,inset);  // top, left, bottom, right
     }
}

I then changed the line spacing:

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)
collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{

    CGFloat cellSpacing = ((UICollectionViewFlowLayout *) collectionViewLayout).minimumLineSpacing;
    CGFloat cellWidth = ((UICollectionViewFlowLayout *) collectionViewLayout).itemSize.width;
    NSInteger cellCount = [collectionView numberOfItemsInSection:section];
    CGFloat inset = (collectionView.bounds.size.width - ((cellCount-1) * (cellWidth + cellSpacing))) * 0.5;
    inset = MAX(inset, 0.0);

    if(UIDeviceOrientationIsLandscape([UIDevice currentDevice].orientation)){

        NSLog(@"Changed to landscape Spacing");
        return inset;

    }
    else{

        return inset;
    }

The size of my cells are set here:

-(CGSize)
    collectionView:(UICollectionView *) collectionView
    layout:(UICollectionViewLayout*)collectionViewLayout
    sizeForItemAtIndexPath:(NSIndexPath *)indexPath{

    //Set Landscape size of cells
    if(UIDeviceOrientationIsLandscape([UIDevice currentDevice].orientation)){
        CGFloat cellWidth =  [[UIScreen mainScreen] bounds].size.width-360;
        CGFloat cellHeigt = [[UIScreen mainScreen] bounds].size.height-60;
        NSLog(@"Is Landscape");
        return CGSizeMake(cellWidth, cellHeigt);
    }
    //Set Potrait size of cells
    else{
        CGFloat cellWidth =  [[UIScreen mainScreen] bounds].size.width-60;
        CGFloat cellHeigt = [[UIScreen mainScreen] bounds].size.height-160;
        NSLog(@"Is Portrait");
        return CGSizeMake(cellWidth, cellHeigt);
    }
}

Have you enabled paging for the collection view in the attributes inspector? And instead of using magic numbers like 360 or 60, you should use values relative to the screen size i.e based on division of screen width/height (as it may fail on devices with different screen sizes). — Rikh
Yeah I used those 'magic' numbers so that I could get the right size for the cells. How would you suggest I get the best size of the cells. As for paging I enabled it through the collection delegate. coll.pagingEnabled = YES; — Zayd Bhyat
Well i am not sure what you are trying to achieve but instead of trying to manipulate the content view of the cell (as it leaves room for error), i would simply set the cell to be the whole screen width, and then use autoLayout to center its contents. If you could post an image of what you are trying to achieve, maybe i could provide assistance! — Rikh
Do leave paging enabled even in that case! As paging allows your cell to appear completely! (And remove all inter-item spacing between cells). Let me know if it solves your problem and i'll add it as an answer! — Rikh

Rikh Rikh · Accepted Answer · 2016-11-16T06:32:07

Instead of trying to set the frame programmatically, you can simply set the the cell to occupy the whole width of the UICollectionView and center the content inside using autoLayout, this way you won't have to account for interface changes and different screen sizes as autoLayout will handle that for you. In your data source,

-(CGSize)
    collectionView:(UICollectionView *) collectionView
    layout:(UICollectionViewLayout*)collectionViewLayout
    sizeForItemAtIndexPath:(NSIndexPath *)indexPath{

    return CGSizeMake(collectionView.bounds.size.width, collectionView.bounds.size.height)
}

Set all your inter item spacing to 0 and enable paging for the UICollectionView

Next just use autoLayout to set the contents to center inside the cell!

UICollectionView Center Cells with paging enabled

2 Answers