Storyboard's view is different from simulator's view

Question

Everything is centered and adjusted in a nice format on my storyboard, but it looks like it's aligned toward right on a simulator. "Use Auto Layout" and "Use Size Classes" options are checked. How can I resolve this issue? The screenshots below display the problem.

This is what it looks like on my storyboard:

This is on my simulator:

After I turn off "Use Auto Layout and Use Size Classes" options, this is my storyboard:

Answer 1

In Xcode 6, the default size class is "Any x Any", which suits "all layouts". This includes iPhone and iPad, and the default view controller will have a size somewhere in between. You can find this setting at the bottom of the Interface Builder view for your Storyboard, in the middle of the bar with the constraint controls:

As you can see, the view that your content is placed in is very wide compared to the iPhone that you're testing on. From your storyboard it doesn't look like you've got any constraints on your views, which means they'll display as-is. This means that when you go to test it on the simulator, everything appears shifted to the right - what's actually happening is, well, nothing! You have a view that's wider than the iPhone with all your centered content, and that view is being drawn at actual size (wider than the iPhone) when you go to test it, because there are no constraints to tell it to do otherwise.

You have two reasonably easy solutions:

1. Keep using size classes. You'll need to add constraints to your views so that they adapt to different screen sizes. The easiest thing to do in your situation is put all of your content in a container view and add constraints to center-align it to the superview. If you're only going to be targeting iPhone, you can change the default size class in your Storyboard to "Compact Width | Regular Height", which targets all iPhones in portrait orientation.
2. Disable size classes. You have tried this already - the positioning problem is the same as I described above. Your content isn't really center aligned anywhere, it was just placed in the center of your large view. You'll need to disable size classes and then re-position all of your content for iPhone screens.

Regardless, you'll need to add constraints in order to support all iPhone screen sizes. Because of this, it's easier to just continue using size classes - they're a cool new feature of Xcode 6!

Answer 2

You need to add constraints, click to 4 the oranger(I don't know how to call it :D) to align top, bottom, left, right(ex: click left and right mean your UIView scale horizontal with padding value you can input nearby)

This tutorial can useful for you. Hope this hepls :D