UICollectionView layout, cells spaced far out - layout

Question

I have a UICollectionView that displays images. My images are size 114x133 but for some reason the actual UICollectionVewCell is bigger than this (I can see this because I set the cell background to red). Because of this the view can display only 2 images and there is a huge gap between the two. I am implementing the following
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
UIImage* img = [UIImage imageNamed:#"thumbnail_frame.png"];
return img.size;
}
- (UIEdgeInsets)collectionView:
(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
return UIEdgeInsetsMake(1, 1, 1, 1);
}
I am creating the cell's contentview programmatically (i.e init imageView etc).
I face the same problem in a different view where I am creating the whole view programmatically. There I do:
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.minimumInteritemSpacing=10;
flowLayout.minimumLineSpacing= 30;
flowLayout.sectionInset = UIEdgeInsetsMake(5, 5, 5, 5);
if(collectionView != nil) {
[collectionView removeFromSuperview];
}
CGRect frm= CGRectMake(45, 80, 250, 230);
collectionView = [[UICollectionView alloc] initWithFrame:frm collectionViewLayout:flowLayout];//(0, 0, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:flowLayout];
collectionView.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.5];
collectionView.clipsToBounds = YES;
collectionView.layer.cornerRadius = 10.0;
collectionView.dataSource = self;
collectionView.delegate = self;
[collectionView registerClass:[YourPicCollectionViewCell class] forCellWithReuseIdentifier:#"YourPicCell"];
Again there is either a big gap between two images, or if I make the width smaller, there are 3 images but the right-most one is half-visible.
I tinkered with spacing but it doesn't seem to work. What could be the problem?

Answer 1

I think instead of resizing the cell.. you should try resizing the collection view. Make sure that the collection view has just enough width to hold 2 items in a row. This is because if the collection view has more width than the cells, then then will stick to the extreme right and left. If it's too short, then only one cell will be displayed at the centre (Assuming that you are trying to keep 2 cells in a row).
The reason that one of your cell was half visible is that the collection view had more width than its super view.
So doing the following would help you get what you want..
Frame your collection view such that its less than its super view and should be equal to (numberOfCells X width) + ((numberOfCells-1) X cellGap).
If it's a custom collection view cell try adding constraints to the imageView such that the image sticks to the cells edges.