Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

iOS

Layout and button placement for different iPhone screen sizes.

Hello fellow developers! I just finished the building a simple ios app tutorials, where we built a fun facts app. Looks great, when I upload the app to my iPhone 5s , everything looks fantastic, button is centered and text is centered as well..however when I uploaded the app to an iPhone 6, things start to o look weird. The button is skewed to the left and so is the text. I should also mention this problem doesn't affect the iPad I tested it on..i have tried adjusting the constraints and frames multiple times. When I get the button and the text to be centered on the iPhone 6 screen, the exact opposite happens on the iPhone 5 screen. I am confused. How do I get the text and button to be automatically centered on any screen size!? Thank you

2 Answers

Joshua C
Joshua C
52,087 Points

When you are making an app for multiple screen sizes, it is best if you select the "Any Width | Any Height" size in your Main.storyboard.

This size can be selected by going to your Main.storyboard, and at the very bottom of the storyboard screen, there will be something that looks like this: 'wSize hSize'

If this option is already on 'wAny hAny', then just put constraints on everything you want to stay still and it should adjust to any screen size; if not, then click on the area with that text and move your mouse on the little grid until you see a blue box with 'Any Width | Any Height' at the top and click on it. Then, delete any constraints you currently have and re-add them using the Any, Any size.

Thank you so much! I really appreciate it! This is an excellent feature.

You can also use the auto construction button. Just click the button in the down right and it will add the constructions for all device sizes automatically.

Thank you! This makes life so much easier!