Mobile Development

More Interface Builder

The Interface Builder has a variety of tools that allow you to build amazing experience in your app. This section will talk about how to combine IB with source code.

Since we are jumping into iOS now, it's important to realize a little of where we once where.

History

Once upon a time, there wasn't an Interface Builder and view programming was done in directly code.

Then along came something called Nibs. Nibs were files that allowed the programmer to accomplish visual editing and were somewhat complicated and not easy to edit outside of Interface Builder (or IB).

Then XIBs came along.

XIBs

Even though Apple pushes the use of Storyboards, XIBs are still available and are commonly used for reusable views that occur across multiple storyboards or projects.

Xibs showed up later. They were more refined and featured XML behind the scenes so you could (if you wanted) view the files with a text editor.

Finally, Storyboards came along.

Storyboards

Last, we have Storyboards - a collection of Xibs within one single file (also XML).

Storyboards is where we will be spending the majority of our time. They give an overview of several XIB-like files within one view. They are helpful for seeing entire sections of your UI at a glance.

Building your UI isn't complete until you've made a connection back to your code.

Connections

Making connections from the Storyboard into your View Controller code involves dragging outlets from the Utility pane to your control. Make sure you have the parent View Controller selected in the Document Outline.

To begin, you'll need to use your View Controller code and create outlets and actions. Swift uses a special character to denote objects and functions that are available within Interface Builder. That is the @ symbol.

import UIKit

class YourViewController: UIViewController {
    @IBOutlet var userName:UITextField!
    @IBOutlet var userPassword: UITextField!

    /////

    @IBAction func submitButtonPressed:(sender: AnyObject) {

        // perform some action
        // perhaps with self.userName or self.Password
    }
}

Once we have the outlets, we can enter IB, using the Utility pane. We will demonstrate this with a video from YouTube.

[Video] Hooking up outlets and actions with Interface Builder

IB with Xcode 6

References

Working with Interface Builder - https://developer.apple.com/xcode/interface-builder/

What's new in Interface Builder - https://developer.apple.com/videos/play/wwdc2014-411/