Customize header in UITableView

Question

I'm trying to customize header in section in UITableView. I couldn't find to do it in storyboard so I started adding UIView and UILabel.

Here is my code:

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = UIView(frame: CGRectMake(0,0, tableView.frame.size.width, 60))
    headerView.backgroundColor = UIColor.cyanColor()
    headerView.layer.borderColor = UIColor.whiteColor().CGColor
    headerView.layer.borderWidth = 1.0;

    let headerLabel = UILabel(frame: CGRectMake(5,2, tableView.frame.size.width - 5, 30))
    headerLabel.text = sectionTitle  (this is a variable)
    headerLabel.textAlignment = NSTextAlignment.Center
    headerLabel.font = UIFont(name: "AvenirNext", size: 18)
    headerLabel.textAlignment = NSTextAlignment.Center;
    headerView.addSubview(headerLabel)

    return headerView
    }

func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 60
    }

It makes a view like below:

I am looking for a way to locate UILabel vertically and horizontally center of the view. How would I do that? Would it always change whenever I change the font and size?

Also, would there by anyway I can do this in storyboard? It is really hard to make header programmatically.

Answer 1

You can drag a UIView on your UITableView in your storyboard. The view will be added as your UITableView Header automatically. See the view hierarchy in the picture below.

Next create a UILabel in your header view and set the auto layout constraints:

• Center vertically in superview
• Center horizontally in superview

You will end up with something like this:

EDIT:

Editing my answer in order to reply to your comment. If you want to have a custom header view for every section you can override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? like you are already doing.

Then create a @IBOutlet UIView *headerView; which you will return in the delegate method mentioned above. Go to your storyboard and drag a UIView from the object palette to the top bar of your UIViewController/UITableViewController (see the attached image).

Next connect your outlet to the created UIView. You can design your view in storyboard afterwards and add an IBOutlet for your UILabel in order to update its text content for every section header view you create.

Answer 2

Just create a custom view and provide layout constraints in your preferred way.

For example:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
    {
        UIView *container = [UIView new];
        UILabel *label = [UILabel new];
        label.translatesAutoresizingMaskIntoConstraints = NO;
        [container addSubview:label];
        [container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(20)-[label]-(10)-|" options:0 metrics:nil  views:@{@"label" : label }]];
        [container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(15)-[label]-(3)-|" options:0 metrics:nil   views:@{@"label" : label}]];

        label.text = [NSString stringWithFormat:@"Section %ld", section];
        return container;   
    }

In addition you can put this code in a separate class and you could layout the view in a XIB.

Swift:

let xConstraint = NSLayoutConstraint(item: label, attribute: .CenterX, 
                                   relatedBy: .Equal,
                                      toItem: container, attribute: .CenterX, 
                                  multiplier: 1.0, constant: 0.0);
container.addConstraint(xConstraint);

let yConstraint = NSLayoutConstraint(item: label, attribute: .CenterY, 
                                   relatedBy: .Equal, 
                                   toItem: container, attribute: .CenterY, 
                                  multiplier: 1.0, constant: 0.0);
container.addConstraint(yConstraint);

let hConstraint = NSLayoutConstraint(item: label, attribute: .Height, 
                                   relatedBy: .Equal,
                                      toItem: container,attribute: .Height, 
                                  multiplier: 1.0, constant: 0.0);
container.addConstraint(hConstraint);

let wConstraint = NSLayoutConstraint(item: label, attribute: .Width, 
                                   relatedBy: .Equal,
                                      toItem: container, attribute: .Width, 
                                  multiplier: 1.0, constant: 0.0);
container.addConstraint(wConstraint);

Answer 3

You cannot table header in storyboard, however if need customization you need to create a custom class and its corresponding xib file