Hello Swift!

Size classes

In Xcode 5, when you create a project for an universal app, you end up by having two storyboards, one for iPhone and one for iPad. With Xcode 6, this is not the case anymore. We have created a universal project and we have only one storyboard with a view controller that has a size that’s a bit unusual.

Before iOS 8, you would use UIInterfaceOrientation and UIUserInterfaceIdiom to differentiate between portrait and landscape and iPhone and iPad. Based on this values you could make changes to your UI. Size classes replace these two concepts and make it easier for your UI to adapt to different screen sizes and orientation.

In Interface Builder, have a look on the bar underneath your view controller and you will see a label with w Any h Any. If you tap on it it will allow you to select between values for width and height: compact, regular or any.

For example, a compact height and regular width is an iPhone in landscape orientation, while a regular height and a compact width is an iPhone in portrait orientation. Any height and any width can mean iPhone or iPad in landscape or portrait orientation. You usually start your design in this generic device type and layout your design. Then you can go through each kind of orientation and device you want to customise by changing the height or width from any to a specific value.

Coming back to our example, we want to select the iPhone portrait orientation and make sure that our controls are centred in that view. To do that tap on the size classes label in Interface Builder and select width compact and height regular. Then edit the view until it looks as you wanted:

We could run the app again to see that it really does what we want, then change the layout for iPad or for iPhone landscape orientation, but we don’t have to do that. Instead we can take advantage of a new feature in Xcode 6: preview. Bring up the Assistant editor. Then select the preview like this:

You can see the changes in real time in the Preview window and you can add as many devices as you want and change from portrait to landscape orientation. Our app looks good in portrait on an iPhone, but when we change to landscape it doesn’t look so good. We could just move our controls to be centred but we can do other things as well. For example we could line up the label, text field and button and take advantage of the width of the screen. Feel free to experiment!

If you want to find out more about size classes and how you can use them in your apps I suggest you watch the “Building Adaptive Apps with UIKit” WWDC session. It’s a great session and covers size classes in depth.

And finally, after all this work, if we now run our app we have our “Hello world!” on the screen:

This app is not perfect yet, the keyboard is obscuring the button and text field in landscape mode or on smaller screen sizes. To fix this you can have a look at this post and apply the fix to this app.

I hope you’ve enjoyed this introduction to Swift. If you want to learn more about it make sure you watch the Swift sessions from WWDC, they are a great way to learn the most important things. And stay tuned, more Swift tutorials to come shortly.