Creating a UICollectionViewCell with UIImage and UILabels creates slow scrolling

Question

I create a subview with a UIview (acts as header), a UIImage, and 10 UILabels. I'm putting these into a UICollectionView as cells.

When designed completely, it does not scroll smoothly. If i remove all the UILabels, it scrolls smoothly.

I'm assuming it's sluggish cause the UICollectionView loads on demand, so when it needs each new cell, it has to draw it which locks up the main thread.

Is it just a matter that its too much for iOS to handle to create them? If so, is there another way I can put text into it?

what my cell looks like:

Here is DatasetFilterListPanelView, this creates the UIView that I put into the UICollectionViewCell. I did it this way cause I created this before I decided to use UICollectionView.

@implementation DatasetFilterListPanelView

-(id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {

        self.translatesAutoresizingMaskIntoConstraints = FALSE;

        UIView *contentView = [self createContentView];

        [self addSubview:contentView];

        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[contentView]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(contentView)]];
        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[contentView]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(contentView)]];
    }

    return self;
}

-(UIView *) createContentView {
    UIView *contentView = [[UIView alloc] initWithFrame:self.frame];
//    contentView.translatesAutoresizingMaskIntoConstraints = FALSE;
    contentView.backgroundColor = [UIColor myDarkGrayColor];

    UIView *headerView = [self createHeaderView];

    [contentView addSubview:headerView];

    [contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[headerView]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(headerView)]];
    [contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[headerView]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(headerView)]];

    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"gear12.png"]];
    imageView.translatesAutoresizingMaskIntoConstraints = FALSE;
    imageView.backgroundColor = [UIColor blueColor];
    self.imageView = imageView;

    [imageView addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:imageView attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];

    [contentView addSubview:imageView];

    [contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[imageView]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(imageView)]];
    [contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[headerView]-[imageView]-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(headerView, imageView)]];

    UILabel *acresLabel = [self createLabelWithTitle:@"Label01:" andFont:[UIFont fontWithName:HELVETICA_FONT_STYLE_BOLD size:12]];
    [contentView addSubview:acresLabel];

    UILabel *addedLabel = [self createLabelWithTitle:@"Label02:" andFont:[UIFont fontWithName:HELVETICA_FONT_STYLE_BOLD size:12]];
    [contentView addSubview:addedLabel];

    UILabel *typeLabel = [self createLabelWithTitle:@"Label03:" andFont:[UIFont fontWithName:HELVETICA_FONT_STYLE_BOLD size:12]];
    [contentView addSubview:typeLabel];

    UILabel *zonesLabel = [self createLabelWithTitle:@"Label04:" andFont:[UIFont fontWithName:HELVETICA_FONT_STYLE_BOLD size:12]];
    [contentView addSubview:zonesLabel];

    UILabel *sceneLabel = [self createLabelWithTitle:@"Label05:" andFont:[UIFont fontWithName:HELVETICA_FONT_STYLE_BOLD size:12]];
    [contentView addSubview:sceneLabel];

    UILabel *acresValueLabel = [self createLabelWithTitle:@"Data" andFont:[UIFont fontWithName:HELVETICA_FONT_STYLE size:12]];
    acresValueLabel.textAlignment = NSTextAlignmentLeft;
    [contentView addSubview:acresValueLabel];

    UILabel *addedValueLabel = [self createLabelWithTitle:@"Data" andFont:[UIFont fontWithName:HELVETICA_FONT_STYLE size:12]];
    addedValueLabel.textAlignment = NSTextAlignmentLeft;
    [contentView addSubview:addedValueLabel];

    UILabel *typeValueLabel = [self createLabelWithTitle:@"Name" andFont:[UIFont fontWithName:HELVETICA_FONT_STYLE size:12]];
    typeValueLabel.textAlignment = NSTextAlignmentLeft;
    [contentView addSubview:typeValueLabel];

    UILabel *zonesValueLabel = [self createLabelWithTitle:@"Data" andFont:[UIFont fontWithName:HELVETICA_FONT_STYLE size:12]];
    zonesValueLabel.textAlignment = NSTextAlignmentLeft;
    [contentView addSubview:zonesValueLabel];

    UILabel *sceneValueLabel = [self createLabelWithTitle:@"Name" andFont:[UIFont fontWithName:HELVETICA_FONT_STYLE size:12]];
    sceneValueLabel.textAlignment = NSTextAlignmentLeft;
    [contentView addSubview:sceneValueLabel];


    NSDictionary *views = NSDictionaryOfVariableBindings(headerView, imageView, acresLabel, acresValueLabel, addedLabel, addedValueLabel, typeLabel, typeValueLabel, zonesLabel, zonesValueLabel, sceneLabel, sceneValueLabel);

    [contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[headerView]-[acresLabel]"
                                                                        options:0
                                                                        metrics:nil
                                                                          views:views]] ;

    [contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[acresLabel]-[addedLabel(==acresLabel)]-[typeLabel(==acresLabel)]-[zonesLabel(==acresLabel)]-[sceneLabel(==acresLabel)]-|"
                                                                        options:NSLayoutFormatAlignAllRight
                                                                        metrics:0
                                                                          views:views]];

    [contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[acresValueLabel]-[addedValueLabel(==acresLabel)]-[typeValueLabel(==acresLabel)]-[zonesValueLabel(==acresLabel)]-[sceneValueLabel(==acresLabel)]-|"
                                                                        options:NSLayoutFormatAlignAllLeft
                                                                        metrics:nil
                                                                          views:views]];

    [contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[imageView]-20-[acresLabel]-[acresValueLabel]"  options:0  metrics:nil  views:views]];

    return contentView;
}

