All the answers I've seen so far are basically for pre-iOS7 (using systemFontStyle or boldSystemFontStyle). That doesn't correspond to the default capitalized section title font in UITableViewStyleGrouped.
I've had to implement the UITableViewDelegate method that return the custom section header view and want to know the font Apple uses to capitalize section titles.
For iOS7+, the default grouped table header view uses a UILabel with its text capitalized and systemFontSize:15.
The header height is 50.
How to recreate default grouped headers:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(15, 25, 200, 20)];
[label setText:[[self tableView:tableView titleForHeaderInSection:section] uppercaseString]];
[label setFont:[UIFont systemFontOfSize:15]];
[headerView addSubview:label];
return headerView;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 50;
}
Related
I'm creating a custom view for both a section header and a table header ofa UITableView. The problem is that the section view (in green) is appearing over the table header view (in red)
The code for the table header view is
self.headerImageView = [[UIView alloc] init];
self.headerImageView.backgroundColor = [UIColor redColor];
self.tableView.tableHeaderView = self.headerImageView;
and i set its frame here
- (void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
self.headerImageView.frame = CGRectMake(0, 0, CGRectGetWidth(self.tableView.frame), 100);
}
The code for the section header
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *view = [[UIView alloc] init];
view.backgroundColor = [UIColor greenColor];
return view;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 40;
}
What am I doing wrong?
cheers
Just put the code all in -(void)viewDidLoad, like this:
- (void)viewDidLoad {
[super viewDidLoad];
self.headerImageView = [[UIView alloc] init];
_headerImageView.backgroundColor = [UIColor redColor];
_headerImageView.frame = CGRectMake(0, 0, CGRectGetWidth(self.tableView.frame), 100);
self.tableView.tableHeaderView = _headerImageView;
}
I found that -(void)viewDidLayoutSubviews will be called many times while scrolling the table. Maybe this is the problem.
How can I set the section header of all my section to redColor, without setting them to have all the same header string, and set the font and font color.
I tried this but it gets rid of my section headers
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 30)];
if (section == 1)
[headerView setBackgroundColor:[UIColor redColor]];
else
[headerView setBackgroundColor:[UIColor clearColor]];
return headerView;
}
I would really appreciate some sample code.
thanks in advance
If you are simply looking to change the background and font color s of a header view, a simpler approach may be to just use
- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
There is a very nice example/explanation here.
Try customizing your section header view. You can extend this approach.
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UILabel *headerView = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 30)];
//Put your common code here
// lets say you need all background color to be white. do this here
[headerView setBackgroundColor:[UIColor redColor]];
//Check the section and do section specific contents
if (section == 1)
[headerView setText:#"Section 1"];
else
[headerView setBackgroundColor:[UIColor clearColor]];
return headerView;
}
- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section {
UITableViewHeaderFooterView *header = (UITableViewHeaderFooterView *)view;
header.textLabel.textColor = [UIColor redColor];
CGRect headerFrame = header.frame;
header.textLabel.frame = headerFrame;
[header.contentView setBackgroundColor:[UIColor blueColor]];
}
I've searched online and on stackoverflow but couldn't find one good answer how to do it.
I've read about
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section`
but there's nothing there that can help me.
The closest thing to an image background for the header there is:
headerView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"myBackground.png"]];
but it shows the picture as a pattern with no way controlling its size.
If you want to set the image as section header use:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIImage *myImage = [UIImage imageNamed:#"loginHeader.png"];
UIImageView *imageView = [[[UIImageView alloc] initWithImage:myImage] autorelease];
imageView.frame = CGRectMake(10,10,300,100);
return imageView;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 100;
}
You can set the background colour to a pattern with image:
headerView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"yourImage.png"]
Sure you can. In the method -(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section you will need to simply instantiate a UIImageView with an image, set the frame for the imageView object and return the imageView object.
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
UIView* headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 100)];
headerView.backgroundColor = [UIColor colorWithWhite:0.5f alpha:1.0f];
headerView.layer.borderColor = [UIColor colorWithWhite:1.0 alpha:1.0].CGColor;
headerView.layer.borderWidth = 1.0;
UILabel* headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(5,headerView.frame.size.height-40, tableView.frame.size.width - 5, 30)];
headerLabel.backgroundColor = [UIColor clearColor];
headerLabel.textColor = [UIColor whiteColor];
headerLabel.font = [UIFont boldSystemFontOfSize:22.0];
headerLabel.text = #"yourText";
headerLabel.textAlignment = NSTextAlignmentLeft;
UIImageView *headerImage = [[UIImageView alloc]initWithFrame:headerView.frame];
headerImage.image = [UIImage imageNamed:[NSString stringWithFormat:#"image.jpg"]];
headerImage.contentMode = UIViewContentModeScaleAspectFill;
[headerImage setClipsToBounds:YES];
[headerView addSubview:headerImage];
[headerView addSubview:headerLabel];
return headerView;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
return 100;
}
I want to change the font color in my header, so, I'm delegating the viewForHeaderInSection:
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 30)];
UILabel *headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 30)];
[headerLabel setBackgroundColor:[UIColor whiteColor]];
[headerLabel setTextColor:[UIColor blackColor]];
[headerView addSubview:headerLabel];
return headerView;
}
The background color is set but the text likes to be transparent, there is nothing.
I tried to comment the backgroundColor the white disappears but the text doesnt.
I tried to comment all the block and the text appears with the default color.
where is my mistake? Thank you in advance
I found it, I missed:
[headerLabel setText: #"myText"];
It seems that:
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection: (NSInteger)section
is not called when implementing viewForHeaderInSection.
Thanks!
Hopefully this method from the UITableViewDelegate protocol will get you started:
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *headerView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 30)] autorelease];
if (section == integerRepresentingYourSectionOfInterest)
[headerView setBackgroundColor:[UIColor redColor]];
else
[headerView setBackgroundColor:[UIColor clearColor]];
return headerView;
}
Replace [UIColor redColor] with whichever UIColor you would like. You may also wish to adjust the dimensions of headerView.
#property(nonatomic,retain) UIView *tableHeaderView;
// accessory view for above row content. default is nil. not to be confused with section header
#property(nonatomic,retain) UIView *tableFooterView;
// accessory view below content. default is nil. not to be confused with section footer
I have added a label in footer View do inner coding according to your requirements
No need to make any global variables.
- (UIView *)tableView:(UITableView *)tbleView viewForFooterInSection:(NSInteger)section
{
UILabel *label;
label = [[[UILabel alloc] initWithFrame:CGRectMake(10, 0, 300, 30)]autorelease];
[label setBackgroundColor:[UIColor clearColor]];
label.textAlignment = UITextAlignmentCenter;
[label setTextColor:[UIColor whiteColor]];
[label setFont:[UIFont boldSystemFontOfSize:15.0]];
[label setText:NSLocalizedString(#"Instructions Personal Profile",#"Instructions Personal Profile")];
UIView *view = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 30)]autorelease];
[view setAutoresizingMask:UIViewAutoresizingFlexibleWidth];
[view addSubview:label];
return view;
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
}
For setting the height of footer and header use:-
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
}