Xcode autolayout and adaptive designs

Question

I have used auto layout in the past but never really with a design that needs to adjust the spacing between elements based on the screen size and I am kind of lost with the constraints on how to do this.

This is how my elements are laid out:

And here is how it looks in preview:

As you can see, it looks fine on the 2 larger screens but once it gets to the 4 inch, the 2 links stack on top of each other. The way I have it set up by the way is from Log in label to Forgot Password? link is based on the top layout guide and Don't have an account yet? label to Sign up Via Facebook button is based on the bottom layout guide.

Is there anyway that I can get the spacing the same (or at least close) on all devices?

Thanks in advance for your help!

Answer 1

I have same problem , but I have refer slightly different approach for it.I take a screen size using following code and according to that set coordinates.

 CGRect screenBounds = [[UIScreen mainScreen] bounds];
if (screenBounds.size.height==480){
   //give coordinates and size for iPhone 4
  }
 else if (screenBounds.size.height==568){
  //give coordinates and size for iPhone 5 and 5s
   }
else {
   //give coordinates and size for iPhone 6
}    

hope this will help you

Answer 2

Use constraints that allow for variable positioning (like ≤, and ≥).

1. Set it so the distance between "Forgot Password?" and "Don't have an account yet?" must be at greater than or equal to (≥) the minimum distance you want separating the 2 labels (100 px).
2. Next, set constraints between the "Log in" button and "Forgot Password? must be less than or equal to the current distance between them (60 px).
3. Do the same thing with the "Sign up" button and "Don't have an account yet?". Make the distance between them less than or equal to the current distance between them (60 px).

To make variable constraints like this, create a normal equal to constraint, then, go to the constraints tab of the right utilities sidebar in interface builder. Click on the constraint you just made and want to change to a variable constraint, and click "Edit". You can change the type of constraint in the dropdown menu next to "Constant".

If you have any more questions, feel free to ask.