Reused cell keeps getting double labels - ios

Question

So, I'm trying to implement a UITableView with custom cells. However, when I scroll text is being overlaid on other text in reused cells.
This is how I construct the cell:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString * reuseIdentifier = #"programmaticCell";
MGSwipeTableCell * cell = [self.tableView dequeueReusableCellWithIdentifier:reuseIdentifier];
if (!cell) {
cell = [[MGSwipeTableCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:reuseIdentifier];
}
CGFloat brightness = [UIScreen mainScreen].brightness;
if (brightness < 0.4) {
cell.backgroundColor = [UIColor darkGrayColor];
cell.textLabel.textColor = [UIColor whiteColor];
cell.detailTextLabel.textColor = [UIColor whiteColor];
}
NSString *imageUrl = [NSString stringWithFormat: #"%#", [self.streams[indexPath.row] plaatje]];
UIImageView *image = [[UIImageView alloc] initWithFrame:CGRectMake(5, 5, 55, 55)];
__block UIActivityIndicatorView *activityIndicator;
__weak UIImageView *weakImageView = image;
[image sd_setImageWithURL: imageUrl
placeholderImage:[UIImage imageNamed:#"tile-blue.png"]
options:SDWebImageProgressiveDownload
progress:^(NSInteger receivedSize, NSInteger expectedSize) {
if (!activityIndicator) {
[weakImageView addSubview:activityIndicator = [UIActivityIndicatorView.alloc initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray]];
activityIndicator.center = weakImageView.center;
[activityIndicator startAnimating];
}
}
completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
[activityIndicator removeFromSuperview];
activityIndicator = nil;
}];
UIView *cellView=[[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 65)];
[cellView addSubview:image ];
UILabel *nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(65, 15, self.view.frame.size.width, 20)];
nameLabel.text = [[self.streams[indexPath.row] name] capitalizedString];
nameLabel.textAlignment = NSTextAlignmentLeft;
nameLabel.font = [UIFont systemFontOfSize:20];
UILabel *publishLabel = [[UILabel alloc] initWithFrame:CGRectMake(65, 35, 100, 20)];
publishLabel.text = [[self.streams[indexPath.row] published] capitalizedString];
publishLabel.textAlignment = NSTextAlignmentLeft;
publishLabel.font = [UIFont systemFontOfSize:13];
if (brightness < 0.4) {
nameLabel.textColor = [UIColor whiteColor];
publishLabel.textColor = [UIColor whiteColor];
} else {
nameLabel.textColor = [UIColor blackColor];
publishLabel.textColor = [UIColor blackColor];
}
[cellView addSubview:nameLabel];
[cellView addSubview:publishLabel];
[cell addSubview:cellView];
[cell sendSubviewToBack:cellView];
cell.delegate = self; //optional
return cell;
}
And this is MGSwipeTableCell's prepareForReuse method that I rewrote:
-(void) prepareForReuse
{
[super prepareForReuse];
self.textLabel.text = nil;
self.detailTextLabel.text = nil;
self.imageView.image = nil;
[self cleanViews];
BOOL cleanButtons = _delegate && [_delegate respondsToSelector:#selector(swipeTableCell:swipeButtonsForDirection:swipeSettings:expansionSettings:)];
[self initViews:cleanButtons];
}
What am I doing wrong here?

Answer 1

Every time your method is called, you try to dequeue a cell. This is correct.
However, all of your code after that assumes you're getting a new cell, which is incorrect. You're making new labels each time, and adding them to the cell each time, when the dequeued cells already have these labels.
Either use viewWithTag: to check if the labels are there (and only create them if they're not), or make a custom table cell subclass with properties for each label.
Your implementation of tableview:cellForRowAtIndexPath: needs to be idempotent, meaning you should write your code so that it can be called multiple times over and over, and always return an identical cell.

Answer 2

Your problem may be because you are recreating the items for the cells every time.
Try sub-classing UITableViewCell and move all of your code into it. Set up properties for all of your labels/imageViews/etc. You can even create an xib and use autolayout with IBOutlets to manage the way the cell looks.
If you end up creating an xib though, just be aware that you have to register the nib in your tableView class before you can use it.
self.tableView registerNib:[UINib nibWithNibName:#"nameOfXibFile" bundle:nil]; forCellReuseIdentifier:#"customIdentifier"];
When you do this, it will be referencing the same label/image/etc objects each time it reuses the cell and won't be creating new objects.