UICollectionView content not resizing properly - ios

Question

I'm using a collection view inside of a static table view cell and I'm using autolayout to define the collection view's frame. Also, I'm using FlowLayout as the collectionViewLayout.
The problem:
The behaviour is just as expected for the iPhone 4s and 5 screen. (same width)
Once the width changes (iPhone 6 and 6 Plus), the collection view resizes properly, but the content keeps it size.
This happens both for the cells and for the sections.
Extra info:
I'm setting collectionViewLayout minimumInteritemSpacingForSectionAtIndex to zero.
The width of the cells is always being set to tableView.frame.size.width / 2
Where I configure the layout:
CGFloat headerHeight = 52;
collectionViewLayout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);
collectionViewLayout.headerReferenceSize = CGSizeMake(self.width, headerHeight);
This is what it looks now. The green part represents the UICollectionView. Black and blue the cells. The dividing lines should be resizing and the cells should be divided in 2 columns.

Answer 1

From the code you posted, you are just setting the size for the header but I suppose you also have something like
collectionViewLayout.itemSize = CGSizeMake(self.collectionView.frame.width/2, height);
The important part is in which method you configure this, because if you do it in viewDidLoad the views are not correctly layouted yet so the width would just be the one set in the storyboard, no matter on which device you run your app.
The solution would be to place the code above in viewWillLayoutSubviews
- (void)viewWillLayoutSubviews {
[super viewWillLayoutSubviews];
collectionViewLayout.itemSize = CGSizeMake(self.collectionView.frame.width/2, height);
collectionViewLayout.headerReferenceSize = CGSizeMake(self.collectionView.frame.width/2, height);
}
Another way would be to implement the flowLayout delegate method:
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
return cCGSizeMake(collectionView.frame.width/2, CUSTOM_HEIGHT);
}
// The same for the header
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
return cCGSizeMake(collectionView.frame.width/2, CUSTOM_HEIGHT);
}
Make sure you set the delegate for the collectionView
Let me know how it goes :)
Update
For the cells, add these methods too:
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
return CGRectZero;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
return 0;
}
As for the sectionHeader, maybe you need to check the constraints you have there, for the separator for example.

Answer 2

Be sure to use all the following for precise styling:
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath;
To change the cell content size, use this:
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake((kScreenWidth/2-8), 44); // Use your own X and Y sizes
}