Problems with UICollectionView iOS8

Question

So Im having the strangest trouble with what I thought should be super easy. Here's my collectionView

So.. as you can see the right image is cut off. Now here's the weird part. Here's my cellForItemAtIndexPath method:

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

    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 164, 164)]; // 0 0 164 141
    [cell.contentView addSubview:imageView];
    imageView.image = usersPhotos[indexPath.row];

    return cell;
}

And here's the UICollectionView in my storyboard file:

NOTICE that my collectionViewCell in storyboard file is 155 by 155 and my imageView is 164x164. I'm doing this because I just can't figure this out for some reason:

With my imageView set to 155x155(the same size as cell), we get something that looks like this:

So what am I doing wrong here? It's clear that I dont want that white spacing (as shown above) and I cannot expand my UICollectionViewCell anymore because 155 is the max width, for some reason on storyboard if you hit a width of 156 it makes the cell take up the entire column, with no room left for a second column , which is what I need.

How can I simply make this work? Any help is greatly appreciated, Im greatly lost as to why I am experiencing this behavior and what I'm doing wrong.

Answer 1

In your storyboard expand your view controller and select "Collection View Flow Layout" like so:

Then in your size inspector find Min Spacing like so:

Change the "For Cells" spacing to 0. That will allow you to fit your cells in without any spacing between them, and increase your cell size to 160 max (for a screen width of 320).

This changes my storyboard layout from this to this with a cell size of 160w:

Then when I run the app all the cells are touching:

Answer 2

Right now your cell size is hardcoded in the storyboard, you have to make it dynamic, so that it changes depending on which device your app is running on.

You have to implement the UICollectionViewFlowLayoutDelegate method, something like this:

- (CGSize)collectionView:(UICollectionView *)collectionView
                  layout:(UICollectionViewLayout*)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    return CGSizeMake(collectionView.frame.size.width/2, collectionView.frame.size.width/2);
}

Answer 3

Your cells will need to resize based on the size of the device and the section insets and inter item spacing.

In storyboard, make sure Flow layout is selected in the Attributes Inspector on your Collection View.

Then, implement the sizeForItemAtIndexPath and calculate with the section insets:

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

    // Get the flow layout properties
    UICollectionViewFlowLayout *flowLayout = ((UICollectionViewFlowLayout*)collectionViewLayout);

    // Calculate the usable width for the cell
    CGFloat usableWidth = collectionView.frame.size.width - flowLayout.sectionInset.left - flowLayout.sectionInset.right - flowLayout.minimumInteritemSpacing;

    // Return the proper size
    return CGSizeMake(usableWidth / 2, usableWidth / 2);

}