Tableview Cell Images Moving To Different Positions When Scrolling - objective-c

Question

When I scroll the table view my images move to the wrong cells. I have set some conditions when an image should be showing or not showing, but no matter what I have tried they just keep moving. My code below.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *cellID = #"myCell";
CustomTableView *cell = [tableView dequeueReusableCellWithIdentifier:cellID];
if (cell == nil) {
if (self.view.frame.size.height == 736) {
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:#"CustomCelliPhone6+" owner:self options:nil];
cell = [nib objectAtIndex:0];
}
else if (self.view.frame.size.height == 667){
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:#"CustomCelliPhone6" owner:self options:nil];
cell = [nib objectAtIndex:0];
}
else if (self.view.frame.size.height == 568) {
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:#"CustomCelliPhone5" owner:self options:nil];
cell = [nib objectAtIndex:0];
}
else if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:#"CustomCelliPad" owner:self options:nil];
cell = [nib objectAtIndex:0];
}
else {
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:#"CustomTableView" owner:self options:nil];
cell = [nib objectAtIndex:0];
}
}
MusicFileInfo *musicFileInfo = [mMusicInfoArray objectAtIndex:indexPath.row];
cell.trackName.text = musicFileInfo.mDesc;
cell.trackName.backgroundColor = [UIColor clearColor];
cell.trackName.font = [UIFont fontWithName:#"AvenirNext-Regular" size:13.0];
if (songPlaying == indexPath.row && mAudioPlayer.isPlaying) {
[cell.playButton setBackgroundImage:[UIImage imageNamed:#"pauseBtn.png"] forState:UIControlStateNormal];
[cell.playButton addTarget:self action:#selector(pause:) forControlEvents:UIControlEventTouchUpInside];
cell.playButton.tag = indexPath.row;
}
else {
[cell.playButton setBackgroundImage:[UIImage imageNamed:#"playBtn.png"] forState:UIControlStateNormal];
[cell.playButton addTarget:self action:#selector(playPreview:) forControlEvents:UIControlEventTouchUpInside];
cell.playButton.tag = indexPath.row;
}
if ([[NSUserDefaults standardUserDefaults] boolForKey:[NSString stringWithFormat:#"pack%li", (long)indexPath.row]] == true || [[NSUserDefaults standardUserDefaults] boolForKey:#"unlockAllTracks"] == true) {
cell.rightImage.image = nil;
}
if ([[NSUserDefaults standardUserDefaults] boolForKey:[NSString stringWithFormat:#"pack%li", (long)indexPath.row]] == false) {
if (indexPath.row <= 4) {
cell.rightImage = nil;
} else
[cell.rightImage setImage:[UIImage imageNamed:#"iapBtnStore.png"]];
}
cell.backgroundColor = [UIColor colorWithRed:231.0f/255.0f green:235.0f/255.0f blue:236.0f/255.0f alpha:1];
cell.tag = indexPath.row;
return cell;
}
The play button and track label are fine, they work as they should, but the rightImage is where the problem is.
The first 5 cells should not have an image on first load, on second load the first 5 cells should have a star image and the rest of the cells should have a padlock image. After an IAP has been made, depending on the indexpath.row then that padlock image should no longer be there.
I am checking that with NSUserDefaults.
I hope I have explained properly.
Thanks for any help

Answer 1

UITableViewCells get reused to increase memory efficiency and performance, so you need to "reset" any elements that might change based on the item's state or it might re-appear somewhere else in the list.
Hence "reusable":
[tableView dequeueReusableCellWithIdentifier:cellID];
if (cell == nil) {
// load nib if needed
}
cell.rightImage = nil; // always reset image