Conditionally display image in UITableViewCell - ios

Question

I'm trying to display an image in only certain cells in my UITableView. Here's a my configureCell method:
-(void)configureCell:(UITableViewCell *)cell atIndexPath:(NSIndexPath *)indexPath {
StoryInfo *info = [self.fetchedResultsController objectAtIndexPath:indexPath];
UIImage *ribbon = [UIImage imageNamed:#"ribbon.png"];
UIImageView *ribbonView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 15, 15)];
[ribbonView setImage:ribbon];
[cell addSubview:ribbonView];
if([[NSNumber numberWithBool:NO] isEqualToNumber:info.visited]) {
cell.textLabel.textColor = [UIColor colorWithRed:53/255.0 green:53/255.0 blue:52/255.0 alpha:1];
ribbonView.hidden = NO;
}
else {
cell.textLabel.textColor = [UIColor colorWithRed:128.0/255.0 green:128.0/255.0 blue:128.0/255.0 alpha:1.0];
ribbonView.hidden = YES;
}
}
And here's cellForRowAtIndexPath:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
// set up the cell...
[self configureCell:cell atIndexPath:indexPath];
return cell;
}
This doesn't quite work because at first, all of the cells draw them ribbonView, regardless of the value of info.visited. I've stepped through the if/else and I see that the hiding code it being hit, though. But, if I navigate away from the list, and then come back, the correct ribbon state is visible. Scrolling the table view breaks it again.
The font colors are always correct, though.

Answer 1

If you are reusing cells, then it could likely be that you are adding multiple ribbonView subviews to the cell, so even if the info.visited for the current indexPath is NO, there is another ribbonView leftover on the cell that you can still see.
The thing to do is make certain you only ever have one ribbonView subview, which can be done either by removing old ribbonViews in your configuration method, or better by subclassing UITableViewCell and adding a ribbonView property to the cell, which gets set once and added to the cell's view hierarchy once, and which you can then access and set hidden to NO or YES in the configuration method.
EDIT: The cell text color will always be correct since you are changing the color on one instance of UILabel that is in the cell's view hierarchy. I expect you'd see the same buggy behavior if instead your configuration method added a new UILabel subview to the cell each time it was configured.
EDIT: Code to try
-(void)configureCell:(UITableViewCell *)cell atIndexPath:(NSIndexPath *)indexPath {
static NSInteger ribbonTag = 12345;
StoryInfo *info = [self.fetchedResultsController objectAtIndexPath:indexPath];
// re-use a ribbonView if one's already been added to this cell
UIImageView *ribbonView = [cell.contentView viewWithTag:ribbonTag];
if (!ribbonView){
ribbonView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 15, 15)];
ribbonView.tag = ribbonTag;
UIImage *ribbon = [UIImage imageNamed:#"ribbon.png"];
[ribbonView setImage:ribbon];
// add subviews to contentView
[cell.contentView addSubview:ribbonView];
}
if([[NSNumber numberWithBool:NO] isEqualToNumber:info.visited]) {
cell.textLabel.textColor = [UIColor colorWithRed:53/255.0 green:53/255.0 blue:52/255.0 alpha:1];
ribbonView.hidden = NO;
}
else {
cell.textLabel.textColor = [UIColor colorWithRed:128.0/255.0 green:128.0/255.0 blue:128.0/255.0 alpha:1.0];
ribbonView.hidden = YES;
}
}

Answer 2

If you are using dequeueReusableCellWithIdentifier:forIndexPath: in the tableView:cellForRowAtIndexPath: method. Every time you reutilize a cell, you will create a new UIImageView and put it over the last one.
But to solve this you dont need to subclass. Not yet, because your cells are simple still. If you want to add more subviews, then subclassing is the only option.
One solution I can think of would be this:
-(void)configureCell:(UITableViewCell *)cell atIndexPath:(NSIndexPath *)indexPath {
StoryInfo *info = [self.fetchedResultsController objectAtIndexPath:indexPath];
UIImageView *ribbonView = nil;
//My code:
for ( UIView *childView in cell.subviews ) {
if([childView isKindOfClass:[UIImageView class]] {
ribbonView = childView;
break;
}
}
//Note: this doesnt work if you have more than one UIImageView in your cell.
if(ribbonView == nil) {
UIImage *ribbon = [UIImage imageNamed:#"ribbon.png"];
ribbonView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 15, 15)];
[ribbonView setImage:ribbon];
[cell addSubview:ribbonView];
}
//Ends here.
if([[NSNumber numberWithBool:NO] isEqualToNumber:info.visited]) {
cell.textLabel.textColor = [UIColor colorWithRed:53/255.0 green:53/255.0 blue:52/255.0 alpha:1];
ribbonView.hidden = NO;
}
else {
cell.textLabel.textColor = [UIColor colorWithRed:128.0/255.0 green:128.0/255.0 blue:128.0/255.0 alpha:1.0];
ribbonView.hidden = YES;
}
}
Try it and tell me if it works.
Good luck.

Answer 3

That is definitely an issue in implementation of
tableView:cellForRowAtIndexPath:
You need to always call
dequeueReusableCellWithIdentifier:forIndexPath:
and then call your configure method
configureCell:atIndexPath:(NSIndexPath *)indexPath
EDIT:
Also, I think you also need to do [cell.contentView addSubView:...] instead of [cell addSubView:...]