© Stefan Kaczmarek, Brad Lees, Gary Bennett 2019

Stefan Kaczmarek, Brad Lees and Gary BennettSwift 5 for Absolute Beginnershttps://doi.org/10.1007/978-1-4842-4868-3_10

10. Creating User Interfaces

Stefan Kaczmarek¹ , Brad Lees¹ and Gary Bennett²

(1)

Phoenix, AZ, USA

(2)

Scottsdale, AZ, USA

 

Interface Builder enables iOS developers to easily create their user interfaces using a powerful graphical user interface. It provides the ability to build user interfaces by simply dragging objects from Interface Builder’s library to the editor.

Interface Builder stores your user interface design in one or more resource files, called storyboards. These resource files contain the interface objects, their properties, and their relationships.

To build a user interface, simply drag objects from Interface Builder’s Object Library pane onto your view or scene. Actions and outlets are two key components of Interface Builder that help you streamline the development process.

Your objects trigger actions in your views, and the actions are connected to your methods in the app’s code. Outlets are declared in your .swift file and are connected to specific controls as properties. See Figure 10-1.

Note

Interface Builder was once a stand-alone application that developers used to design their user interfaces. Starting with Xcode 4.0, Interface Builder has been integrated into Xcode.

Figure 10-1.

Interface Builder

Understanding Interface Builder

Interface Builder saves the user interface file as a bundle that contains the interface objects and relationships used in the application. These bundles previously had the file extension .nib. Version 3.0 of Interface Builder used a new XML file format, and the file extension changed to .xib. However, developers still call these files nib files. Later Apple introduced storyboards. Storyboards enable you to have all of your views in one file with a .storyboard extension .

Unlike most other graphical user interface applications, XIBs and storyboards are often referred to as freeze-dried because they contain the archived objects themselves and are ready to run.

The XML file format is used to facilitate storage with source control systems such as Subversion and Git.

In the next section, we’ll discuss an app design pattern called Model-View-Controller. This design pattern enables developers to more easily maintain code and reuse objects over the life of an app.

The Model-View-Controller Pattern

Model-View-Controller (MVC) is the most prevalent architectural pattern used in iOS development, and learning about it will make your life as a developer much easier.

Architectural patterns describe solutions to software design problems that developers can use in their code. The MVC pattern is not unique to iOS developers; it is being adopted by many makers of integrated development environments (IDEs), including those running on Windows and Linux platforms.

Software development is considered an expensive and risky venture for businesses. Frequently, apps take longer than expected to write, come in over budget, and don’t work as promised. Object-oriented programming (OOP) produced a lot of hype and gave the impression that companies would realize savings if they adopted its methodology, primarily because of the reusability of objects and easier maintainability of the code. Initially, this didn’t happen.

When engineers looked at why OOP wasn’t living up to these expectations, they discovered a key shortcoming with how developers were designing their objects: Developers were frequently mixing objects in such a way that the code became difficult to maintain as the application matured, the code moved to different platforms, or hardware displays changed.

Objects were often designed so that if any of the following changed, it was difficult to isolate the objects that were impacted:

• Business rules

• User interfaces

• Client-server or Internet-based communication

Objects can be broken down into three task-related categories. It is the responsibility of the developer to ensure that each of these categories keeps their objects from drifting across to other categories.

As objects are categorized in these groups, apps can be developed and maintained more easily over time. The following are examples of objects and their associated MVC category for an iPhone banking application:

Model

• Account balances

• User encryption

• Account transfers

• Account login

View

• Account balances table cell

• Account login spinner control

Controller

• Account balance view controller

• Account transfer view controller

• Logon view controller

The easiest way to remember and classify your objects in the MVC design pattern is the following:

• Model: Unique business or application rules or code that represent the real world. This is where the data resides.

• View: Unique user interface code.

• Controller: Anything that controls or communicates with the model or view objects.

Figure 10-2 represents the MVC paradigm.

Figure 10-2.

MVC paradigm

Neither Xcode nor Interface Builder forces developers to use the MVC design pattern. It is up to the developers to organize their objects in such a way to use this design pattern.

It is worth mentioning that Apple strongly embraces the MVC design pattern, and all of the frameworks are designed to work in an MVC world. This means that if you also embrace the MVC design pattern, working with Apple’s classes will be much easier. If you don’t, you’ll be swimming upstream.

Human Interface Guidelines

Before you get too excited and begin designing dynamic user interfaces for your app, you need to learn some of the ground rules. Apple has developed one of the most advanced operating systems in the world with iOS. Additionally, Apple’s products are known for being intuitive and user friendly. Apple wants users to have the same experience from one app to the next.

