autolayout storyboard constraints right aligned based on subview content

Question

I am trying to set up the following layout (all vertical centred so I'm ignoring that aspect):

|        Label          btn         View       |
|-10-|-----X-----|-10-|--30--|-10-|---Y---|-10-|
A    B           C    D      E    F       G    H

A - left edge of superview
B - left hand edge of UILabel
C - right hand edge of UILabel
D - left hand edge of Button
E - right hand edge of Button
F - left hand edge of UIView [view]
G - right hand edge of UIView
H - right edge of superview

The button width is fixed (the 30). Depending on some other factors I add a different sub-views to [view] at run time. The different sub-views have different widths.

I would like Y to scale with the width of the added subview (and preferably respond to changes accordingly).

I would like X to take the remainder of the space, thus making the whole set fill the width of the superview.

~

I am trying to work out how to do this with the storyboard tools (manipulating constraints and frames at runtime would make this a different problem, and an easier one for me).

I currently have spacings set up as:

Label to LHS: 10, priority 1000
Label to Button: 10, priority 1000
Button to View: 10, priority 1000
View to RHS: 10, priority 1000

The subview has a layout like:

|-10-|-fixed width button-|-10-|-fixed width button-|- (no constraint) -|

And also tried:

|-10-|-fixed width button-|-10-|-fixed width button-|-10-|

(Which resulted in a correct size for subview, but [view] just takes up whatever space is left after hugging the UILabel content size.)

I have tried changing the content-hugging and resistance properties of the view (thinking this was the key), but the only outcomes I can get to happen are:

Fixed width View (ignores contained content)
Label shrinks to content size

Specifically, I made the content hugging and compression property of View greater than that of label, thinking that this would cause it to hug the content, but I ended up with the Label shrinking to the width of the content and the View taking up the remainder. I have read this Cocoa Autolayout: content hugging vs content compression resistance priority but either misunderstood it and/or have to consider something else in my solution.

In case it makes a difference, the Label runs onto two lines (sometimes).

Do the subviews of [view] each have their own fixed width, and are you pinning it (or them) to the edges of [view]? — rdelmar
@lik2302 I have added a note on how the current subview is constructed. I wonder if there's something in there that I need to set to get the view to always collapse around it's content? — button
You should have a constraint between the right button and the right edge of the superview -- that should cause the superview to be the width of those two buttons plus the spaces. — rdelmar
What I can see is that if I add constraints to the subview, the width of the subview is as I want it to be... But the superview ([view]) doesn't collapse to that content. — button

button button · Accepted Answer · 2015-03-30T16:52:23

With some hints from @rdelmar (thanks!). I managed to find a solution that I'm reasonably happy with.

Basically, it looked like I'm not able to do this in the storyboard, that the subview won't dictate the superview as it is added through code.

So I needed to add some constraints, and crucially (to avoid it conflicting with the subview's original understanding of things:

[subview setTranslatesAutoresizingMaskIntoConstraints:NO];

NSMutableArray * constraints = [NSMutableArray array];
[constraints addObject:[NSLayoutConstraint constraintWithItem:subview
                                                            attribute:NSLayoutAttributeLeft
                                                            relatedBy:NSLayoutRelationEqual
                                                               toItem:view
                                                            attribute:NSLayoutAttributeLeftMargin
                                                           multiplier:1.0
                                                             constant:0]];
[constraints addObject:[NSLayoutConstraint constraintWithItem:subview
                                                            attribute:NSLayoutAttributeRight
                                                            relatedBy:NSLayoutRelationEqual 
                                                               toItem:view
                                                            attribute:NSLayoutAttributeRightMargin
                                                           multiplier:1.0
                                                             constant:0]];
[view addConstraints:constraints];

If someone is able to explain this answer, or indeed improve (e.g. storyboard only) then I think the world would be a better place.

autolayout storyboard constraints right aligned based on subview content

1 Answers