Strange display issue with UISwitch in a UITableView

Question

I am using the below code to add a UISwitch to a UITableView cell, but am getting a strange display issue. The problem seems to occur because I am automatically refreshing the TableView on a regular basis, which recreates the UISwitch.

A picture is best to show what is happening.

Begins like this: Starts like this

Turns into this:

The top switch was turned on and off. It takes a few minutes to get to this state (with the black fuzz), but you can see problems as soon as you turn a UISwitch on and then off.

Here is the code:-

static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

//Includes code that also adds a UITextView and a UIImageView, but these do not have issues.

UISwitch *switchView = [[UISwitch alloc] initWithFrame:CGRectMake(10, 5.0, 60.0, 50.0)];
[switchView addTarget:self action:@selector(updateSwitchAtIndexPath:) forControlEvents:UIControlEventValueChanged];

[cell.contentView addSubview:switchView];

return cell;

This is on a device, IOS7. iPad Mini Retina, running an iPhone App. — Remixed123, Jul 29 '14 at 18:07
This is an example of a "cell reuse bug". You may have also noticed that your switches were resetting themselves when you scroll them off-screen. — CrimsonChris, Jul 29 '14 at 19:04
CrimsonChris - Is this a bug with a framework or my code? I have not been able to determine a way around it yet. — Remixed123, Aug 04 '14 at 11:14
@Remixed123 This is a bug with your code. See my answer for a possible solution. Subclassing `UITableViewCell` is another possible solution. — CrimsonChris, Aug 10 '14 at 04:31

score 4 · Answer 1 · edited May 23 '17 at 12:04

You are adding a new switch each time the cell is loaded. What you're seeing is many switches stacked on top of each other.

Also, the target action you have set up for your switch won't pass the index path as your selector name is suggesting. I typically use this solution when I don't want to subclass my cells. Getting data from a textfield inside a prototype uicollectionviewcell

Possible solution: Use associated objects to keep track of your switches.

static NSString *kIndexPathKey = @"indexPathKey";
static NSString *kSwitchViewKey = @"switchViewKey"; 

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
        UISwitch *switchView = [[UISwitch alloc] initWithFrame:CGRectMake(10, 5.0, 60.0, 50.0)];
        [switchView addTarget:self action:@selector(switchValueChanged:) forControlEvents:UIControlEventValueChanged];
        [self addSwitchView:switchView toCell:cell];
    }

    UISwitch *switchView = [self switchViewForCell:cell];
    [self setIndexPath:indexPath onSwitch:switchView];
    switchView.on = [self isIndexPathSelected:indexPath];

    return cell;
}

- (void)addSwitchView:(UISwitch *)switchView toCell:(UITableViewCell *)cell {
    [cell.contentView addSubview:switchView];
    [cell setAssociatedObject:switchView forKey:kSwitchViewKey];
}

- (UISwitch *)switchViewForCell:(UITableViewCell *)cell {
    return [cell associatedObjectForKey:kSwitchViewKey];
}

- (void)switchValueChanged:(UISwitch *)sender {
    NSIndexPath *indexPath = [self indexPathOfSwitch:sender];
    [self setRowSelected:sender.isOn atIndexPath:indexPath];
    [self.delegate didSelectItem:[self itemAtIndexPath:indexPath] atIndexPath:indexPath selected:sender.isOn sender:self];
}

- (void)setIndexPath:(NSIndexPath *)indexPath onSwitch:(UISwitch *)switchView {
    [switchView setAssociatedObject:indexPath forKey:kIndexPathKey];
}

- (NSIndexPath *)indexPathOfSwitch:(UISwitch *)switchView {
    return [switchView associatedObjectForKey:kIndexPathKey];
}

@implementation NSObject (AssociatedObjects)

- (void)setAssociatedObject:(id)object forKey:(NSString *const)key {
    objc_setAssociatedObject(self, (__bridge const void *)(key), object, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

- (id)associatedObjectForKey:(NSString *const)key {
    return objc_getAssociatedObject(self, (__bridge const void *)(key));
}

@end

Note that everything above that is using associated objects could be done by using a custom subclass of UITableViewCell. However, there are many advantages to not subclassing.

Composition > Inheritance.

Yes, that is what I suspect is the case, any recommendations. Should I create an instance to reuse? — Remixed123, Jul 29 '14 at 18:10
This is certainly the issue. You can either create an instance to reuse or just remove all `subviews` in cell's `contentView` before adding a new switch — you can choose whatever works better in your case, but I'd go with the latter. — Rinat Khanov, Jul 29 '14 at 18:15
Any code suggestions on removing all subviews in cell's contentView? thanks :-) — Remixed123, Jul 29 '14 at 18:51
@Remixed123 Removing all subviews feels like a hack that might cause more problems than it solves. I've updated my answer with a real world example. — CrimsonChris, Jul 29 '14 at 19:01

Strange display issue with UISwitch in a UITableView

1 Answers1