Adding a Tab Bar Controller

Topics Covered in This iOS Development Tutorial:

Setting a Custom Icon for the Map Tab

Exercise Preview

Exercise Overview

In this exercise, you'll implement a tab bar interface for the Jive Factory app—one of the most fundamental navigation patterns in iOS development. Tab bars provide users with immediate access to the app's primary sections, making them essential for apps with distinct feature sets. Your first tab will showcase the list of upcoming shows, while the second tab will display an interactive map showing the Jive Factory's location. This dual-tab approach mirrors the navigation patterns found in successful apps like Apple Music and Maps, where users frequently switch between content discovery and location-based features.

Getting Started

1. If you completed the previous exercise, you can skip the following sidebar. We strongly recommend completing the previous exercises (1B–2B) before proceeding, as this exercise builds directly on the navigation controller and table view implementation from those lessons.

   If you completed the previous exercise, Jive Factory.xcodeproj should still be open in Xcode. If you've closed it, navigate to yourname-iOS Dev Level 2 Class > Jive Factory and reopen the project file.

   Prerequisites

   This exercise builds on previous work. Ensure you have completed exercises 1B-2B or use the provided starter files to maintain proper project structure.

   Project Setup Verification

   0/3

   Confirm Jive Factory.xcodeproj is open

   The main project file should be accessible in Xcode

   Verify Main.storyboard is available

   The storyboard contains your existing interface elements

   Check Object library accessibility

   You'll need to drag UI components from the library

Implementing the Tab Bar Controller

Now you'll add the tab bar controller, which serves as the root navigation component that manages multiple view controllers. This approach is particularly effective for apps where users need quick access to different types of content without losing their context.

1. In the Project navigator, select Main.storyboard to open Interface Builder.
2. If the Document Outline is visible, click Hide Document Outline to maximize your workspace.
3. Since you'll be working with multiple controllers simultaneously, reduce the zoom level for better visibility. Control-click or right-click on any blank area in the Editor and select Zoom to 50%.
4. In the Object library search bar , type: tab bar
5. Drag a Tab Bar Controller from the Object library into the Editor area, positioning it to the left of your existing controllers. The exact placement isn't critical—you'll organize the layout shortly.
6. If the Document Outline reopened during this process, click Hide Document Outline again.

7. Examine the Tab Bar Controller structure. Notice it includes the main controller on the left connected to two default view controllers on the right, labeled Item 1 and Item 2. These represent the two tabs your users will interact with.

   You'll replace the Item 1 controller with your existing featured band listings navigation controller, creating a more cohesive user experience.

8. Click on any white background area outside the controllers to deselect the Tab Bar Controller.
9. Select the Item 1 view controller (the upper controller on the right side of your new tab bar group) until it displays a blue outline.
10. Press Delete to remove this placeholder controller.
11. Click on the Tab Bar Controller to select it with a blue outline.
12. Ensure both the Tab Bar Controller and your original Navigation Controller (leftmost of your initial three controllers) are visible in the Editor area.
13. In the Utilities panel on the right, select the Connections inspector tab .

14. Under Triggered Segues, locate the view controllers section. Hover over Item 2 and click the X to remove this connection, as shown below:

    

    This clears all existing connections, allowing you to establish proper relationships between your tab bar and view controllers.

15. With the Tab Bar Controller still selected, locate the circle at the far right of view controllers under Triggered Segues. When you hover over it, a + symbol appears.
16. Hold Control and drag from this + symbol to your Navigation Controller in the Editor area, then release. This connects your existing band listings to the first tab.
17. Repeat this process for the second connection. Hover over the circle to the right of Item until the + appears.
18. Hold Control and drag from this + to the remaining Item 2 controller in the Editor area.

19. Verify your connections match the configuration shown below. Both controllers should now have segues from the Tab Bar Controller:

    

20. Organize your workspace for clarity. Arrange the controllers in your Editor to match this layout:

    

21. Control-click or right-click on any blank Editor area and select Zoom to 100% to return to normal viewing size.

22. Now you'll customize the tab bar items with appropriate icons and labels. Click on the gray tab bar item at the bottom of your Navigation Controller to select it:

    

    Note: Depending on your Xcode configuration, you may see a gray box with the Item text positioned behind it, as shown below. Regardless of this visual variation, clicking on the bottom gray area should properly select the tab bar item.

    

23. In the Attributes inspector , change the System Item dropdown to Featured. This provides both an appropriate icon and label for your band listings tab.

24. Notice how the Featured icon and label now appear at the bottom of your Navigation Controller, giving users a clear indication of this tab's purpose.

Setting a Custom Icon for the Map Tab

For the map functionality you'll implement in the next exercise, you'll need a custom icon since iOS doesn't provide a default map icon in its system item collection. Creating custom tab bar icons is a common requirement in professional iOS development, as most apps need icons that reflect their unique functionality and branding.

1. In the Project navigator, select Assets.xcassets to access your app's image assets catalog.
2. Switch to your Desktop and navigate to Class Files > yourname-iOS Dev Level 2 Class > Icons.
3. Press Command-A to select all images in the Icons folder.
4. With Xcode visible, drag these images into either column of the Assets editor. This adds the icon assets to your project.
5. Return to your storyboard by clicking Main in the Project navigator.
6. Select the tab bar item at the bottom of the Item 2 controller by clicking on the gray box labeled Item 2.
7. In the Attributes inspector , configure the Bar Item settings as follows:

• In the Title field, delete any existing text, type Map, and press Return.
• From the Image dropdown menu, select locationIcon.

1. Verify that your tab bar now displays the custom Map icon, as shown below:

   

2. Update your app's entry point by changing the Initial View Controller from the Navigation Controller to the Tab Bar Controller. Drag the gray arrow currently pointing to your Navigation Controller and drop it onto the Tab Bar Controller:

   

   The arrow should now point to your Tab Bar Controller, making it the first screen users see when launching your app.

3. Test your implementation by clicking the Run button to launch the iOS Simulator.
4. When the Simulator loads, observe that your band listings now appear within a Featured tab at the bottom of the screen. This maintains all existing functionality while adding the new navigation structure.

5. Tap the Map tab to switch views. While this tab doesn't contain content yet, you can see the navigation working correctly. You'll build the map functionality in the next exercise.

   Professional tip: The map icon you've implemented uses a black silhouette on a transparent background—this is the standard approach for tab bar icons. iOS automatically applies the appropriate blue tinting for the active tab and gray tinting for inactive tabs. The PNG-24 format ensures crisp rendering across all device resolutions.

   If you wanted to create a filled icon state that matches Apple's Featured icon behavior, you'd need to provide both outline and filled versions of your icon and implement additional code to handle the state changes. For this tutorial, the current implementation provides excellent visual consistency with iOS design patterns.

6. Return to Xcode when you've finished testing the tab navigation.
7. Click the Stop button to end the simulation session.
8. Save your progress by going to File > Save or pressing Command-S.

9. Keep this project open as you'll continue building the map functionality in the next exercise, completing your tab-based navigation system.