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!

Answer 1

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);
}

Answer 2

There are different ways for it:

1. You can do by implementing - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath method.

2. You can totally customize collection view as described in following tutorial step by step.

   http://www.raywenderlich.com/107439/uicollectionview-custom-layout-tutorial-pinterest

3. 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.