CODEWITHSUNDEEP
iosxcode8ios-autolayout
erroneous switch
erroneous switch

Reputation: 33

Scaling and positioning relative to screen size

I've been looking at many differnent solutions using size classes and Autolayout and still haven't been able to get a consistent UI on different sized screens. This seems like it would be a pretty trivial thing to do but I'm on my second day struggling with this. I'm developing on the iPhone 7 in my story board, but when I switch preview to other devices the layouts get messed up. Here are two screen shots demonstrating the issue: iPhone7View, iPhone4sView.

What I've tried:
For the App label, I set the leading, trailing, verticle spacing to top layout guide, and verticle spacing from the App label to the email text field.
For the email field I set the leading, trailing, and verticle space to the password field.
For the password field I set the leading, trailing and verticle space to the sign in button.
For the sign in button I set the leading, trailing and verticle spacing to bottom layout guide.

Additionally, I also set the constraint so the email and password fields have the same width and height.

Is it possible to achieve this using only the storyboard, and make the views adapt to the screen size?

Upvotes: 0

Views: 85

Answers (2)

Daniel T.
Daniel T.

Reputation: 33979

Yes it is possible. Here's what I would do...

For the App label:

  • anchor to the parent's top layout guide.
  • center to parent horizontally.
  • let the text determine the rest.

For the sign in/sign up button:

  • anchor to parent's bottom layout guide.
  • anchor to parent's leading and trailing edge.
  • let the text determine the height.

For password text field:

  • vertical space to sign in/sign up button
  • anchor to parent's leading and trailing edge.
  • fix height.

For the email text field.

  • vertical space to password field
  • anchor to parent's leading and trailing edge.
  • fix height.

In response to your comment, you can't use percents with constraints in storyboard. If you want to use percents, you will have to adjust the constraints in code.

Another option would be to use a stack view. Here is an example:

https://www.dropbox.com/s/d7yfgjvafweqykq/example.storyboard?dl=0

Upvotes: 0

Stefan S
Stefan S

Reputation: 741

I would lower the priority of the fixed constant constraints, and then create another set of more flexible constraints for the minimum spacing that you want.

As an example of what I mean, for the App Name label you would keep the original top space constraint that you have, but lower the priority to, say, 750. You would then create another constraint for the top spacing and make it something like >= 40 (whatever you want the minimum spacing to be), and the priority for this should be higher than that original constraint (i.e. keep it at 1000).

Upvotes: 0

Related Questions