iOS- mimic system default tableView header - iphone

I want to mimic programatically the exact look of this header:
So far, my best try was:
UILabel* header = [[UILabel alloc] init] ;
header.backgroundColor = [UIColor clearColor];
header.textAlignment = NSTextAlignmentCenter;
header.textColor = [[UIColor alloc] initWithRed:86 green:92 blue:112 alpha:0.1];
header.shadowColor = [UIColor darkGrayColor];
header.shadowOffset = CGSizeMake(1,0);
header.font = [UIFont boldSystemFontOfSize:18];
But it's looks like this:
Can someone please help me with the exact way to do that?
Thanks in advance!

A Norvegian guy has written a blog post about this a while ago: http://www.gersh.no/posts/view/default_styling_of_sections_headers_in_uitableview_grouped
All credits go to him for the code.
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
UIView *containerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 40)];
containerView.backgroundColor = [UIColor groupTableViewBackgroundColor];
CGRect labelFrame = CGRectMake(20, 2, 320, 30);
if(section == 0) {
labelFrame.origin.y = 13;
}
UILabel *label = [[UILabel alloc] initWithFrame:labelFrame];
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:17];
label.shadowColor = [UIColor colorWithWhite:1.0 alpha:1];
label.shadowOffset = CGSizeMake(0, 1);
label.textColor = [UIColor colorWithRed:0.265 green:0.294 blue:0.367 alpha:1.000];
label.text = [self tableView:tableView titleForHeaderInSection:section];
[containerView addSubview:label];
return containerView;
}

EITHER
You need to set header.frame = CGRectMake(10,1, 100, 18 );
OR
Use Datasource method of UITableView
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
return #"Header"; // just pass name of your hearder
}
EDITED:
-(UIView*)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 20)];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 2, 100, 18)];
label.text= [self.listOfHeader objectAtIndex:section];
label.backgroundColor=[UIColor clearColor];
label.textAlignment=NSTextAlignmentLeft;
[view addSubview:label];
return view;
}
And also add
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 20;
}

What you can do it calculate the width of your UILabel dynamically/programmatically. Using this code :
CGSize maximumLabelSize = CGSizeMake(296,9999);
CGSize expectedLabelSize = [yourString sizeWithFont:yourLabel.font
constrainedToSize:maximumLabelSize
lineBreakMode:yourLabel.lineBreakMode];
Then add 10 pixle to the width you get. Set the frame of your UILabel. And, set it following way :
header.frame = CGRectMake(0.0,5.0,expectedLabelSize.width + 10.0,expectedLabelSize.height);
header.textAlignment = NSTextAlignmentRight;

Related

tableView:viewForHeaderInSection: No-Header Value?

In my tableview, i need the header only when something is typed in the search box. And no header in normal view. what should i return if i don need header?
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *section1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 22)];
if(tableView==ExpTableView)
{
[section1 setBackgroundColor:[UIColor colorWithRed:241.0f/255.0f green:57.0f/255.0f blue:130.0f/255.0f alpha:1.0f]];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 3, tableView.bounds.size.width - 10, 18)];
if (isSearchOn)
{
label.text = [NSString stringWithFormat:#"Search Results for '%#'", searchTextValue];
label.textColor = [UIColor whiteColor];
label.font = [UIFont boldSystemFontOfSize:16];
label.backgroundColor = [UIColor clearColor];
[section1 addSubview:label];
return section1;
}
else
{
return nil;
}
}
return nil;
}
its the
if(tableView==ExpTableView)
that's breaking it. you're assuming it always is but it is not when you're searching. when searching it will never go in to that block
you should have two ifs. one is that one and one that checks to see if the table is the searchview
something like:
if(tableView == [[self searchDisplayController] searchResultsTableView])
so from my take on what you're trying to do:
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
if(tableView == [[self searchDisplayController] searchResultsTableView]) {
UIView *section1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 22)];
[section1 setBackgroundColor:[UIColor colorWithRed:241.0f/255.0f green:57.0f/255.0f blue:130.0f/255.0f alpha:1.0f]];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 3, tableView.bounds.size.width - 10, 18)];
label.text = [NSString stringWithFormat:#"Search Results for '%#'", searchTextValue];
label.textColor = [UIColor whiteColor];
label.font = [UIFont boldSystemFontOfSize:16];
label.backgroundColor = [UIColor clearColor];
[section1 addSubview:label];
return section1;
}
return nil;
}
this method works hand in hand with the following method that you need to also alter so that you get the functionality that you're after:
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
if(tableView == [[self searchDisplayController] searchResultsTableView])
return /*DESIRED_HEIGHT_OF_HEADER*/;
}else {
return 0;
}
}

