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.
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.
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:
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.
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With