CODEWITHSUNDEEP
iosswiftuitableview
Kahsn
Kahsn

Reputation: 1045

Customize header in UITableView

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: enter image description here

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.

Upvotes: 7

Views: 20326

Answers (3)

dehlen
dehlen

Reputation: 7389

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:

Storyboard View

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.

Section Header View in storyboard

Upvotes: 28

Apoc
Apoc

Reputation: 885

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);

Upvotes: 1

VIP-DEV
VIP-DEV

Reputation: 221

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

Upvotes: -2

Related Questions