How can I create 3 columns using UICollectionView

Question

I want to create a 3 columns with a UICollectionView, Here is the code I did: I have attached a UICollectionViewFlowLayout to my UICollectionView and I set the itemSize to be collection view's width divides by 3:

    self.collectionView.backgroundColor =  [UIColor blueColor];

    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];

    double width = self.collectionView.frame.size.width;
    width /= 3;
    [flowLayout setItemSize:CGSizeMake(width, 100)];
    [flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];

    [self.collectionView setCollectionViewLayout:flowLayout];

But when I run it, I only see 1 item per row but the width of the item is set correctly. The right of the item is a bunch of white spaces.

Can you please tell me what am I missing?

Thank you.

Update:

I have tried this with minimum spacing set. But that still does not work. I only see 1 column of cells:

self.collectionView.backgroundColor =  [UIColor blueColor];
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];

[flowLayout setItemSize:CGSizeMake(160, 160)];
[flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
flowLayout.minimumInteritemSpacing = 10.0f;
flowLayout.minimumLineSpacing = 10.0f;

[self.collectionView setCollectionViewLayout:flowLayout];

When I adjust the spacing values in the code, I see the spacing on the screen changes. It is just that it only layout the cell in 1 column. Instead of 2

There should be space between two UICollectionViewCell.For ex: If UICollectionView width is 320 pixel and you want 10px gap between two cells, so, you should fix the width of cell as 320-40=280/3 pixel (assuming 3 cell in one row). I assume that your first cell will start from 10 pixel inside collection view. — johny kumar, Nov 27 '14 at 06:15
@johnykumar, It's true his math is off (unless he has no spaces at all), but if he's using the default spacing (10), that wouldn't explain why he sees only one cell; he should see 2 at least. — rdelmar, Nov 27 '14 at 07:06

score 2 · Accepted Answer · answered Nov 27 '14 at 06:22

2

While creating UICollectionViewLayout you should specify itemSize, minimumInterItemSpacing and minimumLineSpacing and optionally scrolling direction using this information only collection view layout its items.

answered Nov 27 '14 at 06:22

Rafeek

523
3
16

score 1 · Answer 2 · edited May 23 '17 at 12:01

implement the <UICollectionViewDelegateFlowLayout> Protocol, using this you can do

collectionView:layout:insetForSectionAtIndex:
collectionView:layout:minimumInteritemSpacingForSectionAtIndex:
collectionView:layout:minimumLineSpacingForSectionAtIndex:
collectionView:layout:referenceSizeForFooterInSection:
collectionView:layout:referenceSizeForHeaderInSection:
collectionView:layout:sizeForItemAtIndexPath:

refer this How do I create a UICollectionView with column and row headers?

score 1 · Answer 3 · answered Nov 27 '14 at 19:03

Its possible that your trailing space layout constraint for your collection view isn't setup properly to expand itself horizontally.

In other words, the collection view is trying to tile items horizontally but doesn't have any room on the right to place additional items so it wraps to the next line.

How can I create 3 columns using UICollectionView

3 Answers3