Pages

Tuesday, April 19, 2011

[Code Snippet] Custom section header in UITableView

The code snippet for this week is about customizing UITableView headers for section because most times we want to set our own font type, font size or color. To accomplish that, first thing that we should do is to implement

(UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section

in our UITableViewController class. After that, this is the code snippet to customize our header with a UILabel control.

    UIView* customView = [[UIView alloc] initWithFrame:CGRectMake(10.0, 0.0, 300.0, 44.0)];
   
    // create the button object
    UILabel * headerLabel = [[UILabel alloc] initWithFrame:CGRectZero];
    headerLabel.backgroundColor = [UIColor clearColor];
    headerLabel.opaque = NO;
    headerLabel.textColor = [UIColor redColor];
    headerLabel.highlightedTextColor = [UIColor whiteColor];
    headerLabel.font = [UIFont boldSystemFontOfSize:20];
    headerLabel.frame = CGRectMake(10.0, 0.0, 300.0, 44.0);

    // If you want to align the header text as centered
    // headerLabel.frame = CGRectMake(150.0, 0.0, 300.0, 44.0);

    headerLabel.text = (NSString*)[arrayOfHeaders objectAtIndex:section];
    [customView addSubview:headerLabel];

    return customView

Have a look that returns class is UIView and iOS controls inherits for that class so we could customize section's headers with other controls like UIImageView or UIButton.

Enjoy it!

No comments:

Post a Comment