Transparent UITableViewHeaderFooterView

Question

I'm trying to make a custom header view for this UITableView and I'd like it to be transparent.

My code...

Interface...

typedef void(^ActionBlock)();

@interface MyViewHeaderView : UITableViewHeaderFooterView

@property (nonatomic, strong) UIImageView *flagImageView;
@property (nonatomic, strong) UILabel *leagueNameLabel;

@property (nonatomic, copy) ActionBlock tapAction;

@end

Implementation...

#import "MyViewHeaderView.h"

@interface MyViewHeaderView ()

@end

@implementation MyViewHeaderView

- (id)initWithReuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithReuseIdentifier:reuseIdentifier];
    if (self) {
        // Add customisation here...

        // I have tried everything here...
        self.tintColor = [UIColor colorWithWhite:0.961 alpha:1.0];
        self.alpha = 0.5;

        // self.contentView.backgroundColor = [UIColor colorWithWhite:0.5 alpha:0.5];
        // self.backgroundColor = [UIColor colorWithWhite:0.5 alpha:0.5];
        // can't remember what else.
        // none of it makes it transparent. It sets the colour against
        // a white background. i.e. 50% transparent but with a white opaque background.
        // so I can't see the content of the table scrolling behind it.

        self.flagImageView = [[UIImageView alloc] init];
        self.flagImageView.image = [UIImage imageNamed:@"placeholder_flag"];
        [self.flagImageView setTranslatesAutoresizingMaskIntoConstraints:NO];
        [self.contentView addSubview:self.flagImageView];

        self.leagueNameLabel = [[UILabel alloc] init];
        [self.leagueNameLabel setTranslatesAutoresizingMaskIntoConstraints:NO];
        [self.contentView addSubview:self.leagueNameLabel];

        UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(viewTapped)];
        tapGestureRecognizer.numberOfTapsRequired = 1;
        tapGestureRecognizer.numberOfTouchesRequired = 1;
        [self.contentView addGestureRecognizer:tapGestureRecognizer];

        [self setupConstraints];
    }
    return self;
}

- (void)setupConstraints
{
    // adding constraints...
}

- (void)viewTapped
{
    self.tapAction();
}

@end

In my UITableViewDelegate I'm loading the header like...

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    MyViewHeaderView *headerView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:@"HeaderView"];

    League *league = self.leagues[(NSUInteger) section];

    headerView.leagueNameLabel.text = league.name;
    headerView.tapAction = ^(){
        [self leagueTapped:league];
    };

    return headerView;
}

This is working fine, the header is showing properly. Just without transparency.

I'd like to have a header view like the standard view where you can see the table view content scrolling behind it.

Please can you let me know how to do this.

Answer 1

Make a view which has transparent background color and assign it to the UITableViewHeaderFooterView's backgroundView property.

class HeaderView: UITableViewHeaderFooterView{

    override
    init(reuseIdentifier: String?){
        super.init(reuseIdentifier: reuseIdentifier)
        self.backgroundView = UIView()
        self.backgroundView!.backgroundColor = UIColor.clearColor()
    }

    required
    init(coder: NSCoder){
        super.init(coder: coder)
    }

    override
    init(frame: CGRect){
        super.init(frame: frame)
    }
}

Answer 2

Please forgive my inability to use stackoverflow....

Here's how I managed to implement it, using both these UITableviewDelegate methods:

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section {
  if ([view isMemberOfClass:[UITableViewHeaderFooterView class]]) {
    ((UITableViewHeaderFooterView *)view).backgroundView.backgroundColor = [UIColor clearColor];
  }
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
  UITableViewHeaderFooterView *feedHeaderView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:@"HeaderIdentifier"];

  //Other customizations

  return feedHeaderView;
}

Hope that helps, took me forever to figure out. It seems the backgroundView is not created in the init so the color cannot be overridden there.