Tabbed apps — iOS #12

icons from

Today we’re going to learn how to make tabbed apps — apps with a little tab-bar at the bottom of the screen that we can use to switch between View Controllers. In iOS it’s easy, not so much on Android.

Let’s get started — start a new project in Xcode, making sure to select Tabbed Application instead of the usual Single View Application:

Once it’s created, you’ll see on the left that it’s automatically created two View Controller swift files, called FirstViewController.swift and SecondViewController.swift and when we open the Main.storyboard, we see two View Controllers, connected by a Tab Bar Controller:

The “Tab Bar Controller” is an Object that creates the tab-bar in the app and joins up the View Controllers that it contains.

Note that the user will never see this bit, they’ll only see the actual View Controllers. It’s really there in the Storyboard so you have a visual aid to what’s going on.

If you run the app now, you’ll see this:

Hit the “Second” icon on the bottom tab-bar and you’ll see the app switches to the second View Controller:

Let’s go crazy add a third View Controller! Drag one out from the Object Library onto the Storyboard:

Let’s add a Label to this View Controller and call it Third View, just so we’re clear!

Nice. Just like any other View Controller we add, we need to add a new Swift file and link the two together. So, right-click on the main app folder and select New file:

select Cocoa Touch Class:

give it a Class (name) like ThirdViewController and make sure that Subclass is UIViewController:

Hit Next then Create on the next window. You should have a new file created:

To hook it up to the View Controller on the Storyboard, click on the little yellow button at the top and in the Class field in the Identity Inspector on the right, type in “ThirdViewController” and hit enter:

Cool. Now we need to hook up this View Controller to the Tab View Controller.

Control-drag from the Tab View Controller to the ThirdViewController:

and then select “view controllers” under “Relationship Segue”:

and boom:

It’s all hooked up! Run the app and you’ll see:

Hit the third icon (that’s missing an image) and you’ll see the ThirdViewController appear:

Lovely. Almost done — let’s sort out the icons first. Let’s get a three new icons (from as usual, 40px by 40 px) and put them into the Assets.xcassets folder:

Now, back in the Storyboard, for each View Controller, I click on the icon at the bottom, then change the Image in the Attributes Inspector and also the Title:

Repeat for the other two View Controllers, then run the app:

Amazing! Ok, that was pretty simple, but also pretty useful; you can now easily build an app with tabs at the bottom to allow your users easy access to the different screens.

If you thought this useful and / or mind-boggingly amazing, please hit the little heart button below! Andy




Creator of Boxapopa, the iOS game for young kids with zero ads, just fun!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Why CTOs and HR Departments Choose Drupal for Corporate Intranets

Event-Driven Torches in RPG Maker

Business Car Lease in Up Sydling #Business #Cars #Leasing #Up #Sydling

Java RegEx: Part 6 — Group and Subgroup

FinTech App Development: Must-Follow Rules and Trends

Getting started with Kubernetes

Knit Finance to integrate Polygon Network into its cross-chain Platform to issue kAssets

In-depth MYSQL Optimizations

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andy O'Sullivan

Andy O'Sullivan

Creator of Boxapopa, the iOS game for young kids with zero ads, just fun!

More from Medium

Setup iOS Automation Test using Robot Framework and Appium

Singleton in Swift New

Top 5 iOS App Development Trends in 2022 and Beyond

Swift — Cocoapods Usage