Prototyping with Interface Builder

With the acquisition of Next in 1997, a new tool was initiated into the Apple family. Originally known as an enhancement of OpenStep, called NextStep, it caught the attention of the developer community under the name of Interface Builder, as part of the XCode suite. Now about to celebrate its 20th birthday, Interface Builder represents the most powerful IDE to design user interfaces in a development suite. It doesn’t matter if you are writing an app for iOS, Cocoa, tvOS or watchOS; when carefully used, it will save you hundreds of lines of code. For this and other innumerable reasons, many developers, like myself, love this tool.

What the  NextStep UI looked like. Copyrighted, https://it.wikipedia.org/w/index.php?curid=509287

Developers are not the only ones who may be interested in such a product. Since Leonardo da Vinci’s era (and before), prototyping has been of fundamental importance in the designer’s world. In recent years, the realization of a fast, high-def, interactive prototype has become part of the production routine for many apps. It provides several advantages: A better understanding of the product you’re designing; the ability to tackle potential weakness and failure points earlier in time; allowing demos and better estimates; and providing a tool for user testing.

In order to understand how this prototype works, we need to introduce some fundamental building blocks used in it: UILabels, UIImages, and UIButtons. The first two show text or images while the third one is what we will use to add interactions to our prototype.

We will start by creating a new project in Xcode, then select a Single View Application for tvOS (everything works in the same way for the other Apple OSes). In the Project Navigator, select Main.storyboard, this will open the Interface Builder, where we can play with all these UI components.The project navigator area can be also used to drop folders containing custom assets and fonts. Adding labels and images is pretty straightforward and a lot of customization is offered in the Attributes Inspector right panel. The situation is slightly trickier when using buttons. After placing the UIButton in the main view, you need to hold down the Control key while clicking on it and drag the indicator that appears to another view. This associates the default action of the button, the ‘touch-down’ event to the new view target.

UILabel, UIButton and UIImageView are essential components for prototyping. These and other components can be found in the Object Library menu on the right side of the Interface Builder.

An advanced option, which is an alternative of the UIButtons as shown in the demo, consists of adding the target-action logic to a Gesture Recognizer. This component can listen to events like tapping, rotating, swiping, etc. To add custom actions to an object in which we added a gesture recognizer, just Control+click on that and drop the arrow on a target object.

To select the target of a button action, Control+click on the button and drag the arrow to the target.

Finally, the fourth tool shown used is the Storyboard. Since October 2011, when they first appeared, Storyboards revolutionized the way views are presented. Combined with the target-action pattern, the Storyboard allows the user to decide which view to present and how to do that (still, without a line of code). Interface Builder creates a Segue, which is a connection between two views, automatically when a target is selected. Clicking on the Segue you can customize many details on how the view is presented. Two important customizations are:

• Presenting a view as a new context, which replaces the current view and presents a new one.
• Presenting a view on top of the current context, which presents the new view on top of the previous one, showing the overlapping of the two.

In a Storyboard Segue, select the present over current context presentation style. This will show the new content on top of the previous view.

The last component used in the demo is the UITableView. It’s surprising how popular this component is in many of the apps that we use every day. We can add the table view controller directly to the Storyboard by dropping it on an empty area. In order to add it to an existing view, we can use a Container View. Control+click the Container View, drag the arrow to the table view controller, and select the “Embed” Segue. Since in the demo we use static data to populate the table view, we set the property “Content” to be “Static Cells” (using the Attributes Inspector). Every cell in the table can be customized, adding images, buttons or any other kind of components.

In order to use UITalbleViews in a prototype, you need to select Static Cells in the attribute inspector.

There are many UI components that work easily without the use of any code. The more you play with them, the more you’ll be able to make a pixel-perfect prototype. Finally, another useful feature of the Interface Builder, not shown here, is the ability to design responsive prototypes. If what I have explained until now did not impress you, this better do it :-).

One single prototype can work perfectly for all the iPhone and iPad resolutions. The magic is done by Interface Builder using two strategies: Auto Layout, which allows the user to position elements using constraints instead of absolute coordinates Size Classes, which allows the user to select objects to show and hide depending on the device and orientation.

• Auto Layout, which allows the user to position elements using constraints instead of absolute coordinates Size Classes, lets the user select objects to show and hide depending on the device and orientation.
• Size Classes, which allows the user to select objects to show and hide depending the device and orientation.
  More information about these can be found here and here.

Happy prototyping with Interface Builder!