Display different amount of cells in a row within a UICollectionView

Question

I would like to have a UICollectionView that, in the first row there is a cell with all the row's width, and the second row has 3 cells. I have researched the documentation but I'm not able to do it. Something like this:

Thanks in advance

Answer 1

Make 2 Cell prototypes in collection view in your storyboard, and set them reuse identifiers

In your ViewController's .m file implement this functions

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{        
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 6;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell;

    if (/*condition for small cell*/)// e.g.    indexPath.row % 3 != 0
        cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"smallCell" forIndexPath:indexPath];
    else
        cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"bigCell" forIndexPath:indexPath];


    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    if (/*condition for small cell*/) // e.g.    indexPath.row % 3 != 0
        return CGSizeMake(65, 50);

    return CGSizeMake(318, 50);
}

After doing this you will have something like this: