UITableViewCell subviews added to wrong cells when scrolled

Question

I have a subclass of UITableViewCell, and I am having problems with scrolling. All of the subviews are added to the cell in the storyboard, except for one UIView. I want to add this UIView as a subview of the cell based on a condition. The problem is that when the cells are scrolled off and onto the screen, the UIView is added to the cell a second time, or to the wrong cell. Here is my code, can you tell me what I am doing wrong?

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    WavesFeedCell *cell = (WavesFeedCell *)[tableView dequeueReusableCellWithIdentifier:WavesFeedCellIdentifier forIndexPath:indexPath];

    cell.cellWaveObject = [self.wavesArray objectAtIndex:indexPath.row];

    //set the frames and text for the labels
    cell.timeStampLabel.text = @"14m";
    cell.waveTextLabel.text = cell.cellWaveObject.waveString;
    cell.wavedByLabel.text = [NSString stringWithFormat:@"Waved by %@", cell.cellWaveObject.wavedByString];

    //round the corners of the image view
    [self setCornerRadiusForImageView:cell.profilePictureImageView];

    //does the wave object have any agrees?
    if (cell.cellWaveObject.numberOfAgrees > 0)
    {
        UIView *agreedView = [[UIView alloc] init];

        UILabel *numberOfAgreesLabel = [[UILabel alloc] init];
        numberOfAgreesLabel.font = [UIFont boldSystemFontOfSize:13.0f];
        numberOfAgreesLabel.textColor = [UIColor whiteColor];

        if (cell.cellWaveObject.numberOfAgrees > 1)
        {
            numberOfAgreesLabel.text = [NSString stringWithFormat:@"+%i Agree", cell.cellWaveObject.numberOfAgrees];
        }
        else
        {
            numberOfAgreesLabel.text = [NSString stringWithFormat:@"+%i Agrees", cell.cellWaveObject.numberOfAgrees];

        }

        UIImageView *backgroundImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:AgreedViewImage]];

        //get the width of the string
        CGSize constraintSize = CGSizeMake(242.0f, 16.0f);
        CGSize stringSize = [numberOfAgreesLabel.text sizeWithFont:numberOfAgreesLabel.font constrainedToSize:constraintSize];
        CGFloat agreedViewWidth = stringSize.width + 10.0f;

        //adjust the frame and add it to the cell
        agreedView.frame = CGRectMake(310.0f - agreedViewWidth, cell.wavedByLabel.frame.origin.y, agreedViewWidth, 14.0f);

        backgroundImageView.frame = CGRectMake(5.0f, 0.0f, agreedView.frame.size.width, agreedView.frame.size.height);
        numberOfAgreesLabel.frame = CGRectMake(5.0f, 0.0f, agreedView.frame.size.width, agreedView.frame.size.height);
        [agreedView addSubview:backgroundImageView];
        [agreedView addSubview:numberOfAgreesLabel];

        [cell.contentView addSubview:agreedView];
        return cell;
    }
    else
    {
        return cell;
    }
}

Answer 1

May be added subview is not removing from cell.Content View . Try using following code within cellForRow method

UIView *agreedView=(UIView*)[cell.contentView viewWithTag:21];

