UICollectionView Rendering Issue

Question

So I have been have some issues with UICollectionView which seems to be a common theme on the internet. Here, Here and Here. I have tried the links suggestions. So just some context.

1.) I'm pulling data from Parse.com (no issue there)

2.) The results are looped over and populated in an array to then fill out the cell. (just like a UITableView)

3.) The data is text based only and populates accordingly, no images to deal with at the moment ;-).

The issue seems to be when I render the dataset. I have set the line spacing between each row to be the following;

//reduce each section to 1px so that it looks like a record set.
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {

    return 1.0;
}

//reduce each section to 1px so that it looks like a record set.
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {

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

    //UIEdgeInsetsMake(top, left, bottom, right);
    return UIEdgeInsetsMake(0.0f, 0.0f, 0.0f, 0.0f);
}

-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{
    return YES;
}

This works accordingly. AFTER you scroll (see below screenshots)

Wrong Render

Correct Render

Cell Code

    - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
        static NSString *identifier = @"cell";

        PatternCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
        PFObject *cellObject = [flightRecordData objectAtIndex:indexPath.row];

    /* ALL THE UILABEL ELEMENTS ARE SET HERE JUST REMOVED TO SAVE SPACE  */


        cell.layer.shouldRasterize = YES;
        cell.layer.rasterizationScale = [UIScreen mainScreen].scale;

        [cell.layer setNeedsDisplay];
    return cell;
}

I'm happy to deal with the rendering issue because apart from that it works. However, my OCD is kicking in and its doing my head in trying to work out what the issue is. I have even deployed to the device to see if its a simulator issue which its not. Each of the suggested posts from others I have tried but didn't seem to work.

Any ideas on how to fix this? I'm new to iOS so be gentle :-P.

UPDATE: Thanks for the feedback, below is the class and screen shots of the storyboard. I'm using the custom class just as an object that I call when required.

Custom UICollectionViewCell Class

@interface PatternCollectionViewCell : UICollectionViewCell {

    IBOutlet UILabel *pilotNameLabel;
    IBOutlet UILabel *pilotTotalHoursLabel;

    //etc etc...
}

@property (nonatomic,strong) IBOutlet UILabel *pilotNameLabel;
@property (nonatomic,strong) IBOutlet UILabel *pilotTotalHoursLabel;

Storyboard

CollectionView

CollectionViewCell

CustomCell

if it is after you scroll maybe it is a problem when you rehuse the cell. In your custom cell, are you calling al the correct methods and its [super method]? is the cell identifier correct? — Lucho, Dec 09 '15 at 00:12
You're not telling us if your collection view and custom cell come from a storyboard, or are created programmatically (or a bit of both). You're also not telling us the structure of your custom cell, i.e. what forms the light grey background? What is the `itemSize` / `estimatedItemSize` in the layout, and what is the cell's actual size? — jcaron, Dec 09 '15 at 00:46
Fair comments, I'm using a storyboard, with an embedded view of a UICollectionViewController. I have tried both embedded and within the UIViewController extending the CollectionView both results are the same. the custom cell class is just an empty object of each of the labels. I'll update the question to illustrate. — Jeremy, Dec 09 '15 at 01:09
Your collection view cell size is set at 58 pixels high. Your cell is set at 52 pixels high. NB: when replying to a comment, quote the user you're replying to (@+username, you'll get auto-completion), so that he/she gets notified. — jcaron, Dec 09 '15 at 01:28
@jcaron thanks for the advise re the auto-completion. Yes 58, 52 pixels high. I can adjust so that they are the same but I thought that layout function forces it to be 1.0 pixels. I'll give it a try nevertheless. — Jeremy, Dec 09 '15 at 01:49
Your layout functions set the spacing between the cells. But then you have a cell that is smaller than the space that is reserved for it. Note that you could have set the spacing directly in the storyboard (on the "Min Spacing" line, where you have 10 for both cells and lines). — jcaron, Dec 09 '15 at 01:52
@jcaron that got it. I can't believe I missed that. I was looking all over the code! Put it up in a response and I'll give you the points. Big Thanks! — Jeremy, Dec 09 '15 at 01:57

score 2 · Accepted Answer · answered Dec 09 '15 at 01:59

2

You had a mismatch between the item size given in the flow layout (configured on the collection view in Interface Builder), which gave the height as 58 pixels high, and the size of the custom cell, which had a height of only 52 pixels.

This explains the extra spacing around the cell.

answered Dec 09 '15 at 01:59

jcaron

17,302
6
32
46

Perfect. Clearly my noob experience. I dislike Apple Storyboard, I spend SO many hours on it. Thanks mate. – Jeremy Dec 09 '15 at 02:22

UICollectionView Rendering Issue

1 Answers1