CODEWITHSUNDEEP
iosxcodeautolayoutsize-classes
01Riv
01Riv

Reputation: 1454

Using Auto Layout and Size classes

I am new to using Auto Layout and Size classes but I've done a lot or research on how it all works. While I understand it I still cannot figure simple things out. What I am trying to do is center the two buttons for all iPhones in portrait mode, while it looks good on the 5.5in screen it gets worse and as screen size decreases. I have found it very challenging to learn how to use Auto Layout so any help is much appreciated.

enter image description here

Upvotes: 0

Views: 400

Answers (2)

Carlos
Carlos

Reputation: 6021

This bothered me as well, until I figured it out. Here's some hints:

  • There's the size class that you choose at the bottom, and there's the size of the view controller on the storyboard. They are different things! What is incredibly confusing is that changing the size class will also change the size of the controller, so you end up thinking that an iPhone is compact/any.
  • The way it actually works is like so: The size class determines which views and constraints exist. You will notice when you drop down views in a size class other than any/any that a checkbox appears in the inspector on the right hand side. It will be under "installed". If you now change the size class, the view disappears, until you install it on this new class. The same is true for constraints.
  • The size of the demo view controller is controlled by the right-hand inspector. You can make it any size you want, but you probably have some target device like an iPhone 6.

Auto layout:

  • Constraints are fiddly until you figure out what they mean. You have to consider a hypothetical gnome who is gonna draw the scene for you. If you don't give him enough information, he won't know where to place the control. If you give him inconsistent information, he will spit out an NSLayoutConstraint error.
  • Don't use the automatically generated constraints. You'll never know what it did. Use logic.

Your specific question:

  1. Start with a clean board in any/any
  2. Drop the buttons in
  3. Right-click from a button to the left, add the leading constraint to the margin. Do the same for the right. Edit the constraint constant to zero. Make sure it isn't relative to margin, since you want it all the way to the edge. This fixes the X position of the button. You are saying the edges of the buttons must touch the edges of the screen, regardless of screen size.
  4. To fix the Y position of the button, create constraints to the upper edge, the other button, and add a height constraint.
  5. Change the size of the controller to see what it would look like. Remember you might need to refresh it.

Upvotes: 0

Tim
Tim

Reputation: 60150

Do you mean that you want them centered vertically? (It looks like they're already centered horizontally.)

My guess is that right now, you have a top spacing constraint to the top button. This gives you a fixed distance between the top button and the top of the screen, which is why the buttons push down further on smaller screens – the same distance represents a bigger proportion of a smaller screen.

Instead, you'll probably want a center Y constraint for one of the buttons. The quick way to build this as a proof of concept is to:

  • Constrain the top button's center Y to be equal to its superview's center Y
  • Constrain the bottom button's top to have a small (default) space to the top button's bottom

This is a quick Auto Layout system that gets both buttons close to the center of the screen, and maintains proportionality on smaller devices. Give it a shot and see if it does what you want.

If this seems about right, but you want the pair of buttons together to be centered (that is, you want the gap between them to fall directly on the center line of the screen), you'll probably want an extra container view enclosing both buttons. Then, you can pin the container view's center Y to its superview's center Y, and align the buttons to the container's top and bottom, respectively.

Hope that helps!

Upvotes: 1

Related Questions