Did you know that the Interface Builder in Xcode lets you preview your layout without having to run the app in the simulator? It’s a well kept secret and very handy if your app doesn’t build (because the code is just not ready).
Here’s how to do it:
Select a storyboard or XIB file to bring up Interface Builder. You’ll see all your GUI components laid out as usual. Now switch to the Assistent Editor mode (two little circles at the top right; this used to be a butler type symbol prior to Xcode 6). In the jump bar you’ll see something like Automatic or Manual, followed by the corresponding file that has been preselected.
Click on this very word and see a menu that includes several options, among which you’ll find Preview. Select it and see a fly-out with all your storyboard files (there’s only one by default: Main.storyboard). Pick the one in question.
And hey presto: on the left side of your screen you see the adjustable Interface Builder, and on the right you’ll see what this layout would look like if you would run the app in the simulator.
Previewing different iOS devices
My Xcode defaults to the 4″ iPhone. It’s easy to add further configurations to this window so you can see side by side how various iPhone and iPad sizes display you components (if your monitor is big enough – you may not want to try this on an 11″ MacBook Air). See that little plus icon at the bottom left of the Preview window? Click it and choose another configuration. It’ll be added to the Preview window.
If you feel that you’re done with a particular configuration, select it in the Preview window (the outline of your dummy device turns blue) and hit the delete key. Begone, configuration!
Previewing Localisations
If you have localised your app, you can even preview the various languages you’ve implemented. This is so much more convenient than changing the simulator’s regional settings every time you want to see if the German word for “Click here” fits on your small button (the translation would be something like “Bitte drücken Sie jetzt sofort diesen Knopf”).
Here’s how to preview localisations: at the bottom right of your Preview window you’ll see your current development language. Mine is English. Click it to bring up a menu with other languages this storyboard has been translated into.
If you don’t have a translation ready yet, you can make use of a “dummy” language that simply doubles doubles every every word word to emulate what longer words would look like.
Have fun with the Storyboard Preview!
How do this in Xcode 10? (2019r)