UICollectionViewCell Padding

Question

I am trying to set zero padding on collection view cells, I have set "Min Spacing" on the view controller to:

Yet it still has gaps between the cells:

Also I'd like it so that the cells wrap nicely depending on the width of the frame, for example each cell is 50px wide, so if there are six cells and I set the frame width to 150px, it will display two lines of three cells.

Yet if I set the frame width to 150 by doing:

- (void)viewDidLoad
{
    [super viewDidLoad];

    CGRect frame = self.collectionView.frame;
    frame.size.width = 150;
    self.collectionView.frame = frame;
}

It looks like in the above screen shot (too wide).

If I set it to something ridiculously small such as 10, it then wraps to some extent:

The UICollectionViewCell is set to 50 x 50:

I have also tried setting the size of the cell programatically, and also removed the UIEdgeInset:

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

I have disabled auto layout just incase that had any interference. Any advice as to how I can remove the padding and also have them wrap depending on the frame width / height?

Answer 1

You are using a UICollectionViewController which, like a UITableViewController, has the collection view (or table view) as the base view property of the view controller. This means it can't be resized from within the view controller; it's size is controlled by its superview - either the window, in this case, which has it as the root view controller, or a parent view controller if you were embedding it.

If you want to reduce the collection view area so the cells abut one another, you can amend the section insets of the collection view in the storyboard. In your case, an inset of 15 left and right brings the cells together - this is 9 * 50 (450) plus 30 = 480 which is the width of a 3.5inch iPhone in landscape.

Obviously this will be different in the iPhone 5 or iPad. You can either calculate the insets at run time, use a collection view held in a standard UIViewController subclass, or hold the UICollectionViewController as an embedded view controller. The latter two will enable you just to specify a size, which is probably nicer than calculating insets.

Answer 2

I am not sure those cells in the screenshot are 50x50 (EDIT: I guess they are...).

Check if you connected the UICollectionViewDelegate and UICollectionViewDataSource.

This it the method you need to implement

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

If it does not work, try putting this code inside viewDidLoad

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
[flowLayout setMinimumInteritemSpacing:0.0f];
[flowLayout setMinimumLineSpacing:0.0f];
[flowLayout setItemSize:CGSizeMake(50.0f, 50.0f)];
[self.collectionView setCollectionViewLayout:flowLayout];

Answer 3

Implement this method in your ViewController

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
   return 2; //the spacing between cells is 2 px here
}