//does the wave object have any agrees?
if (cell.cellWaveObject.numberOfAgrees > 0)
{
    if (!agreedView) {
        agreedView=[[UIView alloc] init];
        agreedView.tag=21;

        UILabel *numberOfAgreesLabel = [[UILabel alloc] init];
        numberOfAgreesLabel.font = [UIFont boldSystemFontOfSize:13.0f];
        numberOfAgreesLabel.textColor = [UIColor whiteColor];
        numberOfAgreesLabel.tag=22;

        UIImageView *backgroundImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:AgreedViewImage]];
        backgroundImageView.tag=23;

        [agreedView addSubview:backgroundImageView];
        [agreedView addSubview:numberOfAgreesLabel];

        [cell.contentView addSubview:agreedView];
        }

        numberOfAgreesLabel=(UILabel*)[agreedView viewWithTag:22];
        backgroundImageView=(UIImageView*)[agreedView viewWithTag:23];

        if (cell.cellWaveObject.numberOfAgrees > 1)
        {
            numberOfAgreesLabel.text = [NSString stringWithFormat:@"+%i Agree", cell.cellWaveObject.numberOfAgrees];
        }
        else
        {
            numberOfAgreesLabel.text = [NSString stringWithFormat:@"+%i Agrees", cell.cellWaveObject.numberOfAgrees];
        }

        //get the width of the string
        CGSize constraintSize = CGSizeMake(242.0f, 16.0f);
        CGSize stringSize = [numberOfAgreesLabel.text sizeWithFont:numberOfAgreesLabel.font constrainedToSize:constraintSize];
        CGFloat agreedViewWidth = stringSize.width + 10.0f;

        //adjust the frame and add it to the cell
        agreedView.frame = CGRectMake(310.0f - agreedViewWidth, cell.wavedByLabel.frame.origin.y, agreedViewWidth, 14.0f);

        backgroundImageView.frame = CGRectMake(5.0f, 0.0f, agreedView.frame.size.width, agreedView.frame.size.height);
        numberOfAgreesLabel.frame = CGRectMake(5.0f, 0.0f, agreedView.frame.size.width, agreedView.frame.size.height);

    return cell;
}
else
{
    if (agreedView) {
        [agreedView removeFromSuperview];
    }

    return cell;
}

Answer 2

Better you set frames for your custom views in subclassed UITableView cell's class hear is the sample code

  //.h file of subclassed UITableView cell

  #import <UIKit/UIKit.h>

  @interface WavesFeedCell : UITableViewCell


  @property(nonatomic, retain)UILabel *timeStampLabel; 
  @property(nonatomic, retain)UILabel *waveTextLabel;
  @property(nonatomic, retain)UILabel *wavedByLabel;
  @property(nonatomic, retain) id cellWaveObject; //your object from array

  @end

  //.m file  subclassed UITableView cell

  #import "WavesFeedCell.h"

  @implementation WavesFeedCell

  - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
  {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
    // Initialization code
    UILabel *label1 = [[UILabel alloc]initWithFrame:CGRectZero];
    UILabel *label2 = [[UILabel alloc]initWithFrame:CGRectZero];
    UILabel *label3 = [[UILabel alloc]initWithFrame:CGRectZero];

    self.timeStampLabel  = label1;
    self.waveTextLabel = label2;
    self.wavedByLabel = label3;

    //these are added with zero rect
    [self addSubview:label1];
    [self addSubview:label2];
    [self addSubview:label3];

    //for agreed imageview
    UIImageView *agreedImgView = [[UIImageView alloc]initWithFrame:CGRectZero];
    agreedImgView.tag = 200; //to access in layoutsubviews.
    [self addSubview:agreedImgView];

    //without ARC
    [agreedImgView release];
    [label1 release];
    [label2 release];
    [label3 release];

   }
   return self;
 }

 - (void)setSelected:(BOOL)selected animated:(BOOL)animated
 {
     [super setSelected:selected animated:animated];

// Configure the view for the selected state
 }

 - (void)layoutSubviews
 {
  [super layoutSubviews];
  //hear set frames for all labels
  self.timeStampLabel.frame = CGRectMake(5, 5, self.bounds.size.width-30.0f, 40.0f);
  self.waveTextLabel.frame = CGRectMake(5, 45, self.bounds.size.width-30.0f, 40.0f);
  self.wavedByLabel.frame = CGRectMake(5, 95, self.bounds.size.width-30.0f, 40.0f);

  //hear you check weather it is agreed or not
  if(self.cellWaveObject.numberOfAgrees > 1)
  {
      UIImageView *agreedView = (UIImageView *)[self viewWithTag:200];
     //set frme for imageview as you did
     // remember dont add any views hear and set your required frames only because this method called many times


  }

 //in other class
 //.m file
 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
  {

      WavesFeedCell *cell = [self.aTableView  dequeueReusableCellWithIdentifier:@"WavesFeedCell"];
    if(cell == nil)
      {
          cell = [[WavesFeedCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"WavesFeedCell"];
      }
   //set cell properties 

   return cell;
  }