On top of the scene, there are three icons: the first yellow and the next two orange. These are the View Controller, First Responder, and Exit as can be seen in the following screenshot:

The following is the description of the three icons:

You can simply press CMD+R or click on the Run button. You will see it running in the simulator, as shown in the following screenshot:

You might wonder why the button is being cut off even when you centered it and aligned it. The main reason for this is that Interface Builder sets the size of the view to 600 x 600 by default. When this is run and positioned on an iPhone-sized screen, the elements are culled or clipped and hence half the button is shown in the preceding screenshot. When you switch off the size class, the sizes are retained for either the iPhone or the iPad screen size and thereby they remain as you might have laid out your elements. You can switch off the size class from your storyboard by navigating to the first tab of Utilities Navigator (OPT + CMD + 1) under Interface Builder Document and deselecting Use Size Classes. With size classes, you can create a single view that adapts based on the device and the orientation it is run on. You can also switch off Autolayout for the project.

To be able to access the various parts of Table View, such as the cells and the content, you can activate the document outline that allows you to access each element more accurately than by simply clicking on them.

Click on Table View and, under the Attributes Inspector tab, change the value of Prototype Cells to 4. This determines the number of items displayed in Table View. Change the Content option to Static Cells from Dynamic properties. Change the style to Grouped from Plain. Next, click on each of the Table View Cell options and change the type to Basic from Custom. Now, select the Table View section. ensure that the value of rows is 4, and add Header and Footer text.

Click on each of the Table View Cell options and, under Accessory, change the value to Disclosure Indicator from None. This will display the > indicating that, when the tableCellView is clicked, it will display some other detail.

Now, double-click on each of the cells to edit and set its text. We are making a Stooge-o-dex so we have the names of the four stooges. The show was called the Three stooges; however, there were as many as six stooges but that's beside the point here. We will have information about four stooges in our sample application.

Name the cells as Moe Howard, Shemp Howard, Larry Fine, and Curly Howard:

Add four View Controllers, add an image view, and add two labels on each of them. The image will hold the picture of the stooge and the two labels will display some information about the stooges. Position the image view to be centered horizontally and towards the top of the view. Position the first label just below the image view and position the last label at the bottom of the view. Refer to the following screenshot. In the Attributes Inspector tab, name the View Controllers as per the names of the stooges. Add the four images (you can get these from the companion files download) to your project; then select the image view and set its image property from the Attributes navigator. Type relevant text into the two labels. Set your constraints to have them display as per the following screenshot:

Next, press Control and click-and-drag from each of Table View Cells to the View Controller to connect them with a segue. Select show when asked how you would like to display the View Controller. After you are done connecting Table View Cells to the View Controllers, you should have a storyboard with multiple arrows connecting the scenes, as seen in the following screenshot:

A storyboard with multiple arrows connecting different scenes

Open the assistant editor (press OPT + CMD + Enter) and then select the storyboard. Next, click on the first icon on the left; it looks like a set of 4 squares. Scroll down to the Preview option and select it. This displays a preview of the view. If you do not get the Preview option, but see a code file in the assistant editor, select the storyboard from the list of recent files (in the assistant editor), and then select the Preview option again.

Click on the plus button (+) at the bottom; it offers three choices: the iPhone 3.5, iPhone 4.0, and iPad. When you select a particular device, it is added to the preview and the view in the main editor is displayed as adapted for that particular device. It is very useful to preview your work live on various-sized devices. You can add two of the same and keep them in different orientations, as shown in the previous screenshot. You can see how the View Controller for Moe Howard in both portrait and landscape is adapted and displayed based on the view and constraints. This would speed up the process to create adaptive UIs. In addition to this, designers can create the UIs with Xcode and add basic functionality without writing a single line of code. This book does not go into details of auto layout and constraints as that is a topic that might require a chapter or more by itself. It could be used to create pixel-perfect and aligned UIs as your designer might expect while designing it in some image manipulation software.

Once you have populated the screens for all four of the View Controllers, you are all set. You have just created a static application without writing a single line of code.

You can also select which controls are seen in a particular orientation, work with the Any | Any option for the common elements, then switch to the desired orientation or size; for example, navigate to Compact | Any for widescreen layouts on an iPhone device. Rearrange or add the component you want for that orientation.

You might notice in the preceding screenshot that the two previews have different buttons depending on the orientation they are displayed in.

While it is easy to create UIs in Interface Builder, there is only so much that you can do. If you want to add a button that displays another view, it is rather difficult to do that in Interface Builder.

Before we start writing some code, there are a couple of things that we need to know about Interface Builder and Xcode:

If you are new to Xcode, you would want to take care of what you connect from. This is because there are differences between, say, connecting an element to the first responder and connecting the first responder to an element.

