Fogmeister Fogmeister - 1 year ago 150
Objective-C Question

Transparent UITableViewHeaderFooterView

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 Source

OK, from @schukin on Twitter.

I changed MyHeaderView to subclass UIView instead and set...

self.backgroundColor = [UIColor colorWithWhite:0.9 alpha:0.8];

and then in the delegate...

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    MyViewHeaderView *headerView = [[MyHeaderView alloc] initWithFrame:<a frame>];

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

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

    return headerView;
}

and this now works exactly as I want.

It seems UITableViewHeaderFooterView can't do what I'm looking for.

Thanks all.