To ensure a consistent user experience, Apple provides developers with guidelines on how their apps should look and feel. These guidelines, called the Human Interface Guidelines (HIG), are available for iOS, macOS, watchOS, and tvOS. You can review these guidelines at https://developer.apple.com/design/human-interface-guidelines/ , as shown in Figure 10-3.

Figure 10-3.

Apple’s Human Interface Guidelines

Note

Apple’s HIG is more than recommendations or suggestions. Apple takes it very seriously. While the HIG doesn’t describe how to implement your user interface designs in code, it is great for understanding the proper way to implement your views and controls.

The following are some of the top reasons apps are rejected in Apple’s App Store:

• The app crashes.

• The app violates the HIG.

• The app uses Apple’s private APIs.

• The app doesn’t function as advertised on the App Store.

Note

You can read, learn, and follow the HIG before you develop your app, or you can read, learn, and follow the HIG after your app gets rejected by Apple and you have to rewrite part or all of it. Either way, all iOS developers will end up becoming familiar with the HIG.

Many new iOS developers find this out the hard way, but if you follow the HIG from day one, your iOS development will be a far more pleasurable experience.

Creating an Example iPhone App with Interface Builder

Let’s get started by building an iPhone app that generates and displays a random number, as shown in Figure 10-4. This app will be similar to the app you created in Chapter 4, but you’ll see how much more interesting the app becomes with an iOS user interface (UI).

Figure 10-4.

Completed iOS random number generator app

1. 1.
   Open Xcode and select Create a new Xcode project. Make sure you select Single View App for iOS and then click Next, as shown in Figure 10-5.

   

   Figure 10-5.

   Creating an iPhone app based on the Single View App template

    
2. 2.
   Name your project RandomNumber , select Swift for the language, and click Next before creating your project, as shown in Figure 10-6.

   

   Figure 10-6.

   Naming your new Swift project

    
3. 3.
   Your project files and settings are created and displayed, as shown in Figure 10-7.

   

   Figure 10-7.

   Source files

    

Although you have only one controller in this project, it’s good programming practice to make your MVC groups at the beginning of your development. This helps remind you to keep the MVC paradigm and not put all of your code unnecessarily in your controller.

1. 4.
   Right-click the RandomNumber folder and then select New Group, as shown in Figure 10-8.

   

   Figure 10-8.

   Creating new groups

    
2. 5.

   Create a Models group, a Views group, and a Controllers group.

    
3. 6.
   Drag the ViewController.swift file to the Controllers group. Drag the Main.storyboard and LaunchScreen.storyboard files to the Views group. Having these groups reminds you to follow the MVC design pattern as you develop your code and prevents you from placing all of your code in the controllers, as shown in Figure 10-9.

   

   Figure 10-9.

   MVC groups with controller and storyboard files organized

    
4. 7.

   Click the Main.storyboard file to open Interface Builder.

    

Using Interface Builder

The most common way to launch Interface Builder and begin working on your views is to click the associated storyboard file, as shown in Figure 10-10.

Figure 10-10.

Interface Builder in the workspace window

When Interface Builder opens, you can see your scenes displayed on the canvas. You are now able to design your user interface. First, you need to understand some of the sub-windows within Interface Builder.

The Document Outline

The storyboard shows all the objects that your views contain. The following are some examples of these objects:

• Buttons

• Labels

• Text fields

• Web views

• Map views

• Picker views

• Table views

Note

You can expand the width of the Document Outline to see a detailed list of all your objects, as shown in Figure 10-10. To get more real estate for the canvas, you can shrink or hide your file navigator.

The Object Library

The Object Library is where you can exploit your creativity. It’s a smorgasbord of objects that you can drag and drop into the View.

• Clicking the Object Library Button displays the Object Library Popover. The Object Library Popover can grow and shrink by resizing the popover window, as shown in Figure 10-11.

  

  Figure 10-11.

  Expand the Object Library Popover to see more controls

Clicking the Icon View button in Figure 10-12 gives you a more compact view of the Object Library contents, as shown in Figure 10-13.

Figure 10-12.

Object Library Icon View button

For Cocoa Touch objects, the Library contains the following:

• Controls

• Data views

• Gesture recognizers

• Objects and controllers

• Window and bars

Figure 10-13.

Various Cocoa Touch objects in the Object Library

Inspector Pane and Selector Bar

The Inspector pane enables you to change the properties of the controls to make your objects follow your command. The Inspector pane has six tabs across the top, as shown in Figure 10-14:

• File inspector

• Quick Help inspector

• Identity inspector

• Attributes inspector

• Size inspector

• Connections inspector

Figure 10-14.

The Attributes inspector and Selector Bar

Creating the View

The random number generator will have three objects in the view: one label and two buttons. One button will generate the seed, another button will generate the random number, and the label shows the random number generated by the app.

