2

I really wanted to figure this out by myself but it's been 3 hours now and I don't think this kind of problem is worth half that amount of time so here I am seeking for help.

This is an auto-layout problem so I will try my best to illustrate it correctly.

I have a stack view containing two labels (O and _ in the storyboard). The problem is that I can't fix the size of the stack view to have the label's font size auto-shrink on smaller screens and have them displayed correctly on bigger screens at the same time...

Works best on iPhone 5s:

Storyboard =

iphone5s storyboard enter image description here

Constraints =

enter image description here

Simulator =

enter image description here

iPhone 8 result =

enter image description here

Works best on iPhone 8, 8+ and bigger screens:

Storyboard =

enter image description here

Constraints =

enter image description here

Simulator =

enter image description here

iPhone 5s and smaller screens result =

enter image description here

I guess this is the StackView that makes things harder than they should be.. it would be great that the labels inside the stack view don't have a fixed size. What can I do?

Wizzardzz
  • 781
  • 1
  • 9
  • 32
  • What constraints do you have on your stack view? – LinusGeffarth Jan 22 '18 at 18:50
  • Hi Linus, the constraints for the `stack view` are displayed in the screenshots. – Wizzardzz Jan 22 '18 at 18:54
  • I'm specifically looking for the stack view's trailing constraint. The only one I can see is `trailing = Stack View.trailing - 15`. Is the left part of the equation supposed to be the superview? – LinusGeffarth Jan 22 '18 at 19:00
  • Indeed it is. This is what allows the `auto-shrink` to work, but the constraint also gives the `labels` inside the `stack view` a fixed size that mess the arrangement on bigger screens when there is not enough text to fill all the space. – Wizzardzz Jan 22 '18 at 19:07
  • Should I give up and print everything in a single label? – Wizzardzz Jan 22 '18 at 19:43

2 Answers2

0

You can replace the relationship of the trailing constraint trailing = Stack View.trailing - 15 from Equal to Greater than or equal.

For example you need: trailing >= Stack View.trailing + 15

In that way the trailing part of the stack view will have 15 points distance to the trailing edge of the superview so will auto shrink if there is no enough space. At the same time if there is a lot of space the labels will not be expanded because each label will hug its content.

plamkata__
  • 729
  • 5
  • 13
0

If you have a nested stackViews (StackView inside StackView inside StackView etc.) the top StackView has to have top and bottom constraints, but the bottom has to be of kind "greater than" (e.g. ">= 1").

Without both constraints the height is often miscalculated and same happens if there is no "space to breath" for the layout process, because the constraints are set to tight.

Hardy_Germany
  • 1,259
  • 13
  • 19