How to customise UICollectionView Cell to show image grid as shown in attachment?

Question

I want to show images as shown in the attachment. How can I do this using storyboard and objective c?

Based on the image count, the cell size needs to be adjusted.

Answer 1

EDIT

This answer applies to the original question with a single layout based on a large first image and smaller latter images.

This is really easy ... I did not bother with iOS versions and what I give below needs a lot of additional work, but at least it will give you the idea.

The storyboard

In the storyboard I really just set up two items in the collection view. One large and one small picture. You could easily do it with one, here I use two as then I can load the image in storyboard and need not bother with configuring the cells.

Hopefully the image below will help you understand what I mean. Also note the horizontal scrolling.

The collection view

This is bare bones. Of course it needs work. Especially I do NO cell configuration but dequeue and return the cell straight without any configuration. You need to configure each cell by loading the image that should be displayed for it.

The two cell types I define in storyboard are called imgLarge and imgSmall. Note I use the same as item identifier as well.

The most important thing here, that really makes it work, is the last message, where I return two different sizes for the two different cells.

#import "TestCollectionViewController.h"

@interface TestCollectionViewController () < UICollectionViewDataSource, UICollectionViewDelegateFlowLayout >

@end

@implementation TestCollectionViewController

- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator
{
    [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
    self.collectionView.collectionViewLayout.invalidateLayout;
}

- (void)viewDidLoad {
    [super viewDidLoad];

    // Do any additional setup after loading the view.
    self.collectionView.dataSource = self;
    self.collectionView.delegate   = self;
}

#pragma mark <UICollectionViewDataSource>

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

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

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

    if ( indexPath.row )
    {
        return [collectionView dequeueReusableCellWithReuseIdentifier:@"imgSmall" forIndexPath:indexPath];
    }
    else
    {
        return [collectionView dequeueReusableCellWithReuseIdentifier:@"imgLarge" forIndexPath:indexPath];
    }
}

#pragma mark <UICollectionViewDelegate>

- ( CGSize ) collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CGFloat h = collectionView.bounds.size.height;

    if ( indexPath.row )
    {
        return CGSizeMake( h / 2, h / 2 );
    }
    else
    {
        return CGSizeMake ( h, h );
    }
}

@end

This is actually the second version. The first version just used constants here. Since they are calculated, to make it work, you need to set all the spacing and insets to 0 in storyboard.

The result

Voila!

I mentioned that this is the second version. The previous one looked slightly different as you can see below. I kept the image, for the code of the earlier one just look at the history of this post.