UICollectionViewCell size for 3 items per row - ios

Question

I'm trying to create a UICollectionView with 3 images per row.
For the start i used this code:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
return CGSizeMake(110, 110);
}
And it's looking good but it only fits the iPhone X screen:
Then i tried to use this code so it will put 3 cells per row:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat screenWidth = screenRect.size.width;
float cellWidth = screenWidth / 3.0;
CGSize size = CGSizeMake(cellWidth, cellWidth);
return size;
}
But then the view is starting looking different:
This is the cell initialize method:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
cellForItemAtIndexPath:(NSIndexPath *)indexPath {
static NSString *identifier = #"TrendingCell";
TrendingCell *cell = (TrendingCell*)[collection dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
TrendingItem * item = [[[TrendingRep sharedTrending] trendingArray] objectAtIndex:indexPath.row];
cell.text.text = item.title;
cell.image.layer.cornerRadius = cell.image.frame.size.width / 2;
cell.image.clipsToBounds = YES;
[cell.image sd_setImageWithURL:[NSURL URLWithString:item.imageUrl]
placeholderImage:nil
options:SDWebImageProgressiveDownload
completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
[cell.progressView setHidden:NO];
}];
return cell;
}
Any idea what can be the issue with the view?

Answer 1

This looks like you're not taking into account the layout's minimumInteritemSpacing. The formula to calculate the item's width should be
float cellWidth = (screenWidth - 2.0 * minimumInteritemSpacing) / 3.0;

Answer 2

You have to provide minimum spacing between the collection View cell. You
are using collectionviewLayout, So you have to provide minimum spacing like below.
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
return CGSizeMake(collectionView.frame.size.width/3 - 10, collectionView.frame.size.width/3)
}
Here You can provide minimum spacing (like 10) between cells programmatically.