Font size/color of TableView Header

[bergetun]

Hi,

I cant seem to figure out a way to change the font size of the header text on UITableView (titleForHeaderInSection)

Anyone care to elaborate ?

Thanks for any help.

[PhoneyDeveloper]

I don't think you can.

[bergetun]

Originally Posted by PhoneyDeveloper

I don't think you can.

ohh, thats really at bummer.

Not even the font color ?

[PhoneyDeveloper]

Use viewForHeaderInSection and use a UILabel. You may also need to implement heightForHeaderInSection.

[bergetun]

Thanks for trying to help.

The HeaderFooter example on Apple.com does exactly what you are saying, but it still shows the titleForHeaderInSection text + what they added to viewForHeaderInSection

I have several sections.

[PhoneyDeveloper]

No it doesn't. There are two kinds of headers. There's a table header and there are section headers. That example sets the table header to a view and one section header to text. You need to set the section headers to views.

[bergetun]

aha. My fault.

Thank you very much.


For future reference to anyone else having the same problem.
If you want to change font or font color of the section title you to replace the default view with your own.

- (UIView *)tableViewUITableView *)tableView viewForHeaderInSectionNSInteger) section
{
return self.myHeaderView2;
}

[derfberg]

bergetun: would you have an example of what the code looks like where you build the new header view?

Thanks.

Originally Posted by bergetun

aha. My fault.

Thank you very much.


For future reference to anyone else having the same problem.
If you want to change font or font color of the section title you to replace the default view with your own.

- (UIView *)tableViewUITableView *)tableView viewForHeaderInSectionNSInteger) section
{
return self.myHeaderView2;
}

[salboy]

For those still looking for a solution:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
	// create the parent view that will hold header Label
	UIView* customView = [[UIView alloc] initWithFrame:CGRectMake(10.0, 0.0, 300.0, 44.0)];
	
	// create the button object
	UILabel * headerLabel = [[UILabel alloc] initWithFrame:CGRectZero];
	headerLabel.backgroundColor = [UIColor clearColor];
	headerLabel.opaque = NO;
	headerLabel.textColor = [UIColor blackColor];
	headerLabel.highlightedTextColor = [UIColor whiteColor];
	headerLabel.font = [UIFont boldSystemFontOfSize:20];
	headerLabel.frame = CGRectMake(10.0, 0.0, 300.0, 44.0);

	// If you want to align the header text as centered
	// headerLabel.frame = CGRectMake(150.0, 0.0, 300.0, 44.0);

	headerLabel.text = <Put here whatever you want to display> // i.e. array element
	[customView addSubview:headerLabel];

	return customView;
}

Furthermore, it is advisable to add heightForHeaderInSection function

- (CGFloat) tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
	return 44.0;
}

[kooljava2]

Thanks for the solution. It works beautifully. Couple of questions:

1. Why do we need a customview. Why can't we use just UILabel only?
2. Is there a memory leak here for customview and the label?

Thanks

Originally Posted by salboy

For those still looking for a solution:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
	// create the parent view that will hold header Label
	UIView* customView = [[UIView alloc] initWithFrame:CGRectMake(10.0, 0.0, 300.0, 44.0)];
	
	// create the button object
	UILabel * headerLabel = [[UILabel alloc] initWithFrame:CGRectZero];
	headerLabel.backgroundColor = [UIColor clearColor];
	headerLabel.opaque = NO;
	headerLabel.textColor = [UIColor blackColor];
	headerLabel.highlightedTextColor = [UIColor whiteColor];
	headerLabel.font = [UIFont boldSystemFontOfSize:20];
	headerLabel.frame = CGRectMake(10.0, 0.0, 300.0, 44.0);

	// If you want to align the header text as centered
	// headerLabel.frame = CGRectMake(150.0, 0.0, 300.0, 44.0);

	headerLabel.text = <Put here whatever you want to display> // i.e. array element
	[customView addSubview:headerLabel];

	return customView;
}

Furthermore, it is advisable to add heightForHeaderInSection function

- (CGFloat) tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
	return 44.0;
}

[rwetmore]

Originally Posted by kooljava2

Thanks for the solution. It works beautifully. Couple of questions:

