Images getting mixed up in a UITableView - XML parsing - ios

Question

EDIT: Actually images appear fine, it's when I scroll that they get mixed up...
I'm parsing an XML file with links to images which I'm putting into a UITable. For some reason the pictures are getting completely mixed up and when I scroll down the table some of them even start to change! Here's the code I'm using for my UITable:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
Tweet *currentTweet = [[xmlParser tweets] objectAtIndex:indexPath.row];
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
CGRect imageFrame = CGRectMake(2, 8, 40, 40);
customImage = [[UIImageView alloc] initWithFrame:imageFrame];
[cell.contentView addSubview:customImage];
}
NSString *picURL = [currentTweet pic];
if (![picURL hasPrefix:#"http:"]) {
picURL = [#"http:" stringByAppendingString:picURL];
}
customImage.image = [UIImage imageWithData:[NSData dataWithContentsOfURL: [NSURL URLWithString:picURL]]];
return cell;
}
Any idea what I'm doing wrong?
Any help is seriously appreciated. Thx!

Answer 1

Your problem is that if the cell is not nil (i.e. you've successfully reused a cell that has scrolled off the screen), you're not setting the customImage pointer properly (since it is a class instance variable, it has the value from the last cell it created). So, define some non-zero constant for kCustomImageTag and then modify the if statement in cellForRowAtIndexPath to be:
if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
CGRect imageFrame = CGRectMake(2, 8, 40, 40);
customImage = [[UIImageView alloc] initWithFrame:imageFrame];
[cell.contentView addSubview:customImage];
customImage.tag = kCustomImageTag;
}
else
{
customImage = [cell.contentView viewWithTag:kCustomImageTag];
}
Set the tag when you create customImage and use that tag to retrieve an existing customImage in the reused UITableViewCell.

Answer 2

when you ask for a reusable cell, if it's not nil it is a cell that you already allocated and added subviews to it's contentView... you should remove all subviews first in you cellForRow..
if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
CGRect imageFrame = CGRectMake(2, 8, 40, 40);
customImage = [[UIImageView alloc] initWithFrame:imageFrame];
[cell.contentView addSubview:customImage];
} else {
for (UIView *v in cell.contentView)
[v removeFromSuperView];
}

Answer 3

Have a look at this project: https://github.com/bharris47/LIFOOperationQueue
It shows how you can load images in the background with using an NSTable. Additionally, it should be a pretty good of how to not get your images mix-matched.