Explore Composite UI Components, Local Database and User Notifications on iOS

After having accomplished logging of the user's daily emotions, we can only test some a part of it in the console. Besides, we did promise to provide a tool to analyze their emotions over time. We can also isolate at least two contextual verticals - logging emotions and analyzing the results.

Here we go, now we have to convert our app to use tab navigation with two tabs:

Let's do this !

Tab functionality in Swift is represented by a TabBar Controller that manages view controllers to be displayed for each tab. The controller is represented by a class  UITabBarController . Like other elements, it can be incorporated in the app using storyboard or programmatically.

Embed View Controller in Tab Bar Controller

We are going to add tab bar controller in the storyboard by embedding our current view controller in it. To do so, select our only view controller, then, in the main menu of the Xcode select Editor->Embed In -> Tab Bar Controller:

Let's review what's changed in the storyboard:

We can observe a number of changes:

• In navigation (left panel), we've got a new 'Item' added to our original view controller. This is to represent a TabBarItem (  UITabBarItem  ) on the screen.

• We've also got a new scene here - Tab Bar Controller - which is a subclass of View Controller.

• The Tab Bar Controller has now become the initial view controller of the app that will be the first one to be displayed on the app screen. In its turn, it will show a view controller, we'll assign it to display. By default, our original view controller will be displayed.

• Tab Bar Controller is now connected to the original view controller that we had. 

The connections in storyboard are called Segues. 

Feel free to explore attributes of a Tab Bar:

And those of a Tab Bar Item:

Add second View Controller

So, our new requirement is to have two tabs in the navigation. To add a new view controller in the storyboard, simply drag one from Objects Library onto the editor area. Then Control click on the Tab Bar Controller and drag onto the new view controller until it's hovered with a blue rectangle:

 After dropping, select 'view controllers' on a popup in 'Relationship Segue' section:

This will result into a new tab appearing on the tab bar of the tab bar navigation controller and the new connection (segue) linking to the new view controller:

Yay, we've got two tabs !

Customize tabs

Now let's customize the tab bar. We need to change captions and icons!

To start, add the icons to the project (as images to Image Assets catalogue):

Then select the Tab Bar Item on the first view controller, make sure System item attribute is set to Custom, and change its caption and icon images:

Then repeat the same for the second one:

Add View Controller file

Our newly added view controller doesn't come with a default swift file like the one that was created by default, when we created a new project. Since we'll be implementing some functionality within that view, we need a swift controller file associated with it.

Go ahead and create a new file AnalyticsViewController.swift. Add the initial view controller subclass code:

import Foundation
import UIKit

class AnalyticsViewController : UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    
}

Then switch to the storyboard, select the new view controller, and assign the new class to it in Identity Inspector:

Rename original View Controller

It's a good idea to rename the original as well. It has a simple default name - ViewController. Which was ok to test things out in production applications.  However, it's best to name files reflecting their purpose. We'll call it EmotionsViewController instead.

To start, simply rename the file itself in the navigation. Then, switch to ViewController.swift file and select ViewController class name. Then, in the main Xcode menu select Editor->Refactor->Rename:

Choosing this option will compose a view displaying all potential changes and will convert the class name area into an editable field. Type in a new name and click 'Rename': 

As we can observe, the tool tells us the areas that will be affected:

• File name

• Class name

• Storyboard class name association

And that's exactly what we need !

You can also do it manually:

• Within EmotionsViewController.swift rename ViewController class to EmotionsViewController.

• Switch to the storyboard, select the view original controller and change the associated class name in Identity Inspector to EmotionsViewController.

Great, now let's test it!

Second tab is empty for the moment - that's better than no tab.  Rest assured, we'll add some content in the following chapters!

When creating a new Xcode project you are presented with an array of app templates. Tabbed App is one of them:

All it does is precreates a storyboard that contains a Tab Bar Controller as an initial controller with 2 tabs associated with view controllers in storyboard and corresponding .swift controller files.

It is quite handy for a quick start. Most apps, however, do have more than two tabs, so you'd have to add more anyway.

I also recommend naming your .swift view controller files to reflect the meaning of your tabs - hence, you'll have to rename the default files.

Either way, you now know how to add and remove navigation controllers and view controllers, so you can adjust the requirements of the application .

• Tabbar navigation is commonly used to accommodate difference contextual verticals of an application.

• Tabbar is located at the bottom and is a prime real estate of an app screen and must be utilized efficiently.

• TabBar Controller can be added by embedding one of the view controllers in TabBar Controller in the storyboard.

• UITabBar  class represent a tab bar.

• UITabBarItem  class represents a tab on a tab bar.

• Tabs can be customized by configuring attributes of Tab Bar Item in Interface Builder.

• We can add tabs and associated view controllers in the storyboard.

• To start a project with tab navigation, a Tabbed App Template can be used.