1. Why do we need a customview. Why can't we use just UILabel only?
2. Is there a memory leak here for customview and the label?

Thanks

1. You could use a UILabel; it's a UIView subclass after all. As a matter of fact, Apple's docs suggest returning a UILabel as an example. If you read salboy's code, though, you'll see that the label bounds X coordinate is set to 10.0 so that it won't bump against the left side of the table. And it's set inside a view because...
   
   I'm not sure specifically how UITableView handles section titles, but since they bump up against each other as they slide out of view I imagine they're simply views being moved directly over the contents of the tableView as it's tracking. In the default case, there's already a view with an embedded label offset inside the view. When you return the section header text via tableView:titleForHeaderInSection:, it's simply setting the default label's text property.
   
   If you'd just passed a UILabel, it would be offset to the bounds of the section header frame, and draw the text at the extreme left of the table. Try it.
   
   Just as a point of style, I probably would have init'ed customView a bit differently:
   

   UIView* customView = [[[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, tableView.bounds.size.width, 44.0)] autorelease];

   The view's X coordinate doesn't make much of a difference. It's the label's offset you're worried about.
   
   Oh, and to mimic the standard UITableView behavior, I'd set the header view's backgroundColor to a color with a 0.9 or so alpha component. If you wanted to use gray, it'd look like:
   

   customView.backgroundColor = [[UIColor grayColor] colorWithAlphaComponent:0.9];

2. Yes, both the view and label are leaking. Personally, I'd alloc the view as autorelease (because you have to return it) and release the label after you've added it to the view. The view will be released when its superview is released. (Well, actually when its autoreleasePool is drained...)

[tychop]

Has anybody got this working with an xib file?

I tried this but it crashes on me:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {	
	
	id <NSFetchedResultsSectionInfo> sectionInfo = [[fetchedResultsController sections] 
													objectAtIndex:section];
	
	SpecialOffersTableViewSectionHeader *tableViewSectionHeader = 
		(SpecialOffersTableViewSectionHeader*)[[[NSBundle mainBundle] loadNibNamed:@"SpecialOffersTableViewSectionHeader" 
																			 owner:self 
																		   options:nil] lastObject];
	tableViewSectionHeader.sectionHeader.text = [sectionInfo name];
	self.tableView.tableHeaderView = tableViewSectionHeader;

	return tableViewSectionHeader;
}

@interface SpecialOffersTableViewSectionHeader : UIView {
    IBOutlet UILabel *sectionHeader;
}
@property (nonatomic, retain) IBOutlet UILabel *sectionHeader;
@end

#import "SpecialOffersTableViewSectionHeader.h"
@implementation SpecialOffersTableViewSectionHeader
@synthesize sectionHeader;
- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        // Initialization code
    }
    return self;
}
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
- (void)dealloc {
    [super dealloc];
}
@end

The error I get in the console is:
*** Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[<SpecialOffersTableViewController 0x3c0c8f0> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key sectionHeader.'

[treblig]

This worked beautifully. Thank you.

Originally Posted by salboy

For those still looking for a solution:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
	// create the parent view that will hold header Label
	UIView* customView = [[UIView alloc] initWithFrame:CGRectMake(10.0, 0.0, 300.0, 44.0)];
	
	// create the button object
	UILabel * headerLabel = [[UILabel alloc] initWithFrame:CGRectZero];
	headerLabel.backgroundColor = [UIColor clearColor];
	headerLabel.opaque = NO;
	headerLabel.textColor = [UIColor blackColor];
	headerLabel.highlightedTextColor = [UIColor whiteColor];
	headerLabel.font = [UIFont boldSystemFontOfSize:20];
	headerLabel.frame = CGRectMake(10.0, 0.0, 300.0, 44.0);

	// If you want to align the header text as centered
	// headerLabel.frame = CGRectMake(150.0, 0.0, 300.0, 44.0);

	headerLabel.text = <Put here whatever you want to display> // i.e. array element
	[customView addSubview:headerLabel];

	return customView;
}

Furthermore, it is advisable to add heightForHeaderInSection function

- (CGFloat) tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
	return 44.0;
}

[Futtersack]

If the text of your header is multiline, add the instruction :
headerLabel.numberOfLines = 0;