iOS add constraint to table section header - ios

Question

I am working with a grouped table, and am customizing the header in the sections using tableView: viewForHeaderInSection: method and setting the height using tableView: heightForHeaderInSection:.
I created a view and placed a label in it like so:
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
// Create a custom title view.
UIView *ctv;
UILabel *titleLabel;
// Set the name.
{...} // Code not relevant
// If an iPhone.
if ([Config isPhone]) {
ctv = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 14, 320, 36)];
}
// If an iPad
else {
ctv = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 768, 75)];
titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 20, 544, 55)];
}
// Config the label.
{...} // Code not relevant
// Center the items.
ctv.center = CGPointMake(tableView.center.x, ctv.center.y);
titleLabel.center = ctv.center;
// Add the label to the container view.
[ctv addSubview:titleLabel];
// Return the custom title view.
return ctv;
}
This all works great until you rotate the screen. The position is off. I realize that this is because the view is being centered while it is in the other orientation causing the calculation of the center to no longer be correct. The solution should be to add a constraint. I tried adding the constraint below:
NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(ctv);
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"|[ctv]|"
options:0
metrics:nil
views:viewsDictionary
];
[tableView addConstraints:constraints];
But when I do this trying the method below, I get that no parent view is associated with it, which makes complete sense, because it doesn't technically get added into the view is returned. So I thought I would try to add the constraint this way:
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:ctv
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:tableView
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0
];
[tableView addConstraint:constraint];
But this one also errors. I've tried switching the tableView variables to the global table property but it gives the same results. I also tried to figure out how to add the constraint in the view did load method but it failed as I could not figure out how to get back to the table's section headers from the table object. The last thought I had was to set the width on the table in a constraint and set one to center the entire table. This process worked but now I have the an ugly scroll in the middle of my app when it is in the landscape orientation. So the question is, where/how can I access the individual section headers after they have been loaded to add this constraint? I'm still pretty new to Objective-C so any help is appreciated.
***** NEW CODE BASED FROM rdelmar SUGGESTION ****
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
UIView *ctv = [tableView dequeueReusableHeaderFooterViewWithIdentifier:#"groupHeader"];
UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 20, 544, 55)];
[titleLabel setTranslatesAutoresizingMaskIntoConstraints: NO];
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:ctv
attribute:NSLayoutAttributeCenterX
relatedBy:0
toItem:titleLabel
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0
];
[ctv addConstraints:#[constraint]];
titleLabel.text = #"string";
[ctv addSubview:titleLabel];
return ctv;
}
But like I mentioned, it is giving me a "Constraint must contain a first layout item" error.

Answer 1

I did it this way in a recent project to add a label and a UIActivityIndicatorView:
-(UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
UIView *headerView = [self.tableView dequeueReusableHeaderFooterViewWithIdentifier:#"Header"];
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0,0, 250, 20)];
[label setTranslatesAutoresizingMaskIntoConstraints:NO];
NSLayoutConstraint *con1 = [NSLayoutConstraint constraintWithItem:headerView attribute:NSLayoutAttributeCenterY relatedBy:0 toItem:label attribute:NSLayoutAttributeCenterY multiplier:1 constant:0];
NSLayoutConstraint *con2 = [NSLayoutConstraint constraintWithItem:headerView attribute:NSLayoutAttributeLeft relatedBy:0 toItem:label attribute:NSLayoutAttributeLeading multiplier:1 constant:-10];
[headerView addConstraints:#[con1,con2]];
label.text = #"Pick an Activity from the List";
label.backgroundColor = [UIColor clearColor];
[headerView addSubview:label];
spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
[spinner setTranslatesAutoresizingMaskIntoConstraints:NO];
if (activityIndicatorShouldStop == NO) [spinner startAnimating];
[headerView addSubview:spinner];
NSLayoutConstraint *con3 = [NSLayoutConstraint constraintWithItem:headerView attribute:NSLayoutAttributeCenterY relatedBy:0 toItem:spinner attribute:NSLayoutAttributeCenterY multiplier:1 constant:0];
NSLayoutConstraint *con4 = [NSLayoutConstraint constraintWithItem:headerView attribute:NSLayoutAttributeRight relatedBy:0 toItem:spinner attribute:NSLayoutAttributeTrailing multiplier:1 constant:10];
[headerView addConstraints:#[con3,con4]];
return headerView;
}

Answer 2

If you can't get the constraints to work, your original code supplemented by an autoresizing mask (flexible left and right margins) would do the job.
An even simpler solution would be to return a UILabel as the header view, with centered text.
Your first attempt at constraints wouldn't work because you are setting them up wrong.
The table view is responsible for setting the frame of the header view. You need to worry about the position of the label within the header. The VFL for this would be "|titleLabel|" - the title label should be sized to its superview, the header view.