How can I get the layout to stay the same, but increase/decrease size based on device?

Question

I have been making my first iOS app, a calculator, and I am having a hard time making it fit devices. Here is what it looks like on the iPhone 5S: http://imgur.com/mgAvo2E

When I go to the iPhone 6, it ends up looking like this: http://imgur.com/GUxM0Xw

Is there a way to get it to keep the same layout as the iPhone 5S and have everything just increase in size?

Im using Xcode 7 beta 2

Answer 1

You have a few options:

Use Auto Layout. This is meant to be a guide for how elements react to each other depending on screen size. This is recommended when using storyboards. It's not something I'm great with, but there are resources to help. Check the WWDC videos, or read the docs here: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html

The second is to manage the layout of all elements on your own. You will have to perform all calculations to where everything is placed, and how large they are. For example, the black bar would start at the top left corner, have a width that matches self.view's width, and a height that is 20% the height of the device. This might produce strange results there are mistakes in your calculations on where each item is placed, or run in to a screen size you don't expect.

Answer 2

Please see the main.storyboard in my sample project here .

Below are some screenshots on different simulators.

This is all done using constraints. The basic steps I took were:

1. Created two UIViews - one to hold the display, and one to hold the buttons.
2. Set leading, trailing and top constraints for display view.
3. Set leading, trailing and bottom constraints for buttons view.
4. Set equal heights constraint for display and button view, with a multiplier of 0.4 to establish the relative proportion I wanted between these two views.
5. Created the buttons as UILabels and arranged them with the spacing I wanted between them both horizontally (spacing between buttons in the same row, and between the leftmost button and the edge) and vertically (spacing between rows of buttons, and between the topmost button and the top).
6. Set leading constraint between the "7" button and the left edge, and top constraint between the "7" button and the top edge. This was to anchor the "7" button and use it to position all other buttons relative to it.
7. Set leading constraints between all the buttons in each column so they would be aligned in neat columns.
8. Set top constraints between all the buttons in each row so they would be aligned in neat rows.
9. Set vertical spacing constraints between each pair of buttons in the left column ("7" and "4", "4" and "1", "1" and "0").
10. Set horizontal spacing constraints between each pair of buttons in the top row ("7" and "8", "8" and "9", "9" and "X").
11. Set 1:1 aspect ratio constraint on each button so they would be square.
12. Set equal widths constraints on all buttons in each row (for example, "7", "8", "9" and "X").
13. Set trailing space constraint on "X" to right edge of view, with lower priority. This pulls the "X" to the right and forces the buttons to expand or contract to fit the screen.

I may have missed a step or two in my description, and I can't guarantee I added the constraints in exactly this order, but you can look at my sample project to see exactly what constraints I used.

If it seems complicated, think about how much code you would have to write to create this UI programmatically. Auto Layout makes it much easier to accomplish this, and once you get the hang of setting constraints in Xcode, it goes pretty quickly. Knowing what constraints to use is the trick. I would say it took me about 45 minutes to get the constraints right.