Adding UIVibrancyEffect to UITableView Cell

Question

I am trying to add the vibrancy effect to the text label of my table view cell and it sort of works, but not exactly right.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"UITableViewCell"];
    NSDictionary *jobDictionary = [self.jobs objectAtIndex:[indexPath row]];

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

    if (cell) {
        cell.backgroundColor = [UIColor clearColor];
        cell.textLabel.textColor = [UIColor whiteColor];

        cell.textLabel.text = [jobDictionary objectForKey:@"job"];

        UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
        UIVisualEffectView *blurView = [[UIVisualEffectView alloc]initWithEffect:blur];
        blurView.frame = cell.bounds;
        [cell addSubview:blurView];
        UIVisualEffectView *vibrantView = [[UIVisualEffectView alloc]initWithEffect:[UIVibrancyEffect effectForBlurEffect:blur]];
        vibrantView.frame = blurView.bounds;
        [vibrantView.contentView addSubview:cell.textLabel];

        [blurView.contentView addSubview:vibrantView];
    }

    return cell;
}

Answer 1

I think I see two major issues with your code. The first issue seems to be the fact that cells in cellForRowAtIndexPath assume a width of 320 when dequeued for display on an iPhone 4 or 5 screen size. If that screen shot is taken from a 6 or 6+, this would explain the weird gap. Somewhere after this method, the cell resizes to accommodate the full width of the table. That means that when you set blurView.frame = cell.bounds, the bounds at this point are actually too narrow. Hypothetically you could fix this by moving that code into the following method with one major caveat.

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath

While adding your blur view here should get you the proper frame, adding a subview in either of these methods will lead to major problems as the cell is recycled. Every time that cell is dequeued, a new subview will get added to it and they will continue to stack up over time. This will cause visual issues if they aren't totally opaque and it will also leave the potential for your cell to require a HUGE amount of memory because you could in theory be stacking hundreds of subviews on a cell as the table scrolls.

I think the best solution to your problem would be to subclass UITableViewCell and add the view on -initWithStyle:reuseIdentifier:. There you can also constrain that view to top, bottom, leading, and trailing of the superview to ensure it will always resize correctly. An alternative is setting the frame of the subview in -layoutSubviews of your cell subclass.

Doing this ensures the view is added only once and the frame will be what you expect.