Setting Up the User Interface

In Part 1 of this book, you studied the Swift language and how it works. Now that you have a good working knowledge of the language, you can learn how to develop an iOS application. In this part, you will build the user interface (UI) of a journal app, JRNL. You will use Xcode’s Interface Builder for this, and coding will be kept to a minimum.

You’ll start this chapter by learning useful terms used in iOS app development, which are used extensively throughout this book. Next, you will take a tour of the screens used in the JRNL app and learn how the user would use the app. Finally, you will begin recreating the app’s UI with Interface Builder, starting with the tab bar, which allows the user to select between the Journal List and Map screens. You’ll add navigation bars to the top of both screens and configure the tab bar buttons.

By the end of this chapter, you’ll have learned common terms used in iOS app development...

Technical requirements

You will modify the JRNL Xcode project that you created in Chapter 1, Exploring Xcode.

The resource files and completed Xcode project for this chapter are in the Chapter10 folder of the code bundle for this book, which can be downloaded here:

https://github.com/PacktPublishing/iOS-17-Programming-for-Beginners-Eighth-Edition

Check out the following video to see the code in action:

https://youtu.be/rb85kgQRd7o

Before you get started with the project, you’ll learn some common terms used in iOS development.

Learning useful terms in iOS development

As you begin your journey into iOS app development, you will encounter special terms and definitions. Here are some of the most used terms and definitions. Just read through them for now. Even though you may not understand everything yet, it will become clearer as you go along:

• View: A view is an instance of the UIView class or one of its subclasses. Anything you see on your screen (buttons, text fields, labels, and so on) is a view. You will use views to build your UI.
• Stack View: A stack view is an instance of the UIStackView class, which is a subclass of UIView. It is used to group views together in a horizontal or vertical stack. This makes them easier to position on the screen using Auto Layout, which is described later in this section.
• View Controller: A view controller is an instance of the UIViewController class. Every view controller has a view property, which contains a reference to a view. It determines what...

A tour of the JRNL app

Let’s take a quick tour of the app that you will build. The JRNL app is a journal app that lets users write their own personal journal, with the option of storing a photo or a map location for each journal entry. Users can also view a map that shows the locations of entries that are close to the user’s current location. You’ll see all the screens used in the app and its overall flow in the next sections.

You can see a video version of this app tour by following this link: https://youtu.be/rb85kgQRd7o.

Using the Journal List screen

When the app is launched, you will see the Journal List screen:

Figure 10.6: Journal List screen

Let’s study the different parts of this screen.

A UITabBar instance (tab bar) at the bottom of the screen displays the Journal and Map buttons. The Journal button is selected, and you see a table view displaying a list of journal entries in table view cells. A UISearchController...

Modifying your Xcode project

Now that you know what the screens of the app are going to look like, you can start building your app. If you have not yet done so, open the JRNL project you created in Chapter 1, Exploring Xcode:

Figure 10.10: The JRNL project

Verify that iPhone SE (3rd generation) is selected from the Destination menu. Build and run your app. You will see a blank white screen. If you click the Main storyboard file in the Project navigator, you will see that it contains a single scene containing a blank view. This is why you only see a blank white screen when you run the app.

To configure the UI, you will modify the Main storyboard file using Interface Builder. Interface Builder allows you to add and configure scenes. Each scene represents a screen the user will see. You can add UI objects such as views and buttons to a scene and configure them as required using the Attributes inspector.

For more information on how to use Interface Builder...

Setting up a tab bar controller scene

As you saw in the app tour, the JRNL app has a tab bar with two buttons at the bottom of the screen, which are used to display the Journal List and Map screens. You will embed the existing view controller scene in a tab bar and add a second view controller scene to the tab bar. Follow these steps:

1. Click the Main storyboard file in the Project navigator:

   

   Figure 10.11: Project navigator with the Main storyboard file selected

   The contents of the Main storyboard file appear in the Editor area.

2. Select View Controller in the document outline:

Figure 10.12: Document outline with View Controller selected

3. You’ll embed the existing view controller scene in a tab bar controller scene. Choose Embed In | Tab Bar Controller from the Editor menu:

   

   Figure 10.13: Editor menu with Embed In | Tab Bar Controller selected

   You’ll see a new tab bar controller scene appear in the...

Summary

In this chapter, you learned some useful terms used in iOS app development. This will make it easier for you to understand the remainder of this book, as well as other books or online resources on the subject.

Next, you also learned about the different screens used in the JRNL app and how the user would use the app. As you recreate the app’s UI from scratch, you’ll be able to compare what you’re doing to what the actual app looks like.

Finally, you learned how to use Interface Builder and storyboards to add a tab bar controller scene to your app, configure the button titles and icons, and add navigation controllers for the Journal List and Map screens. This will familiarize you with adding and configuring UI elements for your own apps.

In the next chapter, you will continue setting up your app’s UI and become familiar with more UI elements. You will add and configure the remaining screens for your app.

Learn more on Discord

To...