Tabbed apps — iOS #12
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 icons8.com 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
