rajesh s rajesh s - 1 year ago 207
iOS Question

Display just two columns, with multiple rows in a CollectionView using storyboard

I want to display only two cells in a row, no matter what the iPhone screen size is. Like,
End result required

My storyboard contains a

,connected by constraints.

Storyboard preview

The storyboard settings for the
enter image description here

Now, when I run this in 6, 5s or below, only one cell appears in a row. The code I'd used is,

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return [categoryImages count];
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
homePageCells *cell = (homePageCells *)[collectionView dequeueReusableCellWithReuseIdentifier:@"cells" forIndexPath:indexPath];
cell.categoryName.text = [categoryNames objectAtIndex:indexPath.row];

return cell;

I tried detecting the screen size and assigning appropriate cell size programmatically using the code,

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

CGSize result = [[UIScreen mainScreen] bounds].size;
if(result.height == 480)
//Load 3.5 inch xib
sizes =CGSizeMake(170.f, 170.f);
else if(result.height == 568)
//Load 4 inch xib
sizes =CGSizeMake(130.f, 130.f);

else if(result.height == 667.000000)
//Load 4.7 inch xib
sizes =CGSizeMake(160.f, 160.f);


sizes =CGSizeMake(170.f, 165.f);

return sizes;

But I also know that this isn't the right way, so please give me a right way to handle this.

Answer Source

You can do like this, You need not to check for device sizes as we can use the tableView width to calculate the width of the cell & according to which we can upadate our height.

One More thing you need to use CollectionViewFlowLayout & confirm the delegate & implement method below

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

   let padding =  50
   let collectionViewSize = collectionView.frame.size.width - padding

   return CGSizeMake(collectionViewSize/2, collectionViewSize/2)


Note: I have answered the question considering the cells are square sized

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download