The goal of this chapter is to show you how to use Xcode 6 IDE to design an iOS application’s user interface by adding controls on the storyboard scene and setting attributes of the scene’s controls. Before you begin I assume the following:

  • You installed Xcode 6 on your Mac
  • You’ve created an iOS project called Swift Variable; if not then read Workshop 2
  • You know how to add any image in the an iOS project

When you create a new iOS project in Xcode 6, it create a storyboard file with one or more scenes. The number of scenes the storyboard contain depends on the template you select from the project template window. The storyboard scene serves as the application’s user interface.

Set The Set Size Class Grid

Launch the Swift Variable project you created in Workshop 2. Next click the Main.storyboard file to load it in Interface Builder (IB). Now before you add objects on the scene, make sure the Size Class grid-shown in the image below is set to wAny hAny. By setting the Size Classes grid to that combination, the app user interface will adapt to any iOS device screen size.

Figure 2: Size Classes Grid

Each square in the Size Class grid represent a size type, and there are 9 different ones. The top row is compact height, the middle row is any height and the bottom row is regular height. The left column is compact width, the middle column is any width, and the right column is regular width. This table shows combinations you can set in the Size Classes grid.

Size iOS Device
Compact width + Compact Heigh iPhone Landscape
Compact width + Any Height iPhone Landscape , iPhone Portrait
Compact width + Regular Height iPhone portrait
Any width + Compact Height iPhone Landscape
Any width + Any Height Any device
Any width + Regular Height iPhone portrait, iPad Landscape, iPad Portrait
Regular Width + Compact Height custom views
Regular Width + Any Height iPad Landscape, iPad Portrait
Regular Width + Regular Height iPad Landscape, iPad Portrait

Now, drop this image in the Navigator area.


Add Controls on The Storyboard Scene

Here are the controls to add on the storyboard scene and attributes to set for them.

Control Attribute Value
Image View Image swift-app-dev-icon.jpeg
Width, Height 213, 73
Text View Color Lime
Font System 17.0
Background Iron
Button Title Show Output

When you finished designing the storyboard scene in IB, it should look like this in Interface Builder.

Figure 3: The storyboard scene with controls


No responses yet

Leave a Reply

UIDocument Demystified: A Step-by-step Guide on Local and iCloud Document Storage