1. 1.
   Scroll through the Object Library and drag two Buttons and one Label to the View Controller scene, as shown in Figure 10-15.

   

   Figure 10-15.

   Placing objects in the view

    
2. 2.
   Double-click the first button, and change its title to “Seed Random Number Generator,” then double-click the second button, and change its title to “Generate Random Number” as shown in Figure 10-16.

   

   Figure 10-16.

   Renaming the button titles

    

Now you get to use a great feature of Xcode. You can quickly and easily connect your outlets and actions to your code. Xcode actually goes one step further; it will create some of the code for you. All you have to do is drag and drop.

1. 3.

   Click the Assistant Editor icon at the top right of the screen. This will display the associated .swift file for the view selected in the storyboard, as shown in Figure 10-17.

    

Note

If the correct associated .swift file doesn’t appear when you click the Assistant Editor icon, make sure you selected and highlighted the view. Automatic also has to be selected in the Assistant Editor’s jump bar.

Figure 10-17.

Using the Assistant Editor to display the .swift file

Using Outlets

Now you can connect your label to your code by creating an outlet.

1. 1.
   Control-drag from the label in the view to the top of your class file, as shown in Figure 10-18. This is holding down the Control key on the keyboard while clicking and dragging with the mouse. You can also right-click and drag.

   

   Figure 10-18.

   Control-dragging to create an outlet

    
2. 2.

   A pop-up window will appear. This enables you to name and specify the type of outlet.

    
3. 3.
   Name the outlet randomNumberLabel as shown in Figure 10-19 and click the Connect button.

   

   Figure 10-19.

   Pop-up for randomNumberLabel outlet

    

The code is created for the outlet, and the outlet is now connected to the Label object in your Main.storyboard file . The shaded circle next to line 12 indicates the outlet is connected to an object in the Main.storyboard file, as shown in Figure 10-20.

Figure 10-20.

Outlet property code generated and connected to the Label object

There is a declaration that may be new to you called IBOutlet , commonly referred to simply as an outlet. Outlets signal to your controller that this property is connected to an object in Interface Builder. IBOutlet will enable Interface Builder to see the outlet and enable you to connect the property to the object in Interface Builder.

Using the analogy of an electrical wall outlet, these property outlets are connected to objects. Using Interface Builder, you can connect these properties to the appropriate object. When you change the properties of a connected outlet, the object that it is connected to will automatically change.

Using Actions

User interface object events, also known as actions , trigger methods.

Now you need to connect the object actions to the buttons.

1. 1.
   Control-drag from the Seed Random Number Generator button to the bottom of your class. Complete the pop-up as indicated in Figure 10-21 and click the Connect button. Make sure the connection type is an Action and not an Outlet.

   

   Figure 10-21.

   Completing the pop-up for the Seed method

    
2. 2.

   Repeat the previous steps for the Generate Random Number button to create a generateAction method in your ViewController class.

    

The Class

All that is left is to complete the code for your outlet and actions in the .swift file for the controller.

Open the ViewController.swift file and complete the seedAction and generateAction methods , as shown in Figure 10-22.

Figure 10-22.

The seedAction and generateAction methods completed

There is some code you should examine a bit further. The following line seeds the random generator so that you get a random number each time you run the app. There are easier ways of to do this, but for the purposes of this section, you just want to see how actions and outlets work.

srandom(UInt32(time(nil)))

In the following code, the property text sets the UILabel value in your view. The connection you established in Interface Builder from your outlet to the Label object does all the work for you.

randomNumberLabel.text

There are just a few more things you need to do now to finish your app. Select the Main.storyboard file and then select your View Controller scene. Click and drag your mouse to select the two buttons and the label in your view, as shown in Figure 10-23. Then, click the Embed In button and choose Stack View, grouping the three items together.

Figure 10-23.

Embedding in a Stack View

Finally, select the stack view, click the Align button, check both the Horizontally in Container and Vertically in Container checkboxes, and click the Add 2 Constraints button, as shown in Figure 10-24. This will center your controls correctly in your view.

Figure 10-24.

Centering the Stack View

That’s it!

To run your iPhone app in the iPhone simulator, click the Play button. Your app should launch in the simulator, as shown in Figure 10-25.

Figure 10-25.

The completed random number generator app running in the iOS simulator

To generate the random number, tap the Generate Random Number button.

Summary

Great job! Interface Builder saves you a lot of time when creating user interfaces. You have a powerful set of objects to use in your application and are responsible for a minimal amount of coding.

Interface Builder handles many of the details you would normally have to deal with.

You should be familiar with the following terms:

• Storyboard and XIB files

• Model-View-Controller

• Architectural patterns

• Human Interface Guidelines (HIG)

• Outlets

• Actions

Exercises

• Extend the random number generator app to show a date and time in a Label object when the app starts.

• After showing a date and time label, add a button to update the data and time label with the new time.