CODEWITHSUNDEEP
iosstoryboardautolayout
button
button

Reputation: 656

autolayout storyboard constraints right aligned based on subview content

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

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:

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:

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).

Upvotes: 0

Views: 627

Answers (1)

button
button

Reputation: 656

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.

Upvotes: 0

Related Questions