Question

Stuck on something and i’m not sure if it’s even possible. Is there a way to set the background of a UITableView as a custom image, but NOT let that background apply to the tableHeaderView. I have a header on my table that needs to remain transparent, because I have a parallax type effect (like the path 2 app) implemented with an image behind the transparent table header & the top 1/3rd of the tableview… but i need to get a custom image behind the rest of the table.

I can successfully get close to the background style im looking for that fills in behind each cell, with:

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

However, this is not quite what Im looking for because I would like a radial gradient background view behind the entire tableview on the screen, minus the transparent header… not just the same image for each cell. Also, this approach really hits my tableview’s scrolling performance loading a new BG image with each cell.

I know you can use:

  UIImageView *tempImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.png"]];
  [tempImageView setFrame:self.tableView.frame];

  self.tableView.backgroundView = tempImageView;

to set the BG image for the tableview, and it is really close to what I’m trying to do, but I neeeeeed that header transparent. Is there any way to use this, but also tell the tableHeaderView to ignore it and be transparent?
Thanks everyone, & happy Halloween!

Answer 1

Yes, you can. I implemented a solution for the parallax effect for a grouped UITableView. You could use the same approach except instead of a black background (example below) you could use your image. Essentially, you have two views behind the tableview (which is clear, header view background clear as well as the table view background itself). These two views you move based on scrolling (UIScrollViewDelegate). Your tableview background image you’ll “scroll” 1 for 1 with the table, while your parallax image will “scroll” at a different rate of course. In the below example i think my “_secondParaView” would be your background image for the table.

Firstly, in viewDidLoad, create a view to partially hide your image for the parallax effect, should be the same color as the background you want the tableview to be, in my case blackColor. I placed the view at a fixed offset based on the size of my image, you want the top of this view to line up with the top of the end of ‘section 0’ header view. It will then “scroll” just as the tableview scrolls. Insert this view below the tableview.

_secondParaView = [[UIView alloc] initWithFrame: CGRectMake(0.0, kTableViewOffset, self.view.frame.size.width, 200.0)];
_secondParaView.backgroundColor = [UIColor colorWithRed: 0.0 green: 0.0 blue: 0.0 alpha: 1.0];
[self.view insertSubview: _secondParaView belowSubview: _tableView];

_headerImageYOffset = -40.0;
_headerImageView = [[UIImageView alloc] initWithImage: [UIImage imageNamed: @"SpaceRedPlanet640x480.png"]];
CGRect headerImageFrame = _headerImageView.frame;
headerImageFrame.origin.y = _headerImageYOffset;
_headerImageView.frame = headerImageFrame;
[self.view insertSubview: _headerImageView belowSubview: _secondParaView];
_tableView.backgroundColor = [UIColor clearColor];

Then implement the two grouped tableview methods for the header view / header view size:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    if (section == 0) {
        UIView * tableHeaderView = [[UIView alloc] initWithFrame: CGRectMake(0.0, 0.0, self.view.frame.size.width, kTableViewOffset)];
        tableHeaderView.backgroundColor = [UIColor clearColor];     
        return tableHeaderView;
    } else
        return nil;
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    if (section == 0) {
        return kTableViewOffset;
    } else 
        return 2;
}

Just like in the “normal” tableview parallax implementation, make your VC a UIScrollViewDelegate and implement this scrollViewDidScroll like so:

#pragma mark -
#pragma mark UIScrollViewDelegate methods
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat scrollOffset = scrollView.contentOffset.y;
    CGRect headerImageFrame = _headerImageView.frame;
    CGRect underParaFrame = _secondParaView.frame;

    if (scrollOffset < 0) {
        // Adjust top image proportionally
        headerImageFrame.origin.y = _headerImageYOffset - ((scrollOffset / 3));
    } else {
        // We're scrolling up, return to normal behavior
        headerImageFrame.origin.y = _headerImageYOffset - scrollOffset;
    }
    underParaFrame.origin.y = kTableViewOffset - scrollOffset;
    _headerImageView.frame = headerImageFrame;
    _secondParaView.frame = underParaFrame;
}

Hope this helps, or at the very least helps someone implement the parallax effect for a grouped tableview. I could find no solution for it.