-(UIView *)createHeaderView {
    UIView *view = [UIView new];
    view.translatesAutoresizingMaskIntoConstraints = FALSE;
    view.backgroundColor = [UIColor blueColor];
    view.clipsToBounds = YES;

    [view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view(30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(view)]];

    UILabel *title = [UILabel new];
    title.translatesAutoresizingMaskIntoConstraints = FALSE;
    title.text = @"Default text";
    title.font = [UIFont fontWithName:HELVETICA_FONT_STYLE_BOLD size:14];
    title.textColor = [UIColor whiteColor];
    title.backgroundColor = [UIColor clearColor];
    self.headerLabel = title;

    [view addSubview:title];

    [view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[title]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(title)]];
    [view addConstraint:[NSLayoutConstraint constraintWithItem:title attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];

    self.headerGradient = [UIColor grayGradient];
    self.headerGradient.frame = CGRectMake(0, 0, 360, 30);

    [view.layer insertSublayer:self.headerGradient atIndex:0];

    return view;
}

-(UILabel *)createLabelWithTitle:(NSString *)title andFont:(UIFont *)font; {
    UILabel *label = [UILabel new];
    label.translatesAutoresizingMaskIntoConstraints = FALSE;
    label.text = title;
    label.font = font;
    label.textAlignment = NSTextAlignmentRight;
    label.textColor = [UIColor whiteColor];
    label.backgroundColor = [UIColor clearColor];

    return label;
}

Here is my UICollectionViewCell file, i just addSubview a DatasetFilterListPanelView to it.

@implementation DatasetViewCell

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {

        [self addSubview:[[DatasetFilterListPanelView alloc] initWithFrame:CGRectMake(0, 0, 360, 160)]];
    }
    return self;
}

When I use the same panels in a UIScrollview, once they are all loaded and positioned, it will scroll smoothly. So it has to be the loading a cell on demand aspect of the UICollectionView.

I followed this UICollectionView Tutorial

EDIT: creating the cell:

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    DatasetViewCell *datasetCell = [collectionView dequeueReusableCellWithReuseIdentifier:DatasetCellIdentifier forIndexPath:indexPath];

    return datasetCell;
}

EDIT 2: Instrument tracing:

Answer 1

Ok, after much playing around I figured out the culprit: constraints! CodaFI was right. I didn't have that many constraints in the panel so i didn't think it could be the issue.

I created a nib file and removed autolayout and it now scrolls smoothly.

Lesson of the day: Constraints are slow to compute!

Answer 2

Generally the problem is that you don't reuse the cells. Make sure you use dequeueReusableCellWithReuseIdentifier:forIndexPath: to reuse existing cells.