xcode iphone - jerky scroll UITableView CellForRowAtIndexPath

Question

Hi guys,

Almost sorted with my 1st app, just a simple news app but when I load it onto my iPhone the scroll seems jerky can someone have a look at my function and see if i'm doing something wrong.

I need the image on the right hand side thats why i'm using custom cells.

Thanks For any help

    #define DATELABEL_TAG 1 #define MAINLABEL_TAG 2 #define PHOTO_TAG 3


    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 

{

static NSString *MainNewsCellIdentifier = @"MainNewsCellIdentifier";


UILabel *mainLabel, *dateLabel;

UIImageView *photo;


    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: MainNewsCellIdentifier];


    if (cell == nil) 

{

        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier: MainNewsCellIdentifier] autorelease];

cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;


dateLabel = [[[UILabel alloc] initWithFrame:CGRectMake(15.0,15.0,170.0,15.0)] autorelease];

dateLabel.tag = DATELABEL_TAG;

dateLabel.font = [UIFont systemFontOfSize:10.0];

dateLabel.textAlignment = UITextAlignmentLeft;

dateLabel.textColor = [UIColor darkGrayColor];

dateLabel.autoresizingMask = UIViewAutoresizingFlexibleRightMargin; //| UIViewAutoresizingFlexibleHeight;

[cell.contentView addSubview:dateLabel]; 


mainLabel = [[[UILabel alloc] initWithFrame:CGRectMake(15.0,28.0,170.0,60.0)] autorelease];

mainLabel.tag = MAINLABEL_TAG;

mainLabel.font = [UIFont boldSystemFontOfSize:14.0];

mainLabel.textColor = [UIColor blackColor];

mainLabel.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleRightMargin;

mainLabel.numberOfLines = 0;

//mainLabel.backgroundColor = [UIColor greenColor];

[cell.contentView addSubview:mainLabel];


photo = [[[UIImageView alloc] initWithFrame:CGRectMake(190.0,15.0,85.0,85.0)] autorelease]; 

photo.tag = PHOTO_TAG; 

photo.contentMode = UIViewContentModeScaleAspectFit;//UIViewContentModeScaleAspectFit; //


[cell.contentView addSubview:photo];


    }

else {


dateLabel = (UILabel *)[cell.contentView viewWithTag:DATELABEL_TAG];

mainLabel = (UILabel *)[cell.contentView viewWithTag:MAINLABEL_TAG];

photo = (UIImageView *)[cell.contentView viewWithTag:PHOTO_TAG];

}


NSUInteger row = [indexPath row];

NSDictionary *stream = (NSDictionary *) [dataList objectAtIndex:row];

NSString *title = [stream valueForKey:@"title"];



NSString *titleString = @"";


if( ! [title isKindOfClass:[NSString class]] )

{

titleString  = @"";

}

else 

{

titleString = title;

}


CGSize maximumSize = CGSizeMake(180, 9999);


    UIFont *dateFont = [UIFont fontWithName:@"Helvetica" size:14];

    CGSize dateStringSize = [titleString sizeWithFont:dateFont 

constrainedToSize:maximumSize 

lineBreakMode:mainLabel.lineBreakMode];


    CGRect dateFrame = CGRectMake(15.0, 28.0, 170.0, dateStringSize.height);

    mainLabel.frame = dateFrame;


mainLabel.text = titleString;

dateLabel.text = [stream valueForKey:@"created"];


NSString *i = [NSString stringWithFormat:@"http://www.website.co.uk/images/%@", [stream valueForKey:@"image"]];

NSData *imageURL = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:i]];

UIImage *newsImage = [[UIImage alloc] initWithData:imageURL];


photo.image = newsImage; 

[imageURL release];

[newsImage release];


    return cell;

}

Answer 1

The problem is this:

NSString *i = [NSString stringWithFormat:@"http://www.website.co.uk/images/%@", [stream valueForKey:@"image"]];

NSData *imageURL = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:i]];

UIImage *newsImage = [[UIImage alloc] initWithData:imageURL];

You effectively say here, that as soon as the cell needs to be displayed, the image must be fetched and presented. This will cost some time - too much for a good user experience.

You should fetch the images before or while you present the table view, and cache them, e.g. in an array. Or you must handle things asynchronously, meaning that you do the loading in the background, and not wait with return cell; until the image is actually downloaded. This will be a little harder to get right.