How to customize tableView Section View - iPhone - iphone

I know how to customize the tableViewCell.
I have seen many application customizing the tableView Cell.
Similarly, I want to customize TableView Section Header
"Suppose - A section name should be in different font, It has different background images etc."
Is it possible How?
In which method Should I implement the code?

Instead of using the normal method
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
You want to implement this one:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
As you can see, the second one returns a UIView instead of just string for text. Therefore you can customise your own view (with labels etc) and return it.
Here is an example of how you might do that (to be implemented in the above method):
// create the parent view that will hold header Label
UIView* customView = [[[UIView alloc] initWithFrame:CGRectMake(10,0,300,60)] autorelease];
// create image object
UIImage *myImage = [UIImage imageNamed:#"someimage.png"];;
// create the label objects
UILabel *headerLabel = [[[UILabel alloc] initWithFrame:CGRectZero] autorelease];
headerLabel.backgroundColor = [UIColor clearColor];
headerLabel.font = [UIFont boldSystemFontOfSize:18];
headerLabel.frame = CGRectMake(70,18,200,20);
headerLabel.text = #"Some Text";
headerLabel.textColor = [UIColor redColor];
UILabel *detailLabel = [[[UILabel alloc] initWithFrame:CGRectZero] autorelease];
detailLabel.backgroundColor = [UIColor clearColor];
detailLabel.textColor = [UIColor darkGrayColor];
detailLabel.text = #"Some detail text";
detailLabel.font = [UIFont systemFontOfSize:12];
detailLabel.frame = CGRectMake(70,33,230,25);
// create the imageView with the image in it
UIImageView *imageView = [[[UIImageView alloc] initWithImage:myImage] autorelease];
imageView.frame = CGRectMake(10,10,50,50);
[customView addSubview:imageView];
[customView addSubview:headerLabel];
[customView addSubview:detailLabel];
return customView;

Related

Label refuses to disappear with [label setHidden:YES]; command in a if-method?

I am trying to customize my tableView in my IOS app. When my tableView(or rather array) is empty, I want to display a customized label instead of the items in the tableView. The label I am referring to is "label0". But something is terribly wrong, my [label0 setHidden:YES]; or [label0 setHidden:NO]; only works in the first block of the if "method"? In the second block (if else) nothing happens no matter what I try to set the label as (hidden or shown).
What have I missed? I cannot see my own fault?
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *headerView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 30)] autorelease];
UILabel *label0 = [[[UILabel alloc] initWithFrame:CGRectMake(0, 25, tableView.bounds.size.width - 0, 100)] autorelease];
if ([self.searchResults count] == 0){
headerView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"lista2.png"]];
UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(5, 3, tableView.bounds.size.width - 5, 18)] autorelease];
label.text = #"Information";
label.textColor = [UIColor whiteColor];
label.backgroundColor = [UIColor clearColor];
[headerView addSubview:label];
label0.text = #"Test test test";
label0.textColor = [UIColor blackColor];
label0.backgroundColor = [UIColor whiteColor];
[tableView addSubview:label0];
[label0 setHidden:NO];
}
else {
headerView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"lista2.png"]];
UILabel *label2 = [[[UILabel alloc] initWithFrame:CGRectMake(5, 3, tableView.bounds.size.width - 5, 18)] autorelease];
label2.text = #"Search results";
label2.textColor = [UIColor whiteColor];
label2.backgroundColor = [UIColor clearColor];
[headerView addSubview:label2];
[label0 setHidden:YES];
}
return headerView;
}
EDIT
I have moved the code to viewDidLoad and set the property for the UILabel. This have unfortunately not solved my problem....
UILabel *label0 = [[[UILabel alloc] initWithFrame:CGRectMake(0, 25, tableView.bounds.size.width - 0, 100)] autorelease];
[tableView addSubview:label0];
if ([self.searchResults count] == 0){
label0.text = #"Test test test";
label0.textColor = [UIColor blackColor];
label0.backgroundColor = [UIColor whiteColor];
[label0 setHidden:NO];
}
else {
[label0 setHidden:YES];
}
This is because your label0 is created every time this method is called so in "else" you are referring to totally different object (not the one that you added to tableView when array was empty).
You shouldn't be adding subviews to tableView from this method. Consider using viewDidLoad. That way you will be adding label0 only once. To achieve that add label0 as property of your viewController.
You forgot to add label0 as subview please put this line in the else statement
[tableView addSubview:label0];
also I cannot see any benefit from doing so. I believe you can just hide the table view and show another view that has the label. but nesting views that way is not good when you come back to debug this code after 1 month you will struggle to understand it.
You say in your edit that you set the property for the UILabel (I assume you mean that you have a property called label0?). If this is so, then when you alloc init your label, it should be self.label0 = ..... not UILabel *label0 = .....

