Goal - C: Change the contents of a UITableView on a scroll

Question

I am using QuickBlox Framework to create a chat application. Nowadays, when a chat opens, everything looks great.

However, when users start scrolling up and down the chat history, some of the cells begin to change (for example, they will show an image that should be placed on another line).

Below is my code for cellForRowAtIndexPath, if anyone can tell me what I'm doing wrong

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { QBChatMessage *message = [[ChatService shared] messagsForDialogId:self.dialog.ID][indexPath.row]; if (message.attachments.count > 0) { ImageTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ImageCellIdentifier]; [cell configureCellWithImage:message]; cell.backgroundColor = [UIColor whiteColor]; return cell; } else { ChatMessageTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ChatMessageCellIdentifier]; [cell configureCellWithMessage:message]; cell.backgroundColor = [UIColor whiteColor]; return cell; } } 

EDIT . See below my method ImageCableWithImage ImageTableViewCell:

 - (void) configureCellWithImage:(QBChatMessage*)message { NSString *time = [message.dateSent timeAgoSinceNow]; if ([QBSession currentSession].currentUser.ID == message.senderID) { // Message was sent by me NSData *imageData = [FTWCache objectForKey:[NSString stringWithFormat:@"%@", [message.attachments[0] valueForKey:@"ID"]]]; if (imageData) { // image is already downloaded dispatch_async(dispatch_get_main_queue(), ^{ UIImage *image = [UIImage imageWithData:imageData]; UIImageView *cellImage = [[UIImageView alloc] init]; [self.backgroundImageView setFrame:CGRectMake(320-155, 10, 140, 140)]; cellImage.frame = CGRectMake(7, 7, 120, 120); [cellImage setContentMode:UIViewContentModeScaleAspectFill]; cellImage.clipsToBounds = YES; cellImage.layer.cornerRadius = 5; cellImage.image = image; self.backgroundImageView.image = aquaBubble; [self.backgroundImageView addSubview:cellImage]; [self.contentView addSubview:self.backgroundImageView]; }); } else { // downloads the image and displays as above } } else { // Message was sent by another user NSData *imageData = [FTWCache objectForKey:[NSString stringWithFormat:@"%@", [message.attachments[0] valueForKey:@"ID"]]]; if (imageData) { dispatch_async(dispatch_get_main_queue(), ^{ UIImage *image = [UIImage imageWithData:imageData]; UIImageView *cellImage = [[UIImageView alloc] init]; [self.backgroundImageView setFrame:CGRectMake(padding/2, padding+5, 140, 140)]; cellImage.frame = CGRectMake(13, 7, 120, 120); [cellImage setContentMode:UIViewContentModeScaleAspectFill]; cellImage.layer.cornerRadius = 5; cellImage.clipsToBounds = YES; cellImage.image = image; self.timeLabel.frame = CGRectMake(20, self.backgroundImageView.frame.size.height + 20, 80, 20); self.timeLabel.text = [NSString stringWithFormat:@"%@", time]; [self.timeLabel setFont:[UIFont systemFontOfSize:10.0]]; [self.timeLabel setTextColor:[UIColor blackColor]]; [self.contentView addSubview:self.timeLabel]; self.nameAndDateLabel.textAlignment = NSTextAlignmentLeft; QBUUser *sender = [ChatService shared].usersAsDictionary[@(message.senderID)]; NSInteger loginForColor = [sender.login integerValue]; loginForColor = loginForColor % 255; self.nameAndDateLabel.text = [NSString stringWithFormat:@"%@", sender.fullName]; self.backgroundImageView.image = orangeBubble; [self.backgroundImageView addSubview:cellImage]; [self.contentView addSubview:self.backgroundImageView]; }); } else { // downloads the image and displays as above } } } 

Answer 1

Cells are reused. Therefore, you should always set / reset all the properties of the cell every time.

For every if that sets a cell property, there must be an else that resets the same property - even if it just clears the value.

You should also avoid adding subviews again and again each time you use a cell. You have code that creates and adds an image representation to the cell. But you keep adding new images over and over again. Just add it once if necessary. If it already exists, update it with a new image instead of adding a new one.

Answer 2

The error should lie in the configureCellWithImage and configureCellWithMessage functions.

I did not see the code of these functions, but I am sure that you did not clear the image content on configureCellWithMessage.