Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 899
Kahsn Avatar asked Jan 26 '16 06:01

Kahsn


People also ask

How do I create a header in Swift?

To create a basic header or footer with a text label, override the tableView:titleForHeaderInSection: or tableView:titleForFooterInSection: method of your table's data source object. The table view creates a standard header or footer for you and inserts it into the table at the specified location.


2 Answers

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

like image 106
dehlen Avatar answered Oct 11 '22 14:10

dehlen


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);
like image 20
Apoc Avatar answered Oct 11 '22 14:10

Apoc