Living in another time zone is giving me the advantage of a few hours before everybody wake up in my job in Santiago. So I’m starting my mornings learning new things, making tutorials or just spending time watching videos on Treehouse.
In order to improve my skills (English and coding skills) I’ll be blogging about the things that I’ve learned. Today I’m going to write about Swift, Xcode and iOS, and the first blog post is about Tab Bar apps.
First of all, we are going to create a Single View Application in Xcode:
Open Xcode and create a new project
Name it TabBarApp (or whatever you want), in language choose Swift and click Next.
Save it wherever you want.
Then go to the Main.storyboard file and select the default View Controller in the scene and press Delete. We are not going to need it. Then delete the ViewController.swift file from the project navigator as well.
Be sure to press “Move to trash” when you delete it.
OK, now go the Storyboard and in the Object library we are going to type “Tab Bar Controller” and then drag and drop it to the scene. It has to look like this:
We have a few things to do in order to have our TabBarApp working in a default scenario.
First select the Tab Bar Controller in the scene and then click “Attributes inspector” in the Utility Panel:
There we will look for “Is Initial View Controller” and check it. You will see how an arrow appears in the beginning of the Tab Bar Controller in the scene. That means that when we run the app, the initial view will be the Tab Bar.
Now we have to create the Controller file in order to start coding and managing the views that we already created in the Tab Bar. So go to the bar and click File > New > File (or ⌘+n). Make sure you are in the iOS section. Click Cocoa Touch Class and hit Next. Put a name and make it subclass of UITabBArController. Then Next and Create.
To associate the new controller with the Tab Bar Controller View, we have to go to the Storyboard, click the Tab Bar Controller and then go to the Identity Inspector. The first thing that you’ll see is the Custom Class section, there in Class hit the blue arrow and select the name of the class that we created in the previous section, in my case the name is “SectionVC”.
There you go. At this point you can run your app and must be working.
Now we can add another item to our tab bar.
In the Object Library again, look for a View Controller and drag and drop it to the scene. It should look like this:
Then ctrl + drag from the Tab Bar Controller to the new View Controller. When you drop it, a little modal should appear , click in Relationship segue > View Controllers.
Automatically it must appear an arrow pointing from the Tab Bar Controller to the new View Controller and a new item in the bottom of the view as well.
To see how this works, we are going to select the first item view in the Storyboard, and then open the Document Outline. Select View, as the image shows:
Go to the Attributes Inspector and change the Background Color. You can repeat for all the views if you want.
Then run the app: