Storyboards are introduced in iOS 5. The storyboard contains the designs for all of your app’s screens, and shows how the app goes from one screen to another with big pointy arrows. This initial scene is represented by a square in the middle of the Interface Builder canvas. You may find this odd, considering that iPhones are not actually square. This is a new feature of iOS 8 called “size classes” or “universal storyboards” that lets you design a single storyboard that caters to the different screen sizes of the various iPhone models.
In XCode, we design UI elements and the information is kept in a nib file. The corresponding ViewController class is a typical “swift” file or an Objective-C’s .h/.m file combination. With this disconnected system in place, a mechanism is required to connect the two ends. IBOutlet is one part of such a mechanism.
An outlet is a property of an object that references another object.An application typically sets outlet connections between its custom controller objects and objects on the user interface. The type qualifier IBOutlet is a tag applied to an property declaration so that the Interface Builder application can recognise the property as an outlet and synchronise the display and connection of it with Xcode.
Note: You create an IBOutlet connection, if you want to access the properties of a UI element, such as if you want to read the text property of a textfield.
As discussed, IBOutlet is used to access the properties of UI controls. What if we want to tap the actions associated with them? IBAction completes the full picture. An action is the message a control sends to the target or, from the perspective of the target, the method the target implements to respond to the action message. IBAction does not designate a data type for a return value; no value is returned. IBAction is a type qualifier that Interface Builder notices during application development to synchronise actions added programmatically with its internal list of action methods defined for a project.
Note: You create an IBAction connection, if you want to respond to a user action / interaction, such as tap on a button.
In the following exercise, we will create an application using Storyboard feature of Xcode and exhibit and master the following techniques:
- Designing a basic user interface.
- Show / hide various panels of Xcode.
- Creating an IBOutlet connection.
- Creating an IBAction connection.
- Reading values from UI controls.
- Manipulating values of UI controls.
- Show / Hide keyboard when the TextField gains or looses focus respectively.
Besides, you will also learn about some of the Foundation Framework classes that are used to manipulate numeric & string values.
Let’s start with creating our app and call it : Multiply.
Step 1:- Creating the app and getting familiar with Xcode
1. Launch Xcode and create a new project. On the Choose a template screen, choose Single View Application.