In this tutorial series we are going to look at building commonly used apps in Swift. The first one we are going to look at is building the YouTube app – this will be a several part series as there is quite alot involved. In this post we will look at setting up the basic tab bar layout, adding icons and styling it to look like the YouTube app.

To get started create a new single view application in XCode.

Laying it out

The first order of business is to layout the four tab bar screens in the storyboard. Go to the Main.storyboard file and drag a Tab Bar Controller onto the screen. This will setup a new screen with a tab bar controller and two screens by default. Drag the right arrow which indicates the starting view controller from the default view controller, to the left side of the tab bar controller we just created.

Next up drag a new View Controller from the object explorer onto the screen. You will now have two view controllers that are not connected up to the tab bar controller. To connect them up select the tab bar controller, hold in the control key and drag the line and drop them on the view controllers that are not connected, select “view controllers” under Relationship Segue to set them up as new tabs.

You should be able to tell the what tab leads to what screen by the text, E.g “Item 1”, “Item 2”, etc.

Your end result will look something like this:

Tab bar icons & naming the tabs

You can download the icons for the tab bar here. To insert them into your project open up the Media.xcassets folder, drag all the files in here except for Contents.json into the Assets.xcassets folder in XCode. You will now see the following icons in this folder:

• Home
• Library
• Subscriptions
• Trending

To set the tab bar icon and title for each screen, in the Main.storyboard do the following:

1. Select the tab bar on each child view controller
2. Under attributes inspector, in Bar item:
   1. Set the tab bar name in “Title”
   2. Set the tab bar image in “Image”

Once you have done this it might be a good idea to run your app and make sure the tab’s are in the correct order as follows:

Setting the tab bar icon color & background color

Now it’s time to set the selected tab to be red, and the background of the tab bar to white as per the Youtube app. We can do this with a few simple lines of code, but first of all we are going to create a UIColor extension, as covered here. The reason for this is it makes the app easier to manage, and if we need to reuse the Youtube Red color we only need to declare it once.

Go File->New->File and create a new Swift file named UIColor, and code it as follows:

import UIKit

extension UIColor {
    
    // Setup custom colours we can use throughout the app using hex values
    static let youtubeRed = UIColor(hex: 0xe62117)
    
    // Create a UIColor from RGB
    convenience init(red: Int, green: Int, blue: Int, a: CGFloat = 1.0) {
        self.init(
            red: CGFloat(red) / 255.0,
            green: CGFloat(green) / 255.0,
            blue: CGFloat(blue) / 255.0,
            alpha: a
        )
    }
    
    // Create a UIColor from a hex value (E.g 0x000000)
    convenience init(hex: Int, a: CGFloat = 1.0) {
        self.init(
            red: (hex >> 16) & 0xFF,
            green: (hex >> 8) & 0xFF,
            blue: hex & 0xFF,
            a: a
        )
    }
}

The tutorial here covers on what this class does, and why we use it, so I would recommend going over it if you are not sure what this code is doing and why we are using it. In our case we are using it currently to create a custom youtubeRed UIColor.

Once done, rename ViewController.Swift to HomeViewController.swift, and edit the code so the top class declaration is as follows:

class HomeViewController: UIViewController {

This will make it easier to track what class manages what in our code – in this case it will manage the Home tab. Now in viewDidLoad add the following lines to set the tab bar icon color and background color:

        UITabBar.appearance().tintColor = UIColor.youtubeRed
        UITabBar.appearance().barTintColor = UIColor.white

The first line sets the color of the selected tab item – in our case red, the second line sets the background color of the tab bar controller to white. Finally go back to Main.storyboard, select the Home View Controller and make sure the Custom class is set yo HomeViewController

Now run the app – congratulations, we have setup the basic tab bar interface for our Youtube App. You can navigate around the different screens, although they do nothing currently. In part 2 of this we will be implementing the Home screen functionality.