1

So I am trying to create a soundboard app with two columns where the buttons automatically adjust to fit the device screen. I have used auto-layout and some of the constraints to create a set of metrics that should work perfectly. When previewed in the Storyboard(Preview) file, it appears as I wish (see image below): enter image description here

However when running the actual app on a device or on the simulator, the constraints are not respected and the soundboard displays like this: enter image description here (please ignore the rounded edges - these are set programmatically).

I receive no output from the console giving me conflict errors for the constraints so have been scratching my head but still no solution.

These are the constraints I have set: enter image description here

UPDATE enter image description here

dwinnbrown
  • 3,789
  • 9
  • 35
  • 60

1 Answers1

0

You need to add height constraints or set the buttons' content hugging priority

It seems to me that the problem is the 12 buttons have a higher / equal vertical content hugging priority than the pause button. The 12 buttons try to hug its content vertically and the pause button expands (would be easier to see if this true by adding bg color) to comply with the remaining constraints. You don't get error message because there are no conflicting constraints, it respects their constraints as best as they can

You can try giving the 12 buttons lower vertical content hugging priority than the pause button. Alternatively, try adding equal height constraint for all 12 buttons and then set fixed height constraint or set required (1000) for vertical content hugging priority on pause button

Community
  • 1
  • 1
Dickson Leonard
  • 518
  • 5
  • 14
  • Thank you for your answer. I have already set the buttons to have equal height constrains but forgot to add this into the original question - please see update :) – dwinnbrown Jul 17 '16 at 17:09
  • 1
    I see, do you have height constraint on the pause button? I don't see it on the screenshot that you put up. If not can you try adding a fixed height constraint of 30 on pause button see if it makes any difference – Dickson Leonard Jul 17 '16 at 17:59
  • Man that did it! Thanks a lot! – dwinnbrown Jul 17 '16 at 18:03