Apply an iOS 7 style blur to a table view section header

Question

I want to apply a blur effect, similar to what you see in the control center drag up, in the table section header of a table view. I have looked at some GitHub repos, like iOS-blur and LiveFrost, but they don't seem to work. They don't actually blur the table cells that are scrolling past the section header, but they blur the content of the section view, which is exactly what I want to avoid.

Any suggestions?

- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    UITableViewCell *headerView = [tableView dequeueReusableCellWithIdentifier:@"SetSelectionHeaderCell"];

    headerView.backgroundColor = [UIColor clearColor];
    //LFGlassView *glassView = [[LFGlassView alloc] initWithFrame:headerView.frame];
    JCRBlurView *glassView = [JCRBlurView new];
    [glassView setFrame:headerView.frame];
    [glassView setBlurTintColor:[UIColor blackColor]];
    [headerView addSubview:glassView];

    [headerView sendSubviewToBack:glassView];


    return headerView;
}

Answer 1

Your problem is that you are adding the blurView as a subview of the headerView, but the backgroundColor of the headerView is by default white, and therefore opaque. In order to see the views behind the headerView you need to make the headerView transparent. You can do this by setting

headerView.backgroundColor = [UIColor clearColor]

The iOS-Blur view works by blurring views behind it. So the reason you are seeing the title label of the headerView blurred out is because the blurView was added as a subview to the headerView after the label was added. This puts the blurView in front of the label, as the topmost subview. You need to send the blur view all the way to the back after you have added it as a subview.

[headerView sendSubviewToBack:blurView];

If you make the headerView transparent and you add the blurView at the back, it should work as you want it to.

The result should look like this:

I should also note, that if you are adding a subview to the headerView every time you dequeue it as a tableView cell, the subviews will accumulate.