139

Built a new project from scratch in Swift in Xcode 6 (Beta 1) and have seen some strange behaviour with Storyboards and the output that I am viewing.

I have built a simple interface (as shown below) - with properties of View Controller included. When I run this in the simulator I would expect 'Hello, World' to be central in the user interface - however it seems that this 'Square' is simply being fit into the iPhone screen and thus the wrong view is being shown (see below).

My question is: has anyone else seen this behaviour and how did they fix it?

Thanks!

View from the Storyboard Editor

Attributes Inspector

Size Inspector

Simulator Output

jrturton
  • 118,105
  • 32
  • 252
  • 268
Candyfloss
  • 3,848
  • 4
  • 31
  • 32
  • add auto layout constraints, that should fix it. you are currently designing for all layouts, so auto layouts will help you display the content in the "right" place. – Raz Jun 08 '14 at 10:50
  • 8
    Tips: Using the assistant editor > automatic > Preview, you'll be able to see a preview of the screen with all screen sizes – Francescu Jun 10 '14 at 06:05

9 Answers9

252

Do the following steps to resolve the issue

In Storyboard, select any view, then go to the File inspector. Uncheck the "Use Size Classes", you will ask to keep size class data for: iPhone/iPad. And then Click the "Disable Size Classes" button. Doing this will make the storyboard's view size with selected device.

Snowman
  • 31,411
  • 46
  • 180
  • 303
Asif Bilal
  • 4,309
  • 3
  • 17
  • 27
  • 8
    This is the correct answer if you are getting a 600x600 view controller when you wanted a standard iPhone sized view controller for instance. – Fraggle Sep 17 '14 at 15:00
  • 5
    This should be the correct answer (at least for those only work on non-Universal platform) – Raptor Sep 23 '14 at 03:21
  • 36
    I don´t know why people marked this as right answer... the first one is the way it should be done... If you don´t like layout constraints than you are going in the reverse direction... Apple is leveraging a good way of developing for all sizes of iPhone and iPads and you just want to go back to the old stuff? Because you cannot afford updating yourself? Never down voted but it seems this answer confuses people and makes then use the old approach (which will be deprecated) instead of encouraging then to use the new stuff... – Raphael Ayres Oct 16 '14 at 06:27
  • 3
    Top answer for everybody who's used to iPhone/iPad storyboards – mamarx Oct 30 '14 at 14:46
  • Correct Answer. But why we do that?. I've seen in many tutorials of auto layout they perform same action. – Alizain Prasla Jan 07 '15 at 08:36
  • 1
    @RaphaelAyres, so what is the correct way of adjusting or using the 600x600 view? – Syed Asad Ali Jan 20 '15 at 10:55
  • 3
    Use the layout constraints... Apple is doing this in the same way Android works. The view has no form... Sometimes it might be a pain, but if you force the size, your App will look bad on different device sizes. If you want a button to appear on the bottom right corner, just create 2 constraints for it, and ban... no X or Y selection. All will be set by the Engine. Use intrinsic sizes. Use your imagination. Use relational constraints. Learn this s***. – Raphael Ayres Jan 28 '15 at 21:44
  • 1
    @RaphaelAyres, this answer is just for those people who are creating their apps for only iPhone. But if you are creating universal apps, then either you create a different storyboard for iPhone/iPad or you use the same storyboard (in this case 600x600) for different devices. So, if you need to use same storyboard, then your argument is valid, otherwise invalid. Most importantly, it doesn't do anything with the Autolayout constraints. – Asif Bilal Jan 29 '15 at 08:21
  • @RaphaelAyres, and why the people marked this answer as right? Because, this answer fulfil the above mentioned question's context. Just try to understand the question what's exactly asked. – Asif Bilal Jan 29 '15 at 08:26
  • @AsifBilal iPhone now has 3 different sizes. If you do it like this, you will end up with 3 different storyboards, choosing then dinamically in code according to the screen size. This does not seems right to me, even doing only iPhone. Other thing, if you choose your App as universal, even if you don´t code iPad UX, your App will look a LOT more acceptable on iPad, making it usable on all iOS devices. Even though it fulfils the question, doesn´t mean that it´s right. It´s like using Mac OS X Leopard to surf the web. It fulfils the need to surf the web, but does not have all the latest updates. – Raphael Ayres Feb 15 '15 at 02:49
  • 1
    its completely in wrong direction , learn new tools and constrains its much better and easier – vishal dharankar Jul 18 '15 at 11:25
  • This answer recommends bad practice. You should develop your interface using the generic 600x600 canvas and use the device preview pane to see how your changes affect different devices – jackslash Jan 26 '16 at 18:42
  • 1
    Asif Bilal is my senior and believe me he got a solution for every problem. Bravo Sir – iAhmed Jun 06 '16 at 09:04
81

While Asif Bilal's answer is a simpler solution that doesn't involve Size Classes (which were introduced in iOS 8.) it is strongly recommended you to get used to size classes as they are the future, and you will eventually jump in anyway at some point."

You probably haven't added the layout constraints.

Select your label, tap the layout constraints button on the bottom:

enter image description here

On that menu add width and height (it should NOT be the same as mine) by checking their checkbox and click add constraints. Then Control-drag your label to your main view, and then when you de-click, you should have the options to center horizontally and vertically in container. Add both, and you should be set up.

jackslash
  • 8,550
  • 45
  • 56
