Workshop 4: Design The App View

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:

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.

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.

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

Figure 3: The storyboard scene with controls