Custom UITableViewCell as a delegate - UI elements are getting unexpectedly reused - iphone

Question

I've created a custom UITableViewCell and each cell is passed a custom subclass of AVPlayer object from the UITableViewController. On each cell I have a play button, pause button and loading indicator.
When I play the audio, elements work as required, and change when player state has changed e.g. when playing, pause button appears, play button disappears. When I play audio on a second cell, the first cell knows this, resets it button state, and the second cell does it's business.
So this functionality works perfectly, the only problem is because the UITableViewCells get reused, when I scroll down to cells below, I start seeing the pause button appear on them. This is because they are the same cells as the ones above (reused) and because my cells are delegates for my custom subclass of AVPlayer, the audio player is sending messages to a cell which isn't the correct one.
What can I do to make each UITableViewCell a separate delegate object for my AVPlayer?

Answer 1

You have to remove the elements from the cells upon reuse:
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
} else {
/* prepare for reuse */
[cell.playButton removeFromSuperview];
/* or */
[[cell viewWithTag:10] removeFromSuperview];
}

Answer 2

I had the same problem with images I'm loading from a JSON blob. I used GCD and saved my images to an NSDictionary paired with the key assigned to each cell.
- (UIImage *)imageForRowAtIndexPath:(NSIndexPath *)indexPath
{
// get the dictionary for the indexPath
NSDictionary *tweet = [tweets objectAtIndex:[indexPath row]];
// get the user dictionary for the indexPath
NSDictionary *user = [tweet objectForKey:#"posts"];
//get the image URL
NSURL *url = [NSURL URLWithString:[[[[[tweet objectForKey:#"photos"] objectAtIndex:0] objectForKey:#"alt_sizes"] objectAtIndex:3] objectForKey:#"url"]];
// get the user's id and check for a cached image first
NSString *userID = [user objectForKey:#"id"];
UIImage *image = [self.images objectForKey:userID];
if(!image)
{
// if we didn't find an image, create a placeholder image and
// put it in the "cache". Start the download of the actual image
image = [UIImage imageNamed:#"Placeholder.png"];
[self.images setValue:image forKey:userID];
//get the string version of the URL for the image
//NSString *url = [user objectForKey:#"profile_image_url"];
// create the queue if it doesn't exist
if (!queue) {
queue = dispatch_queue_create("image_queue", NULL);
}
//dispatch_async to get the image data
dispatch_async(queue, ^{
NSData *data = [NSData dataWithContentsOfURL:url];
UIImage *anImage = [UIImage imageWithData:data];
[self.images setValue:anImage forKey:userID];
UITableViewCell *cell = [self.tableView cellForRowAtIndexPath:indexPath];
//dispatch_async on the main queue to update the UI
dispatch_async(dispatch_get_main_queue(), ^{
cell.imageView.image = anImage;
});
});
}
// return the image, it could be the placeholder, or an image from the cache
return image;
}

Answer 3

I solved the problem by making the UITableViewController the delegate for the audio player. Then saving the "currently playing" cell's indexPath to a #property in the UITableViewController.
Then in - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath I check to see if the indexPath is the same as the "currently playing" cell's indexPath, if so set the "audio playing" button arrangent, if not then set the default button arrangement.
This works better in distinguishing cells as you have a unique identifier indexPath to compare them with.