IOS Autolayout: Align left edge of UILabel with horizontal center in container?

Question

So, I'm trying to set up a customized UITableViewCell that looks like this:

And I'm trying to ensure that the Detail labels are left aligned and set the content wrapper over the title labels above.

So the problem is that I want the left edge of the second column in the header cells to be aligned with the center of the whole view.

Is there any way to do this?

Answer 1

Try using a couple of grouping types, one for each column. Snap the outer edges of each column to the edges of the cell content view, then add a width constraint equal to the column views.

After you create your column views, you can mark the labels inside each.

Answer 2

Add a limit to the width of the width, add a limit to the leading space to the left and end to the right and the horizontal distance between them.

Answer 3

Of course, you can put them in a UIView and that the left edge of the view will be CenterX, and so they will be aligned in the middle. Or you can simply align the top header cell with CenterX and have the leading edge of each match. There are many ways that you can achieve what you ask for here.

NSLayoutContraint *constraint = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0f constant:0.0f]; [self.view addConstraint:constraint]; NSArray *constraints [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[label1]-(5)-[label2]-(5)-[label3]|" options:NSLayoutFormatAlignAllLeading metrics:nil views:@{ @"label1" : label1, @"label2" : label2, @"label3" : label3 }]; [self.view addConstraints:constraints]; 

The above are just examples of how you could do this in code, if you want, self.view is a view, but if you want a view of the contents of a UITableViewCell you could just switch to it.

Answer 4

I could not get the above suggestions, so I did it differently.

• InnerView1 50% width of ContentView and pinned to the left
• InnerView2 50% of the width of the ContentView and pinned to the right

Simple