Centre UICollectionView Cells Horizontally iOS

I had to do this for a project recently so thought I would share.

Create a single view project in Objective C and open the Storyboard. For ease of this example turn Auto Layout and Size Classes off using the iPad size for the view. This can be done in File Inspector View on the right.

In the general settings under Deployment info, un-tick the boxes for portrait and upside down so the app can only be displayed horizontally.

Next, setup the View Controller simulated metrics in the Attribute Inspector as follows.

Add a UICollectionView to the ViewController and make it 1000 in width and 300 in height. Try to centre it in the middle of the View.

 

Change the scroll direction to horizontal in the Attribute Inspector for the UICollectionView. Make sure items is set to 1 while you are there so that a prototype cell stays in the collection.

Now make the CollectionViewCell 200 in width and 250 in height

I would now add some views and labels to the default prototype cell so that what you are working with is realistic. Here is my collection View and cell.

With the UICollectionView selected, go into Connections Inspector and connect the Delegate to the View Controller.

We need to implement the UICollectionViewDelegate. Add this to the ViewController.h

 

#import <UIKit/UIKit.h>
 
@interface ViewController : UIViewController <UICollectionViewDelegate>
 
@end

Now we will add two methods from the UICollectionViewDelegate. These methods will simply tell the UICollectionView how many collection cells we're displaying and what cells to display. Pretty much the same as a tableView Delegate.

#import "ViewController.h"
 
@implementation ViewController
{
    NSInteger _numberOfCells;
}
 
- (void)viewDidLoad
{
    [super viewDidLoad];
    _numberOfCells = 3;
}
 
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
 
    return _numberOfCells;
}
 
-(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
 
    UICollectionViewCell *cell = (UICollectionViewCell*)[collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
 
    return cell;
}

Now build and run the project. You should see something similar to the below. If not, put a breakpoint in the delegate methods and make sure they are called and the delegate is setup correctly.

Now lets add another method to centre the 3 UICollectionViewCells. You will notice I have hardcoded in all of the width values but that is just to make this more understandable, it should be quite simple to get the values at run time programmatically. So you should now adapt your ViewController to look like the below.

#import "ViewController.h"
 
#define CELL_WIDTH 200
#define CELL_SPACING 10
#define COLLECTIONVIEW_WIDTH 1000
 
@implementation ViewController
{
    NSInteger _numberOfCells;
}
 
- (void)viewDidLoad
{
    [super viewDidLoad];
    _numberOfCells = 3;
}
 
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
 
    return _numberOfCells;
}
 
-(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
 
    UICollectionViewCell *cell = (UICollectionViewCell*)[collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
 
    return cell;
}
 
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    NSInteger viewWidth = COLLECTIONVIEW_WIDTH;
    NSInteger totalCellWidth = CELL_WIDTH * _numberOfCells;
    NSInteger totalSpacingWidth = CELL_SPACING * (_numberOfCells -1);
 
    NSInteger leftInset = (viewWidth - (totalCellWidth + totalSpacingWidth)) / 2;
    NSInteger rightInset = leftInset;
 
    return UIEdgeInsetsMake(0, leftInset, 0, rightInset);
}
 
@end

There is no reason to use that many lines of code or to have both a left and right inset other than simplicity for this demonstration. That method can be reduced to a few lines at most. Run the project again and you should have a centred UICollectionView like below.

← Back to home