• 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 24/04/2018

Implement tab navigation

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

In this chapter, we are going to learn how to use tab navigation.

You must’ve seen many examples of tabbed interface on iOS. It’s represented by a bar with icons and captions at the very bottom of the screen.

Apps with tab navigation
Apps with tab navigation

That panel at the bottom is called a tab bar

Switching between the tabs, typically, replaces the full view that is above the tab bar. There are a few exceptions to this rule. Sometimes a middle tab is utilized as a button and performs some focal function of an app - like launching a camera, or exposing some fancy menu. WhatsApp iOS app, for example, is displaying a camera when the user taps on the central icon of the tab bar.

Tab navigation is a very convenient way to implement contextual verticals of an app.

The most popular apps with tabs demonstrate such structure. Airbnb is a great example: Explore, Saved, Trips, Inbox, Profile - all accommodate needed and related content and each of them is a meaningful functional vertical on its own.

The location of the tabs also puts a lot of responsibility on the app design - the bottom area of the mobile devices, especially iPhones is considered to be a prime real estate on the screen. The most important actions need to be available there as it's the easiest area to reach while holding the device.

Enhancing the Amazing!

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:

Emotions & Analytics!
Emotions & Analytics!

Let's do this :pirate:!

Implementing Tabs

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:

Embedding view controller in tab bar controller
Embedding view controller in tab bar controller

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

Storyboard transformation
Storyboard transformation

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:

Tab Bar attributes
Tab Bar attributes

And those of a Tab Bar Item:

Tab Bar Item attributes
Tab Bar Item attributes

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:

Initialing tabs connection
Initialing tabs connection

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

Establishing tab connection
Establishing tab connection

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:

New view controller connected to tab bar controller
New view controller connected to tab bar controller

Yay, we've got two tabs :ninja:!

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):

Emotions tab icon
Emotions
Analytics tab icon
Analytics 

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:

Configuring Tab Item
Configuring Tab Item

Then repeat the same for the second one:

Custom tabs
Custom tabs

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:

Custom class association
Custom class association

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:

Renaming class name
Renaming class name

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': 

Renaming class name
Renaming class name

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 :ninja:!

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!

Two tabs!
Two tabs!

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

Cheating tools: Tabbed App Template

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

Starting a tabbed app using template
Starting a tabbed app using template

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 :magicien:.

Let's Recap!

  • 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. 

Exemple de certificat de réussite
Exemple de certificat de réussite