UITableView header for section only appears when scrolling down

I have some weird behavior on the iPad that I am not getting on the iPhone.
I have a Grouped table view that has sections and headers for the sections, the problem is that on the iPad the top most section's header is not displayed, when scrolling down the table the sections header appears for a short while just before going of screen.
Before scrolling
http://desmond.imageshack.us/Himg525/scaled.php?server=525&filename=screenshot2012051410074.png&res=landing http://desmond.imageshack.us/Himg525/scaled.php?server=525&filename=screenshot2012051410074.png&res=landing
After scrolling
http://desmond.imageshack.us/Himg59/scaled.php?server=59&filename=screenshot2012051410074.png&res=landing http://desmond.imageshack.us/Himg59/scaled.php?server=59&filename=screenshot2012051410074.png&res=landing
The code for creating the headers of the sections:
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
NSString *sectionTitle = [self tableView:tableView titleForHeaderInSection:section];
if (sectionTitle == nil || [sectionTitle isEqualToString:#""]) {
return nil;
}
// Create label with section title
UILabel *label = [[UILabel alloc] init] ;
label.frame = CGRectMake(12, 0, 300, 30);
label.backgroundColor = [UIColor clearColor];
label.textColor = [UIColor blackColor];
label.shadowColor = [UIColor whiteColor];
label.shadowOffset = CGSizeMake(0.0, 1.0);
label.font = [UIFont boldSystemFontOfSize:16];
label.text = sectionTitle;
UIImage *img = [UIImage imageNamed:#"header"];
UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 0, 300, 44)];
imgView.image = img;
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 44)];
[view addSubview:imgView];
[view addSubview:label];
return view;
}
-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
int aSection = [[self.sectionsToDisplay objectAtIndex:section] integerValue];
return [self.groupHeadings objectAtIndex:aSection];
}
My TableView's code:
tableViewResult = [[UITableView alloc] initWithFrame:mainView.frame style:UITableViewStyleGrouped];
tableViewResult.separatorColor = [UIColor clearColor];
[mainView addSubview:tableViewResult];
I set the delegate and datasource in another method as I first do a web request before loading any data into the table, ie when the web request is done I do:
tableViewResult.delegate = self;
tableViewResult.dataSource = self;
[tableViewResult reloadData];
Everything works as expected except for the header of the top most section, and only on the iPad.
Any ideas what can cause this behavior?
What fixed the issue was changing this function to:
-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
int aSection = [[self.sectionsToDisplay objectAtIndex:section] integerValue];
if([[self.groupHeadings objectAtIndex:aSection] isEqualToString:#""])
return nil;
return [self.groupHeadings objectAtIndex:aSection];
}

how to give different header section title for different sections

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
NSString *sectionTitle = [self tableView:tableView titleForHeaderInSection:section];
if (sectionTitle == nil) {
return nil;
}
UILabel *label = [[[UILabel alloc] init] autorelease];
label.frame = CGRectMake(20, 6, 300, 30);
label.backgroundColor = [UIColor clearColor];
label.textColor = [UIColor colorWithHue:(136.0/360.0) // Slightly bluish green
saturation:1.0
brightness:0.60
alpha:1.0];
label.shadowColor = [UIColor whiteColor];
label.shadowOffset = CGSizeMake(0.0, 1.0);
label.font = [UIFont boldSystemFontOfSize:16];
label.text = sectionTitle;
// Create header view and add label as a subview
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, SectionHeaderHeight)];
[view autorelease];
[view addSubview:label];
return view;
}
this is for one section if i have 9 section then how can i set title
You need to implement
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section;
delegate method for UITableView.
This might solve your problem:
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIControl *containerView = [[[UIControl alloc] initWithFrame:CGRectMake(0, 0, 320, 20)] autorelease];
UILabel *headerLabel = [[[UILabel alloc] initWithFrame:CGRectMake(10, 0, 320, 20)] autorelease];
headerLabel.textColor = [UIColor colorWithRed:50.0/255.0 green:44.0/255.0 blue:37.0/255.0 alpha:1.0];
[headerLabel setFont:[UIFont boldSystemFontOfSize:11.0]];
//[headerLabel setFont:[UIFont boldSystemFontOfSize:13.0]];
headerLabel.backgroundColor = [UIColor clearColor];
if(section == 0)
headerLabel.text = [NSString stringWithFormat:#"First Section"];
if(section == 1)
headerLabel.text = [NSString stringWithFormat:#"Second Section"];
if(section == 2)
headerLabel.text = [NSString stringWithFormat:#"Third Section"];
headerLabel.textColor = [UIColor colorWithRed:78.0/255.0 green:70.0/255.0 blue:59.0/255.0 alpha:1.0];
//headerLabel.font = [UIFont boldSystemFontOfSize:13.0];
[containerView addSubview:headerLabel];
return containerView;
}
Try this!
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *v =[[[UIView alloc] init] autorelease];
v.backgroundColor = [UIColor clearColor];
UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(10, 7, tableView.bounds.size.width - 10, 18)] autorelease];
label.textColor = [UIColor whiteColor];
label.font = [UIFont boldSystemFontOfSize:15];
label.backgroundColor = [UIColor clearColor];
if (section == 1) {
label.text = #"Section 1";
[v addSubview:label];
}
else if (section == 2) {
label.text = #"Section 2";
[v addSubview:label];
}
else if (section == 3) {
label.text = #"Section 3";
[v addSubview:label];
}
return v;
}
You need to know the titles, just use an NSArray, make it global alloc and init it in viewDidLoad and release the array in dealloc.
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
UIView *aView=[[[NSBundle mainBundle] loadNibNamed:#"tblHeader" owner:self options:nil]objectAtIndex:0];
[(UILabel*)[aView viewWithTag:1] setText:[[self.reports objectAtIndex:section] valueForKey:#"domain"]];
return aView;
return nil;
}
Here u can insert your custom cell also u can use the Section and get those section wise you can use switch case and easily access the section.

UITableView SectionHeader not displaying custom image background

I'm modifying the look of my TableView's section header. I've managed to get the text working just fine. But the the background image doesn't seem to be showing up at all.
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *headerView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 30)] autorelease];
UILabel *sectionTitle = [[[UILabel alloc] initWithFrame:CGRectMake(10, 0, 320, 30)] autorelease];
sectionTitle.text = [[tableDataSource objectAtIndex: section] objectForKey: #"Title"];
sectionTitle.font = [UIFont fontWithName:#"Helvetica-Bold" size:14];
//sectionTitle.textColor = [UIColor whiteColor];
sectionTitle.shadowColor = [UIColor colorWithWhite:0 alpha:0.4];
sectionTitle.shadowOffset = CGSizeMake(1, 1);
sectionTitle.backgroundColor = [UIColor colorWithWhite:0 alpha:0];
//headerView.backgroundColor = [UIColor whiteColor];
UIImageView *sectionHeaderBG = [[UIImageView alloc] init];
UIImage *image = [UIImage imageNamed:#"CellBackgroundGrey4.png"];
sectionHeaderBG.image = image;
[headerView addSubview:sectionTitle];
[headerView addSubview:sectionHeaderBG];
[headerView autorelease];
return headerView;
}
Is there something I'm missing?
Give it a try:
headerView.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:#"CellBackgroundGrey4.png"]];
I think you missed setting the frame of the UIImageView.
//custom sections
- (NSString *)tableView:(UITableView *)tblView titleForHeaderInSection:(NSInteger)section {
NSString *sectionName = nil;
//set the table background to clear so you can see the background view behind it
tableView.backgroundColor = [UIColor clearColor];
//where does this go?
UILabel *sectionHeader = [[UILabel alloc] init];
sectionHeader.backgroundColor = [UIColor clearColor];
sectionHeader.font = [UIFont boldSystemFontOfSize:18];
sectionHeader.textColor = [UIColor whiteColor];
//What is missing here?
switch (section) {
case 0:
sectionName = [NSString stringWithFormat:#"Header Text 1"];
break;
case 1:
sectionName = [NSString stringWithFormat:#"Header Text 2"];
break;
case 2:
sectionName = [NSString stringWithFormat:#"Header Text 3"];
break;
}
return sectionName;

How can we change the font of tableview header?

I am using some background color for the tabelView and style is grouped. The text in the header for the sections is not clear so I need to modify the the text color so that the header text should be visible.
I want to know can we change the header text's color and size?
Adding to terente's answer:
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
if (section == 0) {
CGRect screenRect = [[UIScreen mainScreen] applicationFrame];
UIView* headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, screenRect.size.width, 44.0)];
//headerView.contentMode = UIViewContentModeScaleToFill;
// Add the label
UILabel *headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(10.0, -5.0, 300.0, 90.0)];
headerLabel.backgroundColor = [UIColor clearColor];
headerLabel.opaque = NO;
headerLabel.text = #"Header";
headerLabel.textColor = [UIColor blackColor];
headerLabel.highlightedTextColor = [UIColor blackColor];
//this is what you asked
headerLabel.font = [UIFont boldSystemFontOfSize:17];
headerLabel.shadowColor = [UIColor clearColor];
headerLabel.shadowOffset = CGSizeMake(0.0, 1.0);
headerLabel.numberOfLines = 0;
headerLabel.textAlignment = UITextAlignmentCenter;
[headerView addSubview: headerLabel];
[headerLabel release];
// Return the headerView
return headerView;
}
else return nil;
}
You can use [UIFont fontWithName:#"<name of your font>" size:24.0]; for other fonts
Just implement
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
And return your custom view for header.
Edit:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
UIImageView *headerTitleView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, kSectionHeaderHeight)];
[headerTitleView setImage:sectionHeaderBackgroundImage];
UILabel *sectionTitleLabel = [[UILabel alloc] initWithFrame:CGRectMake((self.view.frame.size.width - 38) / 2, 5, 38, kSectionHeaderHeight - 10)];
sectionTitleLabel.textColor = [UIColor redColor];
sectionTitleLabel.backgroundColor = [UIColor clearColor];
sectionTitleLabel.textAlignment = UITextAlignmentCenter;
sectionTitleLabel.text = #"A";
sectionTitleLabel.font = [UIFont fontWithName:#"yourFont" size:13];
[sectionTitleLabel setAdjustsFontSizeToFitWidth:YES];
[headerTitleView addSubview:sectionTitleLabel];
return headerTitleView;
}
- (void) tableView : (UITableView*) tableView willDisplayHeaderView : (UIView*) view forSection : (NSInteger) section{
[((UITableViewHeaderFooterView) *view).textLabel setFont:(UIFont...)];
}
and you can set the text label from the other table view delegate method.
- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section {
[((UITableViewHeaderFooterView *) view).textLabel setFont:[UIFont fontWithName:#"Your-Font-Name" size:((UITableViewHeaderFooterView *) view).textLabel.font.pointSize]];
}
Notes:
This will set the font to a custom font but keep the pointSize the same.
Also works for willDisplayFooterView.
Don't forget to change Your-Font-Name to your font.
- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section {
if ([view isKindOfClass:[UITableViewHeaderFooterView class]]) {
UITableViewHeaderFooterView *headerView = (UITableViewHeaderFooterView*)view;
[headerView.textLabel setFont:[UIFont fontWithName:#"Gotham Book" size:16.0f]];
}}
We can use header.textlabel object to change other "UILabel" properties for that label.