Fogmeister Fogmeister - 4 months ago 49
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

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.

Comments