I am trying to create a table view header with rounded corners but a gap is appearing on the top of the header view and I cannot get rid of it. See picture:
this is the code I have for the header
#define HEADER_HEIGHT 35.0f
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return HEADER_HEIGHT;
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
if (tableView.tableHeaderView) { // header was already created... go away
return tableView.tableHeaderView;
}
CGFloat width = 300.0f;
CGRect rectArea = CGRectMake(10.0f, 5.0f, width, HEADER_HEIGHT);
tableView.tableHeaderView = [[[UIView alloc] initWithFrame:rectArea] autorelease];
UIColor *orange = [UIColor colorWithRed:(255.0f/255.0f) green:(228.0f/255.0f) blue:0.0f alpha:1.0f];
[tableView.tableHeaderView setBackgroundColor:orange];
rectArea = CGRectMake(10.0f, 5.0f, width, HEADER_HEIGHT);
UILabel *lbl = [[UILabel alloc] initWithFrame:rectArea];
lbl.text = NSLocalizedString(#"TGERAL", #"");
lbl.textAlignment = UITextAlignmentLeft;
lbl.font = [UIFont systemFontOfSize:13.0f];
lbl.textColor = [UIColor blackColor];
lbl.backgroundColor = [UIColor clearColor];
lbl.numberOfLines = 2.0f;
lbl.lineBreakMode = UILineBreakModeWordWrap;
//[lbl sizeToFit];
[tableView.tableHeaderView addSubview:lbl];
[lbl release];
self.tableView.tableHeaderView.layer.cornerRadius = 6.0f;
return tableView.tableHeaderView;
}
If I change HEADER_HEIGHT or I add a certain amount of pixels to the height of the tableHeaderView or to the label height, all that happens is an increase in the gap.
Do you guys know what I am missing?
thanks
A tableview has two types of headers, and I think you're confusing / intertwining the two.
The first is the table header. The second is table section headers.
I'm unclear which one you want. If you want a single header for the whole table, you want the table header, and you set it using tableView.tableHeaderView = myHeaderView. You can set the height of this header by setting the frame height for your view. The tableView will set the width of this header automatically.
If you want individual headers in each table section, you must override tableView:viewForHeaderInSection:, and return a custom view. Again, you should set the initial frame for this view to the height you want; the tableview will adjust the width.
You are using this delegate method in the wrong way. I don't know if this is related to your problem, but you shouldn't set the tableViewHeader in the method directly but return the header view instead.
If this table is created in Interface Builder there is a default table header and footer that they apply when you drag it on to your view. If you go into IB info you can change the size of each. By removing these values your table should how correctly.
Related
Hi all I am developing an app.I want to show a table view with a header view.When i navigate from Root view to Next view(tableview) which is as shown below.But my question is when i passes some text from root view to Next view(table view) as a header to next view it shows like the following in appropriate format.i need solution for this to show some better format.Following code that i used for this.
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
/* NSString *str_header1;
str_header1=[[NSString alloc]initWithString:#"Heading : "];
str_header1=[str_header1 stringByAppendingFormat:str_code1];
str_header1=[str_header1 stringByAppendingFormat:#" - "];
str_header1=[str_header1 stringByAppendingFormat:str_header]; */
// Create label with section title
UILabel *tmpTitleLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 15, 300, 20)];
UILabel *titleLabel = tmpTitleLabel;
titleLabel.font = [UIFont boldSystemFontOfSize:12];
titleLabel.numberOfLines = 0;
titleLabel.textColor = [UIColor colorWithRed:0.30 green:0.34 blue:0.42 alpha:1.0];
titleLabel.shadowColor = [UIColor whiteColor];
titleLabel.shadowOffset = CGSizeMake(0.0, 1.0);
titleLabel.backgroundColor=[UIColor clearColor];
titleLabel.lineBreakMode = UILineBreakModeWordWrap;
titleLabel.text = str_combine;
//Calculate the expected size based on the font and linebreak mode of label
CGSize maximumLabelSize = CGSizeMake(300,9999);
expectedLabelSize= [str_combine sizeWithFont:titleLabel.font constrainedToSize:maximumLabelSize lineBreakMode:titleLabel.lineBreakMode];
//Adjust the label the the new height
CGRect newFrame = titleLabel.frame;
newFrame.size.height = expectedLabelSize.height;
titleLabel.frame = newFrame;
// Create header view and add label as a subview
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(10, 0, 320, expectedLabelSize.height+30)];
[view addSubview:titleLabel];
return view;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection: (NSInteger)section
{
return expectedLabelSize.height+30;
}
Your code assumes that -tableView:viewForHeaderInSection: is always called before -tableView:heightForHeaderInSection: but that is not the case. You could move the size calculation to -tableView:heightForHeaderInSection: to fix that.
Even better, as you seem to use only one table header view: There is a property on UITableView called tableHeaderView which you can use. Rename your method - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section to -(UIView *)headerView, delete the method -tableView:heightForHeaderInSection: and add the following line at the end of the view controller's -viewDidLoad method:
self.tableView.tableHeaderView = [self headerView];
So, I have implemented this method to add a footer to my table view:
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
return 60;
}
This is the result:
Now, you see, there are two problems:
1) I would like to add a button inside the table view footer but when I drag a button control in the storyboard, it does not work. How to add a button there?
2) As you can see, the footer is transparent and there is a table view cell visible under it. I would like there to be no cells under the footer (so the last visible cell would be the one above the footer). Second, I would like the footer not to be transparent.
I am using Xcode 4.2 and Snow Leopard.
-(CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
is a delegate method. Try instead to access sectionFooterHeight property of your table.
To add a button you may consider adding a custom view to your footer. You can access tableFooterView and assign a custom view to it.
Use this function to create a footer view for table
- (UIView *) createViewForTableFooter
{
CGRect footerRect = CGRectMake(0, 0, self.view.frame.size.width, 60);
UIView *tableFooter = [[[UIView alloc] initWithFrame:footerRect] autorelease];
tableFooter.backgroundColor = [UIColor clearColor];
UIButton* verifyButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[verifyButton setTitle:WNLocalizedString(#"Verify",#"") forState:UIControlStateNormal];
[verifyButton.titleLabel setFont:[UIFont boldSystemFontOfSize:20]];
[verifyButton addTarget:self action:#selector(verifyBtnTapped:)forControlEvents:UIControlEventTouchUpInside];
verifyButton.autoresizingMask = UIViewAutoresizingFlexibleWidth;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
[verifyButton setFrame:CGRectMake(44, 10, self.view.frame.size.width - 88, 37)];
}else {
[verifyButton setFrame:CGRectMake(10, 10, self.view.frame.size.width - 20, 37)];
}
[tableFooter addSubview:verifyButton];
return tableFooter;
}
And use this function like this in your viewDidLoad method
yourTableObjectName.tableFooterView = [self createViewForTableFooter];
you can use tableView:viewForFooterInSection: method to add button to the footer
increase contente size of tableviews bottom
UIEdgeInsets contentInset = self.tableView.contentInset;
contentInset.bottom = 50.0f; // **the height of the footer**
self.tableView.contentInset = contentInset;
Edit: It works fine, But still when the table get Loads Some gap remains between table top and table header abt 30 pxcls(or 1 row) ..?
Please help....
I am scrolling it works fine. All the table rows are scrolling and table header is fixed.
But when I scroll to end of the table it looses its property of fix. I mean is boundry scrolling. I want to freeze it absolutely. At the boundary condition it looses the top position of the table and slides about 20 pxcls.
//Header Format starting
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 20.0;
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
if (tableView.tableHeaderView) { // header was already created... go away
return tableView.tableHeaderView;
}
CGFloat width = 300.0f;
CGRect rectArea = CGRectMake(10.0f, 5.0f, width, 25.0);
tableView.tableHeaderView = [[[UIView alloc] initWithFrame:rectArea] autorelease];
//UIColor *orange = [UIColor colorWithRed:(255.0f/255.0f) green:(228.0f/255.0f) blue:0.0f alpha:1.0f];
[tableView.tableHeaderView setBackgroundColor:[UIColor grayColor]];
rectArea = CGRectMake(02.0f, 1.0f, width, 20.0);
UILabel *lbl = [[UILabel alloc] initWithFrame:rectArea];
lbl.text = NSLocalizedString(#"Bill Total", #"");
lbl.textAlignment = UITextAlignmentLeft;
//lbl.font = [UIFont systemFontOfSize:13.0f];
lbl.font = [UIFont fontWithName:#"Courier New" size:14];
lbl.font=[UIFont italicSystemFontOfSize:14];
lbl.textColor = [UIColor blackColor];
lbl.backgroundColor = [UIColor clearColor];
lbl.numberOfLines = 2.0f;
lbl.lineBreakMode = UILineBreakModeWordWrap;
//[lbl sizeToFit];
[tableView.tableHeaderView addSubview:lbl];
[lbl release];
// self.table.tableHeaderView.layer.cornerRadius = 6.0f;
return table.tableHeaderView;
}
If I understand your question correctly, it sounds like you just need the table not to bounce. If that's the case, all you need to do is set yourTable.bounces = NO; in your viewDidLoad function. Either that or uncheck the "Bounces" option in the NIB if you used one to layout your table.
Here's how to fix the problem you mentioned in your edit... You need to replace the following references to tableView.headerView with references to a new view that's not being passed into the delegate method.
UIView *headerView = [[[UIView alloc] initWithFrame:rectArea] autorelease];
//...
[headerView setBackgroundColor:[UIColor grayColor]];
//...
[headerView addSubview:lbl];
//...
return headerView;
I tried it and it did the trick for me. Hope that helps.
I am using a UITableView with grouping. My first group I have built a custom cell with no background color, and I would also like to remove the border around the cell. How can I do this just for one section?
For my first cell, I would like to set the border/seperator style to [UIColor clearColor].
EDIT: Apple does this in their contacts app, and I wanted to design something similar.
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
if(indexPath.section == 0){
cell.backgroundView = [[[UIView alloc] initWithFrame:CGRectZero] autorelease];
}
}
I believe what Apple uses for its contact heading is tableView:viewForHeaderInSection: for section 0, instead of a cell in the first section. You can still specify a transparent background and the pinstripe will show behind it. The border will not be there as grouped table view section headers do not have borders.
Whether you built your custom cell in Interface Builder or using code, it should be a fairly trivial task to migrate those views from a UITableViewCell to a UIView for use with tableView:viewForHeaderInSection:.
I don't know if you'll be able to keep the Details title for, say, section 1, unless you make a label containing that word and add it to the section 0 header view manually.
If i understood your question, in the cellForRawIndexPath you should add-
if(indexPath.section==0){
//set the style you wish to add only to the first section
}
good luck
EDIT
I use this function for that -
+(void)setTransparentBgToCell:(UITableViewCell*)cell{
UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 320.0f, 44.0f)];
backgroundView.backgroundColor = [UIColor clearColor];
cell.backgroundView = backgroundView;
[backgroundView release];
cell.selectionStyle=UITableViewCellSelectionStyleNone;
cell.textLabel.backgroundColor = [UIColor clearColor];
cell.detailTextLabel.backgroundColor = [UIColor clearColor];
}
shani
My app looks just like the default address book app on iphone. For each alphabet there is a section header in the address book( A, B . .) in gray gradient background color. Is it possible to override that default color to some other tint color ?
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
// create the parent view that will hold header Label
UIView* customView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 25.0)];
// create the button object
UILabel * headerLabel = [[UILabel alloc] initWithFrame:CGRectZero];
headerLabel.backgroundColor = [UIColor blackColor];
headerLabel.opaque = NO;
headerLabel.textColor = [UIColor whiteColor];
headerLabel.highlightedTextColor = [UIColor whiteColor];
headerLabel.font = [UIFont boldSystemFontOfSize:20];
headerLabel.frame = CGRectMake(0.0, 0.0, 320.0, 22.0);
// If you want to align the header text as centered
//headerLabel.frame = CGRectMake(150.0, 0.0, 300.0, 44.0);
headerLabel.text = #"Name of header";
[customView addSubview:headerLabel];
return customView;
}
You can replace the section headers of a UITableView by implementing the following method in the UITableViewDelegate:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
You will probably also want to implement the height method to ensure your new section view displays correctly :
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
To change the colour of the section header, create a UIView with a UIImageView within it, and a UILabel for the text of the section. Add an image to the UIImageView for how you want the background to look.
AFAIK, you can't manipulate the tintColor of the section view.