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.
| 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 |