This book will not delve into autolayout, but a quick look at it would help you to understand a bit more about autolayouts. In the following screenshot, the button has its constraints set to position it in the center, both horizontally and vertically. There is another constraint that sets the vertical spacing between the button and the label. There are another two constraints: the width and the height. Interface Builder shows you where the element would be shown at runtime as seen via the orange dotted lines. In fact, it would even show you inconsistencies and missing constraints, including if any of them are ambiguous or conflict with others. It even tells you that the frame will be different at runtime.

You can also individually click on each of the constraints like any other object in Interface Builder and it will show up in Properties Inspector, which you can tweak as required.

You have the simple UI that you need (also referred to as the view). To create the controller, we navigate to File | New | File. Under iOS Source, select Cocoa Touch Classes, name this myViewController and select it as Subclass of UIViewController. Do not select Also create XIB file as we are using storyboards, and choose the language as Swift.

To create the connections, open the storyboard in the editor and position the view, in Identity Inspector, change the class from UIViewController to myViewController. Now, if you open the assistant editor (by pressing OPT + CMD + Enter) it will open the myViewController.swift code in the assistant editor. Now press control and drag from the label to the code at the top just after the class name declaration, and select to create an outlet connection, name it theText, and ensure that storage is of type weak.

This would create the code:

@IBOutlet weak var theText: UILabel!

Next, press control and drag from the button to the code and create a connection of type action, name it pressMe. This would generate the following lines of code:

@IBAction func pressMe(sender: AnyObject){
}

You need to supply the code for that action. In this case, to create UIAertViewController, type the following code between the curly braces:

let alert = UIAlertController(title: "Button Pressed", message: "You pressed this button", preferredStyle: .Alert)
let actionOK = UIAlertAction(title: "OK", style: .Default, handler: nil)
let actionNo = UIAlertAction(title:"Nopes", style: .Cancel, handler: nil)
alert.addAction(actionOK)
alert.addAction(actionNo)
self.presentViewController(alert, animated: true, completion: nil)

This would create an alert as expected when the button is pressed:

To be able to process the alert button, that is, handle the button pressed, you need to add a function block to the action's handler. We had specified it as nil previously. For now, we will simply display a message to the Xcode console window using println. Modify UIAlertAction as follows:

let actionOK = UIAlertAction(title:"OK", style:.Default, handler: {_in println("We clicked OK"})

When you are writing code, there are times when you are unsure of the methods or properties; Xcode offers a quick and easy method to lookup the words. If you keep the option key pressed and hover over a class, it underlines the word with a dotted line and the cursor changes to a question mark, this will display a pop up with the details of the word under the cursor. If it is a function or a method it displays its details:

If you have the command key pressed, the cursor changes to a hand cursor and the word under the cursor changes to a solid line. Then, if you click on the word, it would open the corresponding header declaration and even display the declares (from the system file headers) and so on as their Swift equivalents. If the class is your own custom class, then the source code file is displayed.

Connections created using Interface Builder can end up with multiple connections if you create, change elements and maybe recreate the connections. Most importantly, if these connections are invalid or changed, they may cause crashes. It is best to check the connections and removing them if they are no longer required. To bring up the connections, you can right-click on the object and it will display a list of items; it will also show the connections (if any). Another way to look at the connections is in Connections Inspector (OPT + CMD + 6) under Utilities Inspector.

Connections Inspector

Once you start to connect code and views in storyboards, you can do a lot more than display simple alert boxes. You can attach gesture recognizers to make your UI interact with gestures. Continuing with the example project, you can add a rotation gesture recognizer and then rotate the button, which looks really cool and still works like a button.

First, look up for Rotation Gesture Recognizer from Object Library and drag it to the view. Notice that this does not show up on the view; it sits on top of it. It looks like a yin-yang symbol. Then, set up the gesture recognizer by connecting it. Press Control and drag from the button to the gesture recognizer; from the pop-up menu outlet collections, select gestureRecognizers. Next, open up myViewController.swift in the assistant editor; press control and drag from the gesture recognizer to the editor and add a new IBAction called rotateMe. This creates a blank function with the name rotateMe in myViewController.swift. You can add the following code to this function:

@IBAction func rotateMe(sender:AnyObject){
    let gesture = sender as UIRotationGestureController
    let transform = gesture.view?.transform as CGAffineTransform!    
gesture.view?.transform = CGAffineTransformRotate(transform, gesture.rotation)
    gesture.rotation = 0
}

First of all, the parameter passed to this function is of the AnyObject type; we could have instead specified that we need this to be UIRotationGestureController. The code simply changes the rotation of the view by using CGAffineTransformationRotate and then sets the rotation as 0, so it continues from that point. Otherwise, it goes a bit crazy with the rotation adding up. You can comment the gesture.rotation = 0 line and have a look. Alternatively, Apple offers you something called the CGAffineTransformIdentity. This is basically the default position with no transformations applied, no rotations, no scaling, etc. So you could use this as the starting point to apply your transforms.

If you are in the simulator, you can press the option key to get the second touch and then rotate the button. The rotated button works just as it did when it was normal.