UITableView imageView reuse other cell's image

Question

I need to make a UITableView with different numbers of images posted in it, something like Facebook or Twitter or WeChat friends. return dynamic cell height and arrange images depends on the number of them.

It should looks like this

And I do the dynamic cell height for image as:

in HomeTableViewCell.m

Make the height auto layout constraint of view which contains post images as property

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *height;

and set the constant of it to different value to make cell dynamic height

self.height.constant = imageArray.count > 3 ? 260.0 : imageArray.count == 0 ? 0.0 : 130.0;

And also do height for text as:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return UITableViewAutomaticDimension;

}

- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath {
    HomeTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
    return 130 + cell.height.constant;
}

After done, it works well the same as the first picture, then I load images via SDWebImage framework, I create imageCollection of max 6 images in cell

@property (strong, nonatomic) IBOutletCollection(UIImageView) NSArray *imageViewCollection;

- (void)loadCellDataWithInfo: (SharedUserInfo *)info {

self.userInfo = info;
[self.avatarImageView sd_setImageWithURL:[NSURL URLWithString:info.profileImageUrlStr] placeholderImage:[UIImage imageNamed:@"penguinMe"]];

self.avatarImageView.layer.cornerRadius = self.avatarImageView.frame.size.width/2.0;
self.name.text = info.fullName;
self.username.text = info.userName;
self.text.text = [info.postDic objectForKey:@"text"];
self.likeLabel.text = [NSString stringWithFormat:@"%li", [[info.postDic objectForKey:@"likesCount"]integerValue]];
self.commentLabel.text = [NSString stringWithFormat:@"%li", [[info.postDic objectForKey:@"commentsCount"]integerValue]];
self.elapsed.text = [info.postDic objectForKey:@"elapsed"];

NSArray *imageArray = [info.postDic objectForKey:@"images"];

[self loadImagesWithURLStr:imageArray];

self.height.constant = imageArray.count > 3 ? 260.0 : imageArray.count == 0 ? 0.0 : 130.0;

}

- (void)loadImagesWithURLStr: (NSArray *)urlStrArray {

switch (urlStrArray.count) {
    case 0:
        break;
    case 4:
        for (int index = 0; index < urlStrArray.count; index++) {
            if (index >= 2) {
                [self.imageViewCollection[index + 1] sd_setImageWithURL:[NSURL URLWithString:urlStrArray[index]]];
            } else {
                [self.imageViewCollection[index] sd_setImageWithURL:[NSURL URLWithString:urlStrArray[index]]];
            }
        }
        break;

    default:
        for (int index = 0; index < urlStrArray.count; index++) {
            [self.imageViewCollection[index] sd_setImageWithURL:[NSURL URLWithString:urlStrArray[index]]];
        }
        break;
}  
}

And now I met problem, with some cell without images will load some images from somewhere else repeatedly, it seems only cell without any post images will met such a problem

Cell do have images works well, it depends on the imagesArray which contains different numbers of image URL String

At last all my reuse code and cell part code

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
HomeTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];

[cell loadCellDataWithInfo:self.followingArray[indexPath.row]];

return cell;
}

- (void)loadCellDataWithInfo: (SharedUserInfo *)info {

self.userInfo = info;
[self.avatarImageView sd_setImageWithURL:[NSURL URLWithString:info.profileImageUrlStr] placeholderImage:[UIImage imageNamed:@"penguinMe"]];

self.avatarImageView.layer.cornerRadius = self.avatarImageView.frame.size.width/2.0;
self.name.text = info.fullName;
self.username.text = info.userName;
self.text.text = [info.postDic objectForKey:@"text"];
self.likeLabel.text = [NSString stringWithFormat:@"%li", [[info.postDic objectForKey:@"likesCount"]integerValue]];
self.commentLabel.text = [NSString stringWithFormat:@"%li", [[info.postDic objectForKey:@"commentsCount"]integerValue]];
self.elapsed.text = [info.postDic objectForKey:@"elapsed"];

NSArray *imageArray = [info.postDic objectForKey:@"images"];

[self loadImagesWithURLStr:imageArray];

self.height.constant = imageArray.count > 3 ? 260.0 : imageArray.count == 0 ? 0.0 : 130.0;

}

So above all, it's the problem with reuse imageViewCollection, any suggestions? Appreciated for that.

Answer 1

You have to use two different cell reuseIdentifier . One identifier(say for example cell1) for cell having Images(say for example cell2) and one for cell do not having images. So you have to take two different UITableViewCell .

Code will be something like below :

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
if(imagesArr.count == 0)
{
cellIdentifier = @"cell1";
}
else{
cellIdentifier = @"cell2";
}
 HomeTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];


 [cell loadCellDataWithInfo:self.followingArray[indexPath.row]];

  return cell;
}