Cell spacing in UICollectionView Cell spacing in UICollectionView ios ios

Cell spacing in UICollectionView


Supporting the initial question. I tried to get the spacing to 5px on the UICollectionView but this does not work, as well with a UIEdgeInsetsMake(0,0,0,0)...

On a UITableView I can do this by directly specifying the x,y coordinates in a row...

enter image description here

Heres my UICollectionView code:

#pragma mark collection view cell layout / size- (CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {    return [self getCellSize:indexPath];  // will be w120xh100 or w190x100    // if the width is higher, only one image will be shown in a line}#pragma mark collection view cell paddings- (UIEdgeInsets)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {    return UIEdgeInsetsMake(0, 0, 0, 0); // top, left, bottom, right}- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {    return 5.0;}

Update: Solved my problem, with the following code.

enter image description here

ViewController.m

#import "ViewController.h"#import "MagazineCell.h" // created just the default class. static NSString * const cellID = @"cellID";@interface ViewController ()@end@implementation ViewController#pragma mark - Collection view-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{    return 1;}-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    return 30;}-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{    MagazineCell *mCell = (MagazineCell *)[collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];    mCell.backgroundColor = [UIColor lightGrayColor];    return mCell;}#pragma mark Collection view layout things// Layout: Set cell size- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {    NSLog(@"SETTING SIZE FOR ITEM AT INDEX %d", indexPath.row);    CGSize mElementSize = CGSizeMake(104, 104);    return mElementSize;}- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {    return 2.0;}- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {    return 2.0;}// Layout: Set Edges- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {   // return UIEdgeInsetsMake(0,8,0,8);  // top, left, bottom, right    return UIEdgeInsetsMake(0,0,0,0);  // top, left, bottom, right}@end


I know that the topic is old, but in case anyone still needs correct answer here what you need:

  1. Override standard flow layout.
  2. Add implementation like that:

    - (NSArray *) layoutAttributesForElementsInRect:(CGRect)rect {    NSArray *answer = [super layoutAttributesForElementsInRect:rect];    for(int i = 1; i < [answer count]; ++i) {        UICollectionViewLayoutAttributes *currentLayoutAttributes = answer[i];        UICollectionViewLayoutAttributes *prevLayoutAttributes = answer[i - 1];        NSInteger maximumSpacing = 4;        NSInteger origin = CGRectGetMaxX(prevLayoutAttributes.frame);        if(origin + maximumSpacing + currentLayoutAttributes.frame.size.width < self.collectionViewContentSize.width) {            CGRect frame = currentLayoutAttributes.frame;            frame.origin.x = origin + maximumSpacing;            currentLayoutAttributes.frame = frame;        }    }    return answer;}

where maximumSpacing could be set to any value you prefer. This trick guarantees that the space between cells would be EXACTLY equal to maximumSpacing!!


Using a horizontal flow layout, I was also getting a 10 points spacing between cells. To remove the spacing I needed to set minimumLineSpacing as well as minimumInterItemSpacing to zero.

UICollectionViewFlowLayout *flow = [[UICollectionViewFlowLayout alloc] init];flow.itemSize = CGSizeMake(cellWidth, cellHeight);flow.scrollDirection = UICollectionViewScrollDirectionHorizontal;flow.minimumInteritemSpacing = 0;flow.minimumLineSpacing = 0;

Also, if all your cells are the same size, it's simpler and more efficient to set the property on the flow layout directly instead of using delegate methods.