To display Headerview with image and labels in the viewcontroller - iphone

I am new to iPhone development. I have created one view controller and I used grouped table view. Now I want to display the header view in my viewcontroller with image and labels. Please guide me and help me out in this problem.
Thanks.

Do you mean a headerView or a sectionHeaderView? You can add subviews to the headerView in the viewDidLoad method:
- (void)viewDidLoad {
[super viewDidLoad];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 300, 225)];
label.text = #"BlaBla";
[self.tableHeaderView addSubview:label];
}
You specify size and position of the label with the initWithFrame method, and add the label as subview to the tableHeaderView - you can do this with multiple labels.
If you mean the sectionHeader you have to implement the tableView:viewForHeaderInSection: method, where you have to create a new view, and add different subviews to it:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 300, 40)];
label.text = #"BlaBla";
[view addSubview:label];
[label release];
return [view autorelease];
}
In this case you also have to implement the method tableView:heightForHeaderInSection: which has to return the height of the view you create in the above method:
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
return 50.0f;
}

Related

iPhone When increasing the height of UITableView section header the height of the cell below it decreases. How to avoid?

I created a UITableView of which I adjusted the height and background of the section header. This all works as expected but the cell (row) below it becomes smaller. It almost seems that the section header goes over the first cell.
Is there a way to solve this? Or should I ask, how to solve this?
My code of the section header:
- (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, 0.0, tableView.bounds.size.width, 30)];
headerLabel.text = [self tableView:tableView titleForHeaderInSection:section];
headerLabel.font = [UIFont boldSystemFontOfSize:16];
[headerLabel setTextColor:[UIColor whiteColor]];
headerLabel.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed:#"menuSectionBg.png"]];
[headerView addSubview:headerLabel];
return headerView;
}
You should not adjust the height of the cells' views, but instead implement the
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section;
method in your UITableViewDelegate implementation.
The heights for the cells are calculated before the cells are even created.

UITableView Section Header Font Issue

I'm trying to customize the section header for a UITableView. The UITableView was created in IB. I'm having 2 issues that I cannot figure out.
The font size will not increase past about 18 or something regardless of how large the UILabel is.
The section headers are obscuring the tables.
I've colored the labels blue so you can see their size.
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
// Name of section
NSString *header = [[purchases allKeys] objectAtIndex:section];
// Label for section header
UILabel *label = [[[UILabel alloc] init] autorelease];
label.frame = CGRectMake(10, 0, 230, 45);
label.textColor = _orange;
label.font = [UIFont fontWithName:#"Heiti TC Medium" size:52];
label.text = header;
label.backgroundColor = [UIColor blueColor];
// View to contain label
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(10, 0, 230, 45)];
[view autorelease];
[view addSubview:label];
return view;
}
You should add table view delegate method for header height
You should use all cell width for header view.
Your font named as STHeitiTC-Medium

UITableView: custom header title view doesn't show

I want to display a table with custom header titles.
The table view is attached to a controller class that implements the tableview delegate and data source protocols but is not a subclass of UIViewController because the table is a subview to be displayed above another tableview.
some snippets of my code:
The tableview is created programmatically:
_myListView = [[UITableView alloc] initWithFrame:tableFrame style:UITableViewStyleGrouped];
[_myListView setDataSource:self.myListController];
[_myListView setDelegate:self.myListController];
[_myListView setBackgroundColor:darkBackgroundColor];
where myListController is a strong property in the class.
For the number of rows in sections:
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
…
return count;
}
The number of sections:
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return [someDelegate sectionCount];
}
For the custom Header View:
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView* headerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, SectionHeaderHeight)];
UILabel* sectionHeaderTitle = [[UILabel alloc] initWithFrame:CGRectMake(20, 3, 300, 24)];
[headerView setBackgroundColor:[UIColor clearColor]];
sectionHeaderTitle.text = [self myTitleForHeaderInSection:section];
sectionHeaderTitle.textColor = [UIColor whiteColor];
sectionHeaderTitle.textAlignment = UITextAlignmentLeft;
[headerView addSubview:sectionHeaderTitle];
return headerView;
}
For the custom headerViewHeight (as required since iOS5):
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
if ( [self tableView:tableView numberOfRowsInSection:section] > 0) {
return SectionHeaderHeight;
} else {
return 0;
}
}
Sadly, the tableview does not display any section headers just as if I would return nil.
However, I have checked with a breakpoint, that the code actually returns an UIView.
Everything else works fine.
What am I missing? PLease, don't hesitate to make me feel ashamed of my self.
I don't really understand why you want to use a custom view, and not the "standard" one ? You may have your reasons, but I don't see anything in your code telling me why :)
I would personally just use this:
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
if (section == 0) return #"First section header title";
if (section == 1) return #"Second section header title";
else return nil;
}
Tell me if that's not what you're looking for !
I seem to have found a solution:
I have created a lazy loading strong property for each header view I want to display. (luckily there are only three)
Now the views are shown.
It seems that the header views got deallocated without the strong references before the table was rendered.
Could it be that there is a connection to the class implementing the table view delegate and data source protocols is not a UIViewController?
Text Color you change it to Black color and check once.
sectionHeaderTitle.textColor = [UIColor blackColor];
you try this code this work on my side :-)
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *view=[[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 24)];
UIImage *myImage = [UIImage imageNamed:#"SectionBackGround.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:myImage];
imageView.frame = CGRectMake(0,0,320,24);
UIImage *imageIcon = [UIImage imageNamed:#"SectionBackGround.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:myImage];
iconView.frame = CGRectMake(0,0,320,24);
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 24)];
label.text = [tableView.dataSource tableView:tableView titleForHeaderInSection:section];
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:14];
[view addSubview:imageView];
[view addSubview:iconView];
[view addSubview:label];
return view;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 24;
}

