There are many templates for building iOS applications. One of them is a tabbed application. This video shows how the tabbed application works and how it's organized.
- [Narrator] Another type of application you'll see all over the place is the Tab Bar application that has this tab bar at the bottom. An example of this is in the built in health application. As you go through the different tabs, you may notice that the tabs have their own navigation controllers at the top. Those navigation controllers can contain table views, collection views or any other type of views. So, what I want to do is take a look at the default tabbed application template and then talk about how we can create our own custom views inside of the tabs, including adding support for collection views, table views and navigation controllers.
So, let's head over to Xcode and create a new project. This time, instead of using the Single View app template, we're going to use the Tabbed App template which is under the iOS tab. I'm going to name this product Tabbedapp and then hit next. I'll save this in Exercise Files, Chapter four, Tabbedapp Final. Of course, if you're following along with the exercise files, don't save it in that folder, just save it outside right here.
So, we'll create that project. And then, head over to FirstViewController.swift. Notice that there's no code in here. It's completely ready for you to customize. Same with SecondViewController. Everything in the Tabbedapp is set up in main.storyboard, so let's take a look at that. So, if we look at the storyboard, I'll hide the document outline to make it a little bit easier to see. I'll also hide this right view over here.
So we have our Tab Bar Controller, and it has these two buttons at the bottom. You can see that it has some kind of connection to the First View Controller right here, which of course, if you select it and take a look at the identity inspector, you can see it's connected to the First View Controller class. And the same for the Second View Controller. It's connected to a custom class. Let's run the app and see what you get with the default implementation.
We'll head over into full screen mode and run the application now. So, here's our Tabbedapp making absolutely no changes to the default template. We have our first view here, and then you click on the button and you can look at the second view. If you're interested in knowing how the connections are made from the tab bar to the views, we'll take a look at that for just a second. We'll stop the app in Xcode, and then I'm going to select the tab bar controller.
With the tab bar controller selected, head over to the connections inspector. In the triggered segue section you're going to see a property called view controllers. It references both first and second, referring to those two view controllers. You can tell that they're being referred to when you hover your mouse over them. So, when I hover over first, you can see the first view is highlighted and then second shows the second view is highlighted. We'll talk about adding more view controllers later on, but if you want to remove any, you can simply hit the x buttons here.
And that is how a tabbed bar controller application is set up.
- Alert controllers and actions
- Sliders, progress bars, and switches
- Creating UI elements with code
- Displaying web content with Safari view controllers and WKWebView
- Creating collection view controllers
- Creating tabbed apps
- Publishing your app with App Store Connect