0

I am new to XCode and have set up a view controller using the interface builder. The root is a stack view set to Alignment: Fill and Distribution: Fill Proportionally.

Each item in the stack view is pinned to the parent stack view, and constraints are used to specify the height as percentage of the stack view (i.e. the entire screen) using multipliers of Superview.Height.

This part works great, all the views scale to the desired height percentage and it looks good on devices like iPhone 5s.

However, on devices like XS Max some of the controls, such as text fields, simply look too tall and the text inside gets too much space above and below (compared to the text field rectangle).

The desired result would be that all the views scale with the screen, but in case the resolution and aspect ratio is too great the text fields would remain a bit smaller and yield the remaining space to the other views.

My first idea was to add a second constraint to the text fields where the height is set as Less Than or Equal to (for instance) 30 in conjunction with the existing height percentage. But I have tried that out, and tried different Priority values, but no luck so far.

Is there any way to achieve the desired result using constraints and auto layouts on the current (flat) view hierarchy?

Or is it better to look into adding nested stack views and set the percentage height constraint on the nested stack view, while letting the text field inside handle its own height?

Suggestions appreciated!

Niklas Lindén
  • 53
  • 4
  • 1
    use multipliers you can take an idea from this link: -https://stackoverflow.com/questions/41216941/autolayout-understanding-multiplier – Anil Kumar Apr 01 '19 at 09:38
  • 1
    @AnilKumar Thanks, I am currently using multipliers to get the layout distribution and that works OK. However, I am curious if there is a way to ALSO limit the resulting size for some of the views. Such as "this textfield's height should be 8% of the total height while remaining no greater than 30" – Niklas Lindén Apr 01 '19 at 09:51
  • 1
    Ok for this textfield's height should be 8% : Set height equal to that view then select that constraint and set multplier to 0.2. the total height while remaining no greater than 30 :- you need to set the constraint and in relation set greater than and constant set 30 – Anil Kumar Apr 01 '19 at 11:20
  • 1
    `Distribution: Fill Proportionally` is *probably* not what you want. If you edit your question and add an image of your layout it will be easier to help you. – DonMag Apr 01 '19 at 12:03
  • @DonMag That was the issue, changing stack view distribution made the text field constraint (less than or equal to 30) start working. Thank you! If you post it as a reply I can mark it as the correct answer. P.S. no image of the layout since the Mac is not connected to the internet ATM, typing this on a different machine. – Niklas Lindén Apr 01 '19 at 12:28

1 Answers1

1

Distribution: Fill Proportionally is perhaps the most misunderstood property of stack views, and is likely not doing what is expected (or what is wanted).

As per OP's comments... changing the Distribution property (I'm assuming it was changed to Fill) fixes the issue.

DonMag
  • 69,424
  • 5
  • 50
  • 86