2 different cell sizes in UICollectionView Objective C

Question

I would like to use UICollectionView, it is possible to create the following layout:

As you can see, there are two different sizes of the cell. One is 1/4 of the row, the other is 3/4. Is it possible to create this kind of layout with a UICollectionView?

Would anyone can teach me how to do it??? Or is there any samples??? I have already study many tutorials and reference. But still dont know how to do it..

Thanks!

yes it is possible. take a look on creating a custom layout for your `UIControllerView`, which builds up the desired interface; you can start e.g. reading the [Apple Official Documentation](https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/CollectionViewPGforIOS/CreatingCustomLayouts/CreatingCustomLayouts.html) about how to create custom layouts. — holex, Jan 07 '16 at 11:35
@Fogmeister, are you thinking in custom `UITableViewCell`? :) — holex, Jan 07 '16 at 11:38
@holex yep. Even if not related it might be easier (for someone new to collection views) just to stick with a table view and create the layout inside a cell. :D — Fogmeister, Jan 07 '16 at 11:40

score 11 · Accepted Answer · edited Sep 26 '18 at 13:50

Well I have hardcoded the item width for the time being (72.0 and 23.0). The rest of 5.0 will be used in interim spacing and edgeInsets. This code will give you exactly what you want.

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
    return 10.0;
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
    return 10.0;
}

#pragma mark - CollectionViewFlowLayout Methods

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CGSize newSize = CGSizeZero;
    newSize.height = 100;

    CGRect screenBounds = [[UIScreen mainScreen] bounds];
    CGSize screenSize = screenBounds.size;

    if(indexPath.item % 4 == 0 || indexPath.item % 4 == 3)
    {
        // Size : 1/4th of screen
        newSize.width = screenSize.width * 0.23;
    }
    else
    {
        // Size : 3/4th of screen
        newSize.width = screenSize.width * 0.72;

    }
    return newSize;
}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(10, 2.0, 10, 2.0);
}

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

There are different ways for it:

You can do by implementing - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath method.
You can totally customize collection view as described in following tutorial step by step.

http://www.raywenderlich.com/107439/uicollectionview-custom-layout-tutorial-pinterest
From your destination layout, it looks that look can be easily get via using even UITableviewCell (loading both 1/4 sized and 3/4 sized cell in a single cell), and changing the size of them via Auto Layout.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 06 '16 at 11:41

Mehul Thakkar

11,971
8
50
74

Thank you for replying me, i have read the custom layout tutorial. But i couldnt understand. Would you please tell me more how to do it?? Sorry to bother you! – Yvonne Jan 07 '16 at 09:47

score 0 · Answer 3 · edited May 23 '17 at 12:16

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

    return [(NSString*)[arrayOfStats objectAtIndex:indexPath.row] sizeWithAttributes:NULL];
}

using this method you can return different size for cell. Please refer this link Dynamic cell width of UICollectionView depending on label width

2 different cell sizes in UICollectionView Objective C

3 Answers3

Linked