iOS Simulator not displaying correctly in Xcode 6

Question

I've been having such a hard time trying to figure out how this thing works. It's so random and I have no idea what else to try. I've looked up multiple articles on this issue and everyone just says change the scale. Changed the scale does not help, it's got nothing to do with what's happening here. I'm not sure if this is related to the bottom of Xcode where you can change the dimensions (Any vs Any / Any vs Regular Height, etc...) I've asked my mobile development teacher at school as well and he couldn't figure it out either. Any help would be greatly appreciated!!

Picture below:

http://tinypic.com/r/281fw5w/8

Answer 1

Your problem is not scaling. What you need to look at is auto layout and constraints.

You can use the icons in the lower right edge of the interface builder to get at them or control drag from a view controller (like a button, label, etc.) to the containing view (or any other view controller for that matter.) Usually, the main view window itself. When you release you can now add constraints to "attach" the element to that other element relatively. For instance, you could attach the things on the left to the left side and the things on the right to the right side. Now, regardless of the dimension of the actual device screen, those elements will appear in those locations relative to the device screen.

Answer 2

The problem is that the position of elements from your perspective is right for the canvas you see in the Interface builder, but once the app is run, the real canvas has different dimensions.

To manage the position, size and other attributes of UI elements, there is a system called AutoLayout. It is quite ingenious because it is similar to natural language. For example "I want this element to be in the middle of the screen." or "I want this element to be 20 pixels from the left corner and 57 pixels from the element that is above this element."

By combining these rules you basically create a set of layout constraints, that are applied in runtime to the view hierarchy and view are laid out properly. Autolayout allows for very sophisticated layouts.

Another aspect you need to take into account that you might want your app to look well in all form factors from 3.5 inch iPhone up to iPad air. Since these devices differ considerably in size, Apple introduced an abstraction called Size Class .

Size Class is an abstraction on top of concrete size. Concrete iOS devices have vey concrete dimensions. But in natural language you often say it's big ,or small ,or normal. And this the level of abstraction size classes use.

For each size class you can have a particular set of auto layout constraints.

So by combining AutoLayout and SizeClasses , Apple solved the problem oh how to have one application but one that can still accommodate specific form factors and can adjust its layout to them.

In Xcode6, all storyboards/xib files have autolayout & sizeclasses enabled by default. Interface builder provides you with a comfortable environment where you can set up your layout by creating constraints for each size class combination.