-1

I am trying to setup a simple login view which consists of an image, text fields and buttons. I decided to use a stack view to make the storyboard compatible with many screens.

Image of constraints

I can see that there are dozens of problems with the constraints!? They, in total, add up to 1.0 which is the total height of the stack view so I can't see the issue.

Although the percentages are slightly different, here is the idea of what I am trying to accomplish:

Image of conflicts / general design

Any input is appreciated, thanks!

Rick G
  • 11
  • 1

1 Answers1

0

Perhaps you got your conflicts because your stack view's padding is non-zero?

You could also introduce conflicts if you set the content hugging priority or content compression resistant priority of any of the subviews (except the spacers) to 1000 (which means required).

Instead of constraining the subviews to the height of the stack view, constrain their heights to each other. Pick one subview as the benchmark, and constrain the heights of the other subviews based on the benchmark's height.

Thus, if you choose the Username label's height as your benchmark height, you should create constraints like this:

  • Logo.height = 8 × Username.height
  • Spacer1.height = Username.height
  • Spacer2.height = Username.height
  • UsernameField.height = 2 × Username.height
  • Password.height = Username.height
  • PasswordField.height = 2 × Username.height
  • Login.height = 2 × Username.height
  • Register.height = 2 × Username.height
rob mayoff
  • 375,296
  • 67
  • 796
  • 848