CollectionView grid with images. Images don't fit in the grid

Question

I'm trying to create a Grid layout that shows some pictures. Now I'm using a FlowLayout and I create my CollectionView like this:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];


    Gop *g = _images[(NSUInteger) indexPath.row];

    @weakify(self);
    [[self.imageService fetchImageFromURLAsString:g.imageUrl] subscribeNext:^(UIImage *img) {
        @strongify(self);
        UIImageView *imageView = [[UIImageView alloc] initWithImage:img];
        imageView.contentMode = UIViewContentModeScaleAspectFill;
        [cell.contentView addSubview:imageView];
    } error:^(NSError *error) {
        [_snackbar displaySnackbarWithMsg:NSLocalizedString(@"snackbar.error.no.network", nil)];
    } completed:^{
        DDLogDebug(@"Fetched image");
    }];

    return cell;
}

#pragma mark – UICollectionViewDelegateFlowLayout

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    return CGSizeMake(100,100);
}

Don't worry for the reactive cocoa part, it just retrieves an image from the internet.

Now the image is 1920 x 1080 but I want a gallery of images of 100 x 100 for example. So I implemented the UICollectionViewDelegateFlowLayout method and created a size off 100x100. Now my image don't show 100 x 100 and my image content isn't visible. I only see some image from the left corner I guess ( of the bigger picture ).

How can I fit my images that they are 100 x 100 and all in line with each other?

Screenshot what I have now:

I hoped on a result something like this: http://www.appcoda.com/wp-content/uploads/2013/01/RecipePhoto-App-First-Version.jpg

Answer 1

Couple of things:

You should not be displaying 1920x1080 images in the UICollectionView, as this will result in really bad performance. Doesn't your web service provide previews?

- (CGSize)collectionView:layout:sizeForItemAtIndexPath: only affects the size of the UICollectionViewCell, it does not resize the images. As you have not provided frame of the UIImageView, it will take the size of its UIImage, which in your case is 1920x1080. Easy fix would be:

//@weakify(self); not necessary, as you are not referencing self inside the blocks
[[self.imageService fetchImageFromURLAsString:g.imageUrl] subscribeNext:^(UIImage *img) {
    //@strongify(self);
    UIImageView *imageView = [[UIImageView alloc] initWithImage:img];
    imageView.frame = cell.bounds; // set the frame of the UIImageView
    imageView.clipsToBounds = YES; // do not display the image outside of view, if it has different aspect ratio
    imageView.contentMode = UIViewContentModeScaleAspectFill;
    [cell.contentView addSubview:imageView];
} error:^(NSError *error) {
    [_snackbar displaySnackbarWithMsg:NSLocalizedString(@"snackbar.error.no.network", nil)];
} completed:^{
    DDLogDebug(@"Fetched image");
}];

Also, think about the cell reuse: if the cell is reused, all of that code will run multiple times, which will result in multiple UIImageViews in the same cell. You can solve this by adding UIImageView to the UICollectionViewCell in the Interface Builder and only accessing it in the code (e.g. via tag):

...
UIImageView *imageView = (UIImageView*)[cell viewWithTag:YOUR_TAG];
...

Also, cell can be potentially reused before the image was loaded from the web service, which will result in multiple images being asynchronously loaded into the same cell, which is quite a mess.

I would suggest to take a look at libraries like AFNetworking or SDWebImage which have already solved this non-trivial problem.

Answer 2

Add this line to your cell configuration code:

imageView.clipsToBounds = YES