0

Kinda new to this whole auto layout constraints part. My app is closing up on a beta and i'm having trouble getting the constraints right. In the picture below i have succesfully managed to add the following constraints to each object

  • Horizontally in container
  • All objects has been pinned top - bottom - left - right to there nearest object.

As you can see in the picture this behaviour results in fine layout for Iphone 6 and larger but when running on a Iphone 5 simulator or Iphone 4 preview, the layout is bad.

Iphone 7 - 7plus and Iphone 4s

Iphone 5 simulator - Notice the labels are cropped and so is the img

What can i do to achieve the same layout behaviour on smaller devices, so that my labels and img does not crop??

Thank you, in advance!

Ulrik. S
  • 326
  • 2
  • 14

2 Answers2

1

All you need to do is to make your labels have same width with you view controller and then make sure text shows up in center, like this

enter image description here

With this, you are making sure that the text can be centered and be as long as possible. If in this case your label still cannot fully show up, you will need to shrink it. Like calling

yourLabel.adjustsFontSizeToFitWidth = true
Fangming
  • 24,551
  • 6
  • 100
  • 90
  • Thanks this resolved my label issues however when i tried the same solution for the bubbly image it get stretched out onto the entire screen. And the Iphone 4s preview is lagging both buttons and image, do you know why this is? – Ulrik. S Jul 07 '17 at 12:23
  • @Ulrik.S Yes. The constraint on your buttons must be padding top, like the one in my example. What you need to do is set them on a relative position on screen for best user experience. For example, you can set your buttons to be on the bottom 1/3 of the screen height, then image on the top 1/3 location, something like that. – Fangming Jul 07 '17 at 12:27
1

For each label, keep the horizontal center constraint, but remove the leading and trailing (left and right) constraints. The label will then automatically resize to fit the content's width.

mag_zbc
  • 6,801
  • 14
  • 40
  • 62