Can't center views in tableHeaderView with auto layout and storyboards

2
votes

I can't center a view that has been placed as a subview of a UITableView's tableHeaderView in a storyboard using auto layout.

In a storyboard, I have a UITableView. I dragged a UIView (the red view) to the top, released, and it created a table header view automatically. I then dragged and dropped another UIView (the yellow view) on top of the table header view, resized, and applied some constraints to ensure it stays centered:

enter image description here

When I run the app on the simulator, here's what I get:

enter image description here

The yellow view is obviously not centered. However, the "Filter" button at the bottom is.

I know it's tricky to get the height right using auto layout and storyboards and table header views (and you can see that the height of the red view is definitely incorrect), but at this point, I'm just trying to solve for horizontally centering my yellow view.

Am I able to set this all up in my storyboard without having to configure my constraints in code?

4
iosobjective-cuitableviewautolayoutuistoryboard
You have to apply constraints to the header view and the views within it - soulshined
unfortunately you can't apply constraints to a headerView in a storyboard. The system doesn't let you. - djibouti33
Seems like the header is taking up the whole screen. Can you confirm that your UITableView has the leading,trailing,bottom,top constraints set up against its superview? Also are the "margin" check box disabled in the constaints setup popup? - Eugene
Oh man, that was it! In a frenzy of trial and error, I had either forgotten to add or removed the constraints from the actual tableview. Leave an actual answer and I'll mark it as correct. Thanks! - djibouti33

4 Answers

3
votes

Make sure that your UITableView has the leading, trailing, bottom, top constraints set up against its superview.

1
votes

Check the table header view and all sub views have Autoresize Subviews enabled:

Xcode screenshot showing Autoresize Subviews checkbox

You can also force the table to re-render the header view by re-setting it to the same view:

[self.tableView setTableHeaderView:self.outletToHeaderView];

Update: to resize the table header view, give give it an appropriate frame in viewWillAppear:

CGRect newFrame = self.outletToHeaderView.frame;
newFrame.size.width = self.tableView.bounds.size.width;
newFrame.size.height = 44;
[self.outletToHeaderView setFrame:newFrame];
// Then reset it to force the table view to re-render/accommodate
[self.tableView setTableHeaderView:self.outletToHeaderView]
1
votes

In your file TableViewHeader:

override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        yourView.translatesAutoresizingMaskIntoConstraints = false
        yourView.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
    }
0
votes

You need to use prototype cell from table view, than dequeue it with reusable identifier and return it contentView. Only that's do the trick

var headerView: UIView!

override func viewDidLoad() {
    super.viewDidLoad()
    self.headerView = (self.tableView.dequeueReusableCellWithIdentifier("CustomHeaderCell") as! UITableViewCell).contentView
}

override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    return self.headerView
}

upd: Oh sorry, my example is written in Swift. But it's easy to understand how to do the same in Obj-C