How to set width of UITableView header view?

Is there any way to set the width of a UITableView section header view to something less than the full width of the UITableView? Now matter how wide I set the view returned by tableView:viewForHeaderInSection:, the header view is stretched to the width of the UITableView.
Here is my code:
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *label = [[UIView alloc] initWithFrame: CGRectMake(0, 0, 50, 50)];
label.backgroundColor = [UIColor yellowColor];
label.autoresizingMask = UIViewAutoresizingFlexibleRightMargin;
return label;
}
Try this ., if i have understood your question this will surely work for you
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 30, 60)];
headerView.backgroundColor = [UIColor clearColor];
UIView *label = [[UIView alloc] initWithFrame: CGRectMake(0,0, 50, 50)];
label.backgroundColor = [UIColor yellowColor];
label.autoresizingMask = UIViewAutoresizingFlexibleRightMargin;
[headerView addSubview:label];
return headerView;
}
-(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];
}
Simple solution: return a UIView which contains nothing but your desired header view, while giving your headerView the UIViewAutoresizing property flexible right margin, so it won't scale with it's superview (or maybe flexible left margin, or both, depending on what loomk you want ;]).

Add a subview in a UITableViewController

I am using a UITableViewController, I have resized the height of the table view and moved it a little down. Now I'd like to add a UIImageView above that table view but the only thing that I can do is add that UIImageView as a subview of the UITtableView of the UITableViewController, so that UIImageView is not above the UITableView and the image scrolls with the table view.
How can I accomplish what I'm trying ? Here is the code I've been using :
UIImageView *tabImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"temp.png"]];
[self.view addSubview:tabImageView];
Thanks!
I believe UITableViewController requires that its view be a UITableView.
In the past, I've worked around this by changing my view controller from subclassing UITableViewController to subclassing UIViewController and implementing the UITableViewDataSource and UITableViewDelegate protocols. Then you can have your view be whatever you want, including shifting your UITableView down and adding a UIImageView.
Not sure if this is still the case in 4.2, though.
EDIT (December 16, 2013)
Just want to clarify that this is really not a great idea for many reasons, a bunch of which are listed in the comments. You should really be doing what Shaggy Frog is suggesting, or using View Controller Containment.
Original Answer
You want the UIImageView to be static at the top of the tableView? If that's so, you need to set it as a subview of the UINavigationController, not the UITableView. Easiest way to do this is with [self.view.superview addSubview:tabImageView]. (although as Shaggy Frog said, it's probably best to change from a UITableViewController to a plain UIViewController, and create the UITableView manually)
If you want the UIImageView to be attached to the UITableView, so that when you scroll down, it disappears, you can just set it as the table header with [self.tableView setTableHeaderView:tabImageView]
Take 4 cells in your static UITableView in UITableViewController with height of 44 PX & width of 320PX. Comment all tableView Delegate methods in UITableViewController.m file and put this code.
- (void)viewDidAppear:(BOOL)animated
{
UIImageView *backgroundView =[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 170)];
backgroundView.image=[UIImage imageNamed:#"default-cover-image.jpg"];
[self.view.superview addSubview:backgroundView];
[self.tableView setFrame:CGRectMake(0, 170, 320, 960)];
[[[UIApplication sharedApplication] keyWindow] setBackgroundColor:[UIColor whiteColor]];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [super tableView:tableView cellForRowAtIndexPath:indexPath];
if ((indexPath.row)==0)
{
cell.accessoryType = UITableViewCellAccessoryNone;
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:#"one"];
UIImageView *backgroundView =[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
backgroundView.image=[UIImage imageNamed:#"sectionHeader.png"];
[cell.contentView addSubview:backgroundView];
}
if ((indexPath.row)==1)
{
cell.accessoryType = UITableViewCellAccessoryNone;
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:#"two"];
UIImageView *backgroundView =[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
backgroundView.image=[UIImage imageNamed:#"sectionHeader2.png"];
[cell.contentView addSubview:backgroundView];
}
if ((indexPath.row)==2)
{
cell.accessoryType = UITableViewCellAccessoryNone;
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:#"three"];
UIImageView *backgroundView =[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
backgroundView.image=[UIImage imageNamed:#"sectionHeader3.png"];
[cell.contentView addSubview:backgroundView];
}
if ((indexPath.row)==3)
{
cell.accessoryType = UITableViewCellAccessoryNone;
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:#"four"];
UIImageView *backgroundView =[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
backgroundView.image=[UIImage imageNamed:#"sectionHeader.png"];
[cell.contentView addSubview:backgroundView];
}
return cell;
}
Hope, It'll work.