customize section header uilabel background and text

I am currently creating my own custom section headers but I have never dont any text editing via code.. and my new method that I am using to populate my custom header is doing some weird things as shown below
I would like to change the text to white and be slightly bolder and also make the white background transparent..
this is the code I am using to do this
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 30)];
[headerView setBackgroundColor:[UIColor grayColor]];
// Add the label
UILabel *headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.5, 20, 20)];
// do whatever headerLabel configuration you want here
headerLabel.text = [self tableView:tableView titleForHeaderInSection:section];
[headerView addSubview:headerLabel];
// Return the headerView
return headerView;
}
I have tried this
[headerLabel.backgroundColor:[UIColor clearColor]];
etc but its not working :(
I would like to change the text to white...
UILabel's textColor property is your friend here.
And slightly bolder...
No problem! headerLabel.font = [UIFont boldSystemFontOfSize:mySize];
And make a white transparent background.
Whoa, whoa, that is the worst setter syntax ive ever seen!!! My lord, myLabel.backgroundColor is a getter, change:
[headerLabel.backgroundColor:[UIColor clearColor]];
to:
[headerLabel setBackgroundColor:[UIColor clearColor]];
Lucky for you, using your syntax would have just sent a message to nil, which is defaulting the background color of your label to white.
Use following code...
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UILabel *headername = [[UILabel alloc]initWithFrame:CGRectMake(20, 5, 270, 34)];
headername.backgroundColor = [UIColor clearColor];
headername.textColor = [UIColor blackColor];
if(section == 0)
{
headername.text = #"Name that u wish";
}
else
{
headername.text = #"Name that u wish";
}
UIView *headerView = [[UIView alloc] init];
UIImageView *tempimage = [[UIImageView alloc]initWithFrame:CGRectMake(10, 5, 300,34)];
tempimage.image = [UIImage imageNamed:#"whitebackground.png"];
[headerView addSubview:tempimage];
[headerView addSubview:headername];
return headerView;
}
Hope, this will help you...chill
all i have done to get the customized header in table is as following and it is working fine for me
UIView *containerView =
[[[UIView alloc]
initWithFrame:CGRectMake(0, 0, 300, 60)]
autorelease];
UILabel *headerLabel =
[[[UILabel alloc]
initWithFrame:CGRectMake(10, 20, 300, 40)]
autorelease];
headerLabel.text = NSLocalizedString(#"Header for the table", #"");
headerLabel.textColor = [UIColor whiteColor];
headerLabel.shadowColor = [UIColor blackColor];
headerLabel.shadowOffset = CGSizeMake(0, 1);
headerLabel.font = [UIFont boldSystemFontOfSize:22];
headerLabel.backgroundColor = [UIColor clearColor];
[containerView addSubview:headerLabel];
self.tableView.tableHeaderView = containerView;
i just put it in viewDidLoad: method

EasyTableView with multiple rows for iOS

I am using https://github.com/alekseyn/EasyTableView to create a scrollable table view with images. It works very well as given int the demo.
But my custom requirement is to have 2 rows instead of 1 row. So i decided to add 2 image views instead of 1 for a single cell in the table.
- (UIView *)easyTableView:(EasyTableView *)easyTableView viewForRect:(CGRect)rect {
// Create a container view for an EasyTableView cell
UIView *container = [[UIView alloc] initWithFrame:rect];;
// Setup an image view to display an image
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(1, 0, rect.size.width-2, rect.size.height/2)];
imageView.tag = IMAGE_TAG;
imageView.contentMode = UIViewContentModeScaleAspectFill;
[container addSubview:imageView];
// Setup a label to display the image title
CGRect labelRect = CGRectMake(10, rect.size.height/2-20, rect.size.width-20, 20);
UILabel *label = [[UILabel alloc] initWithFrame:labelRect];
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor colorWithWhite:1.0 alpha:0.5];
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:14];
label.tag = LABEL_TAG;
[container addSubview:label];
// Setup an image view to display an image
UIImageView *imageView2 = [[UIImageView alloc] initWithFrame:CGRectMake(1, rect.size.height/2, rect.size.width-2, rect.size.height)];
imageView.tag = IMAGE_TAG2;
imageView.contentMode = UIViewContentModeScaleAspectFill;
[container addSubview:imageView2];
// Setup a label to display the image title
CGRect labelRect2 = CGRectMake(10, rect.size.height-20, rect.size.width-20, 20);
UILabel *label2 = [[UILabel alloc] initWithFrame:labelRect2];
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor colorWithWhite:1.0 alpha:0.5];
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:14];
label.tag = LABEL_TAG2;
[container addSubview:label2];
return container;
}
// Second delegate populates the views with data from a data source
- (void)easyTableView:(EasyTableView *)easyTableView setDataForView:(UIView *)view forIndexPath:(NSIndexPath *)indexPath {
// Set the image title for the given index
UILabel *label = (UILabel *)[view viewWithTag:LABEL_TAG];
label.text = [self.imageStore.titles objectAtIndex:indexPath.row];
// Set the image for the given index
UIImageView *imageView = (UIImageView *)[view viewWithTag:IMAGE_TAG];
imageView.image = [self.imageStore imageAtIndex:indexPath.row];
// Set the image title for the given index
UILabel *label2 = (UILabel *)[view viewWithTag:LABEL_TAG2];
label2.text = [self.imageStore.titles objectAtIndex:indexPath.row];
// Set the image for the given index
UIImageView *imageView2 = (UIImageView *)[view viewWithTag:IMAGE_TAG2];
imageView2.image = [self.imageStore imageAtIndex:indexPath.row];
}
Initially for testing i used same image and label for both cells. But it is suspecious that it is showing images and rows on first row means for first image of any cell.
How can i accomplish my requirement.

