Introduction to Mac Development: Build the UI

After creating a project, the next step in developing a Mac app is to build the user interface. In this article you’ll learn the basics of building user interfaces with Interface Builder, which is a part of Xcode.

I talk about storyboards in this article, but most of the material applies to xib files as well. The main differences are that xib files do not have scenes and do not have view controllers.

Open the Storyboard

Select the main.storyboard file to open it in Xcode. The following screenshot shows what a storyboard looks like initially:

The left side of the storyboard (or xib file) contains the document outline, which shows the items in the storyboard. The right side of the storyboard contains the canvas, which is where you lay out the user interface.

A basic storyboard in a Mac app has the following scenes:

• Application scene
• Window controller scene
• View controller scene

The application scene contains the menu bar. The window controller scene contains the main window for the app. The view controller scene contains the view controller that manages the window’s content. You place the controls in your user interface in the view controller.

Simple user interfaces can get away with one window controller and one view controller. More complex user interfaces require more scenes. If you were going to recreate the interface for Apple’s Mail app, you would need four view controller scenes:

• A view controller for the outline view with the list of mailboxes and folders.
• A view controller for the table view containing the messages in the selected mailbox or folder.
• A view controller for the text view showing the contents of the selected message.
• A split view controller to contain the three view controllers.

A Mac app with user preferences would have a window controller scene for the preferences window.

Finding the UI Elements

To build a user interface you must first find the user interface elements. The user interface elements are in the object library. In Xcode 10 Apple changed the location of the object library so it can be difficult to find. The Library button is on the right side of the toolbar at the top of the project window.

Newer versions of Xcode have an Add (+) button to open the object library.

Click the Library button to open the object library. Option-clicking the Library button keeps the object library open until you explicitly close it.

At the top of the object library window is a search field. Enter a search term to more easily find an item in the object library. If you enter button in the search field, the object library shows all the available buttons.

Add UI Elements to Your Interface

To add an element to your app’s user interface, select it from the object library and drag it to the canvas. For most visible controls, including labels and buttons, you should drag the control to a view controller in the canvas.

Moving and Resizing Elements

Select a UI element from the canvas or document outline to move or resize it.

To move an element, select it and drag it to where you want it to be. To resize an element, select it, click one of the squares on the edges of the selected element, and drag.

Making Other Changes

To make other changes to UI elements, use the inspectors on the right side of the project window. If you don’t see the inspector, either choose View > Inspectors > Show X Inspector, where X is the name of the inspector or click the button in the upper right corner of the project window.

Xcode has the following inspectors for Mac UI elements:

• Identity inspector
• Attributes inspector
• Size inspector
• Connections inspector
• Bindings inspector
• View effects inspector

The attributes inspector is the inspector you’ll use the most.

Identity Inspector

The thing you’ll use the identity inspector for most is setting the class of a UI element.

Set the class for a UI element if you create a subclass of one of Apple’s classes. Set the class to tell Xcode that the UI element is your subclass. View controllers are what you’re most likely to subclass.

Attributes Inspector

The attributes inspector is where you view and edit a UI element’s attributes. What you can set in the attributes inspector depends on the UI element. The following screenshot shows the attributes inspector for a button:

As you can see there are a lot of attributes you can set for a button.

Size Inspector

The size inspector is where you can see and change a UI element’s position and size.

If you are not using auto layout, use the Autoresizing mask to determine how the element’s size and position changes when someone resizes the window.

Connections Inspector

The connections inspector shows the connections a UI element has and can have.

The Sent Actions section in the screenshot shows an actual connection along with the button outlet in the Referencing Outlets section. The rest of the items in the screenshot are the possible connections that element can have.

Click the X on a connection to remove the connection.

Bindings Inspector

The bindings inspector works with Cocoa bindings. Cocoa bindings are not available on iOS and have not been changed since macOS 10.5 so you’re not going to find a lot of current information on how to use them.

Cocoa bindings use special controllers to keep user interface elements and data objects in sync. If you open the object library and enter Controller in the search field, you can see the bindings-compatible controllers: object controller, array controller, dictionary controller, tree controller, and user defaults controller.

To use bindings add one of the bindings-compatible controllers to the storyboard or xib file. Use the attributes inspector to determine the type of data the controller manages. Use the bindings inspector to bind a UI element to the controller.

The bindings inspector shows all the bindings a UI element has.

You can bind a UI element by selecting the Bind to checkbox, choosing a controller to bind to, and supplying the appropriate keys.

View Effects Inspector

The view effects inspector works with Core Animation to animate UI elements.

Exercise

Add some controls to a storyboard. Run the project and see those controls in the window.

Summary

Remember the following points to build your Mac app’s user interface:

• Select the storyboard or xib file in the project navigator to open it.
• Option-click the Library button to access the UI elements.
• Drag a UI element from the object library to the canvas to add it to the user interface.
• Use the inspectors to make changes to the elements.