Can Poyrazoğlu
  • 33,241
  • 48
  • 191
  • 389
  • 1
    Excellent - this worked great for me - Thank you for your help (will accept your answer when the timer is lifted) – Candyfloss Jun 08 '14 at 10:55
  • 1
    You are welcome. This is the default behavior with autolayout, which is enabled by default now. Remember, because of possible different screen sizes/layouts, there should be a way of calculating where a view will be positioned relative to its parent, and autolayout fixes this issue. when you don't add these constraints, view creates them automatically at runtime but relative to the top-left corner. If you need anything else than that (you almost always need something else), you need to specify the constraints explicitly. – Can Poyrazoğlu Jun 08 '14 at 12:43
  • 4
    Note the control-dragging (which can be awkward) is not necessary. The button to the left of the one selected in this image opens a menu that allows you to pin the horizontal and vertical centres. – jrturton Jun 10 '14 at 06:20
  • You are right.. I'm just used to control-dragging that's why I've told it that way. – Can Poyrazoğlu Jun 10 '14 at 10:13
  • @CanPoyrazoğlu--You mention "Select your label." What label? I've got the same issue with a new iPhone project in which I have no labels or other UI elements. My first project in Xcode 6, using Objective C. – rattletrap99 Oct 19 '14 at 17:54
  • @rattletrap99 the label is the text in the editor which says "Hello World". It's just a User Interface element. It could be a image view (that displays photos etc), text view (that displays longer text), web view (that displays a web page) or a button that you can tap (and fire an action when tapped). but the general idea applies to all of them. – Can Poyrazoğlu Oct 19 '14 at 19:49
  • Thanks! I selected the intrinsic view of the View Controller and employed the two buttons at the bottom of the storyboard (access to the constraints appears to have changed from what you show here) to adjust the size of the view (which is now represented by rectangles rather than by numbers). Thanks again! – rattletrap99 Oct 19 '14 at 22:56
  • Thanks, this really helps. Both your answer and Bilal's. – creativityoverflow Jan 15 '16 at 02:17
18

If you are using Xcode 6 and designing for iOS 8, none of these solutions are correct. To get your iPhone-only views to be sized correctly, don't turn off size classes, don't turn off inferred metrics, and don't set constraints (yet). Instead, use the size class control, which is an easy to miss text button at the bottom of Interface Builder that initially reads "wAny hAny".

Click the button, and choose Compact Width, Regular Height. This resize your views and cover all iPhone portrait orientations. Apple's docs here: https://developer.apple.com/library/ios/recipes/xcode_help-IB_adaptive_sizes/chapters/SelectingASizeClass.html or search on "Selecting a Size Class in Interface Builder"

Eli Burke
  • 2,729
  • 27
  • 25
  • I feel like it is useful to read through the entire _Size Classes Design Help_ in your link, i.e., from _About Designing for Multiple Size Classes_ to _Deploying an App with Size Classes on Earlier iOS Versions_. – Franklin Yu Feb 02 '16 at 06:45
  • This is a great solution if you want to keep auto layout but want the storyboard views to appear as landscape or portrait instead of a square. – stephenspann Jun 30 '16 at 16:10
5

In Storyboard, select your ViewController and go to Atribute Inspector. At the very top, under Simulated Metrics you have Size and Orientation properties which are set to Inferred. Change them to desired values.

In order for an application to display properly on another screen size, you also have to setup constraints, as described by Can Poyrazoğlu in the first post.

David Andrews
  • 51
  • 1
5

I had this issue in xcode 6 and there is a way to resolve the resize conflicts. If you select your view, at the bottom you will see an icon that looks like |-Δ-|. If you click on it, you're project will resize for different devices.

user2961953
  • 155
  • 1
  • 2
  • 6
  • Yes and after you select the triangle symbol click on add missing constraints and boom you are done view will resize as per device size if its universal app – vishal dharankar Jul 18 '15 at 11:26
3

Go to Attributes Inspector(right top corner) In the Simulated Metrics, which has Size, Orientation, Status Bar, Top Bar, Bottom Bar properties. For SIZE, change Inferred --> Freeform.

Rachel
  • 237
  • 1
  • 7
  • +1 @Rachel thank you for this helpful little tip about Simulated Metrics -> Size: "Freeform" (aka, apparently, "enable a custom size for a reusable xib backed by a custom view"). – cweekly Mar 16 '15 at 20:09
3

On your storyboard page, go to File Inspector and uncheck 'Use Size Classes'. This should shrink your view controller to regular IPhone size you were familiar with. Note that using 'size classes' will let you design your project across many devices. Once you uncheck this the Xcode will give you a warning dialogue as follows. This should be self-explainatory.

"Disabling size classes will limit this document to storing data for a single device family. The data for the size class best representing the targeted device will be retained, and all other data will be removed. In addition, segues will be converted to their non-adaptive equivalents."

Ohmy
  • 2,201
  • 21
  • 24
3

For anyone using XCode 7, it's very easy to design for a specific device size (instead of the default square-ish canvas).

In Interface Builder, select your ViewController or Scene from the left menu. Then under Show the Attributes Inspector, go to the Simulated Metrics, and pick the desired Size from the dropdown menu.

Priest
  • 242
  • 4
  • 11
  • That will only let you design in your storyboard for that device. When you run your app, its design may vary wildly for different screen sizes. – dev Apr 03 '16 at 11:12
  • @JoeyTawadrous Exactly. But it answers the question asked :) – Priest Apr 12 '16 at 16:00
2

You shall probably use the "Resolve Auto Layout Issues" (bottom right - triangle icon in the storyboard view) to add/reset to suggested constraints (Xcode 6.0.1).

swnn
  • 31
  • 5