Some Gap remains between Table Top and Table Header only when table loads and scrolled down to the last row?

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.

UITableView titleForSection font

A quick question, for a quick answer (since I'm not finding any):
Is there a way to change the font of the section's title (given by titleForSection) in iPhone?
Thanks a lot!
Thanks Jasarien! You were absolutely right.
I leave my code here to help someone with the same problem:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
NSString *sectionTitle = #"Just a title";
// Create label with section title
UILabel *label = [[[UILabel alloc] init] autorelease];
label.frame = CGRectMake(0, 0, 284, 23);
label.textColor = [UIColor blackColor];
label.font = [UIFont fontWithName:#"Helvetica" size:14];
label.text = sectionTitle;
label.backgroundColor = [UIColor clearColor];
// Create header view and add label as a subview
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 100)];
[view autorelease];
[view addSubview:label];
return view;
}
You'll have to use the viewForHeaderInSection: method and provide your own view. Luckily this can be a UILabel with a specified font, so you can do it quite easily.
You have to override
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
to give required height for the section title. Else it will overlap with the cell.
viewForHeaderInSection might work fine... but here's an alternative that works fine for me (Xcode 5 and IOS7 target):
// To set the background color and text color of the Table Headers
- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
// Background color
view.tintColor = [UIColor colorWithRed:0.329 green:0.557 blue:0.827 alpha:1.000];
// Text Color & Alignment
UITableViewHeaderFooterView *header = (UITableViewHeaderFooterView *)view;
[header.textLabel setTextColor:[UIColor whiteColor]];
[header.textLabel setTextAlignment:NSTextAlignmentCenter];
// Text Font
UIFont *saveFont = header.textLabel.font;
[header.textLabel setFont:[UIFont fontWithName:saveFont.fontName size:18.0]];
// Another way to set the background color
// Note: does not preserve gradient effect of original heade!r
// header.contentView.backgroundColor = [UIColor blackColor];
}
Here's what it looks like