UITableViewCell With Subviews Does Not Being Reused

Question

I added a simple UITableView to my screen. However, I want the cells in it to display a bunch of custom UI elements (mostly view and labels). Since UITableViewCell does not give me a whole lot of opportunity to customize it freely, I decided to add all the elements I need as subviews of the cell. Here is my cellForRowAtIndexPath method:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil)
{
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                  reuseIdentifier:CellIdentifier];
}

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(10.0f, 10.0f, 25.0f, 25.0f)];
view1.backgroundColor = [UIColor redColor];
view1.layer.shadowColor = [[UIColor blackColor] CGColor];
view1.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
view1.layer.shadowOpacity = 0.8f;
view1.layer.shadowRadius = 3.0f;
[cell addSubview:view1];

UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(85.0f, 5.0f, 100.0f, 15.0f)];
label1.text = @"dummy text 1";
label1.backgroundColor = [UIColor clearColor];
label1.textColor = [UIColor lightGrayColor];
label1.textAlignment = UITextAlignmentRight;
label1.font = [UIFont systemFontOfSize:12.0f];
label1.lineBreakMode = NSLineBreakByTruncatingTail;
label1.shadowOffset = CGSizeMake(0.0f, 1.0f);
label1.shadowColor = [UIColor blackColor];
[cell addSubview:label1];

UILabel *label2 = [[UILabel alloc] initWithFrame:CGRectMake(85.0f, 25.0f, 100.0f, 15.0f)];
label2.text = @"dummy text 2";
label2.backgroundColor = [UIColor clearColor];
label2.textColor = [UIColor lightGrayColor];
label2.textAlignment = UITextAlignmentRight;
label2.font = [UIFont systemFontOfSize:12.0f];
label2.lineBreakMode = NSLineBreakByTruncatingTail;
label2.shadowOffset = CGSizeMake(0.0f, 1.0f);
label2.shadowColor = [UIColor blackColor];
[cell addSubview:label2];

UILabel *label3 = [[UILabel alloc] initWithFrame:CGRectMake(85.0f, 45.0f, 100.0f, 15.0f)];
label3.text = @"dummy text 3";
label3.backgroundColor = [UIColor clearColor];
label3.textColor = [UIColor lightGrayColor];
label3.textAlignment = UITextAlignmentRight;
label3.font = [UIFont systemFontOfSize:12.0f];
label3.lineBreakMode = NSLineBreakByTruncatingTail;
label3.shadowOffset = CGSizeMake(0.0f, 1.0f);
label3.shadowColor = [UIColor blackColor];
[cell addSubview:label3];

return cell;
}

All the above code works fine as far as cell customization goes. The problem is that, when a cell leaves the visible area, its subviews are not being released. As I move the tableview up and down, the shadow on the added UIView gets darker and darker, and I am guessing the labels are not being released either.

How do I fix this problem? I guess I could subclass a UITableViewCell class, but I would just be adding the subviews within a cell's class. It doesn't seem to be a solution. Is there a way to make the cell release its subviews when it disappears or a reliable way to truly and freely customize a cell?

Thanks!

A few additional info: I do not use IB (do everything programmatically) I use ARC I use Xcode 4.6 My SDK is iOS 6.1

Answer 1

The issue is that cells are recycled. Think about it. You have attached all those UIViews to the cell each time your initialize or reuse a cell. Simply moving the paren will result in attachment of views only at initialization.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (cell == nil)
    {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                       reuseIdentifier:CellIdentifier];

        UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(10.0f, 10.0f, 25.0f, 25.0f)];
        view1.backgroundColor = [UIColor redColor];
        view1.layer.shadowColor = [[UIColor blackColor] CGColor];
        view1.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
        view1.layer.shadowOpacity = 0.8f;
        view1.layer.shadowRadius = 3.0f;
        [cell addSubview:view1];

        UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(85.0f, 5.0f, 100.0f, 15.0f)];
        label1.text = @"dummy text 1";
        label1.backgroundColor = [UIColor clearColor];
        label1.textColor = [UIColor lightGrayColor];
        label1.textAlignment = UITextAlignmentRight;
        label1.font = [UIFont systemFontOfSize:12.0f];
        label1.lineBreakMode = NSLineBreakByTruncatingTail;
        label1.shadowOffset = CGSizeMake(0.0f, 1.0f);
        label1.shadowColor = [UIColor blackColor];
        [cell addSubview:label1];

        UILabel *label2 = [[UILabel alloc] initWithFrame:CGRectMake(85.0f, 25.0f, 100.0f, 15.0f)];
        label2.text = @"dummy text 2";
        label2.backgroundColor = [UIColor clearColor];
        label2.textColor = [UIColor lightGrayColor];
        label2.textAlignment = UITextAlignmentRight;
        label2.font = [UIFont systemFontOfSize:12.0f];
        label2.lineBreakMode = NSLineBreakByTruncatingTail;
        label2.shadowOffset = CGSizeMake(0.0f, 1.0f);
        label2.shadowColor = [UIColor blackColor];
        [cell addSubview:label2];

        UILabel *label3 = [[UILabel alloc] initWithFrame:CGRectMake(85.0f, 45.0f, 100.0f, 15.0f)];
        label3.text = @"dummy text 3";
        label3.backgroundColor = [UIColor clearColor];
        label3.textColor = [UIColor lightGrayColor];
        label3.textAlignment = UITextAlignmentRight;
        label3.font = [UIFont systemFontOfSize:12.0f];
        label3.lineBreakMode = NSLineBreakByTruncatingTail;
        label3.shadowOffset = CGSizeMake(0.0f, 1.0f);
        label3.shadowColor = [UIColor blackColor];
        [cell addSubview:label3];
    }

    return cell;
}

That said... If you want to make those cells interesting by adding content, you will need to remove them each time from the cell or hold a reference to the cells subviews. Final point, don't just remove all the views if you can help it. If the values are simply changing, subclass UITableViewCell and make your own custom class that let's you set the views unique values.

Answer 2

You can make your code work in two ways.

The correct way is subclassing it and exposing added views as properties.

The wrong way would be to modify your code like this:

if (cell == nil)
{
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                  reuseIdentifier:CellIdentifier];
}

for (UIView *cellView in sell.view)
{
    [cellView removeFromSuperVuew];
}

You notice yourself that the shadow is getting darker and darker. That is because it is added (among all the other subviews) each time you load (and not only when you create) your cell.

When you decide to sublass don't forget to imlement:

- (NSString *)reuseIdentifier
{
  return @"hereGoesTeuseIdentifierThatYouWillUseForThissKindOfCell";
}

Answer 3

You should create a UITableViewCell subclass and do all the customization there.