Applications are open for the Product College - Apply Now



January 16, 2018

Project: Build a Tip Calculator in Swift 4

In this section, we'll get introduced to our new Xcode project and start working on implementing our tip calculator design.

We'll get started by downloading a Xcode starter project. You can download the .zip file by clicking here.

In Your Starter Project

After downloading the starter project, open the project in Xcode. You should see something the following:

Open Starter Project

Build and run the current starter project in a simulator or iPhone device of your choice.

Run the new starter project to make sure there are no compilation errors. If all goes well, your project should run successfully and display an empty white screen (we haven't built anything yet!)

Empty Screen

Next, let's take a look inside our starter project.

View Controller

First, we'll start with our view controller.

Using the Project Navigator, open the ViewController.swift source file. You should see the following code:

class ViewController: UIViewController {

    // MARK: - View Lifecycle

    override func viewDidLoad() {

Just boilerplate code, nothing is happening yet. We'll eventually write our tip calculator logic in here later.

Main Storyboard

Let's move onto our storyboard.

Open Main.storyboard from your Project Navigator. You'll see the following:

Starting Storyboard

Right now there's an empty, white view controller. (The one we saw in our simulator remember?)

Let's review how our storyboard view controller is connected to our .swift file.

Click on the view controller representation in your storyboard. With your storyboard view controller selected, navigate to the Class Inspector in the Utilities area.

You'll notice that the ViewController.swift source code is paired with the View Controller object in your Main.storyboard.

Storyboard View Controller Class

Next we'll take a look at our project's assets.


Your project assets contain your media: images, movies, app icons, etc.

Open Assets.xcassets to see your project assets. Project Assets

In your asset catalog, you should see an app icon that's already set for you and two folders containing pre-defined color sets for the different color themes we'll implement later.

To pair with our custom colors in our asset catalog, your project also contains a UIColor extension that allows you to access each of the app's colors through code.

Open UIColor+TC.swift from your Project Navigator. If you don't see it, you'll have to expand the Supporting Files folder in your Project Navigator. You should see the following:

import UIKit.UIColor

extension UIColor {

    // MARK: Theme Colors

    static var tcDarkBlue: UIColor {
        return UIColor(named: "tcDarkBlue")!

    static var tcOffWhite: UIColor {
        return UIColor(named: "tcOffWhite")!

    static var tcHotPink: UIColor {
        return UIColor(named: "tcHotPink")!

    static var tcCharcoal: UIColor {
        return UIColor(named: "tcCharcoal")!

    static var tcAlmostBlack: UIColor {
        return UIColor(named: "tcAlmostBlack")!

    static var tcMediumBlack: UIColor {
        return UIColor(named: "tcMediumBlack")!

    static var tcBlueBlack: UIColor {
        return UIColor(named: "tcBlueBlack")!

    static var tcSeafoamGreen: UIColor {
        return UIColor(named: "tcSeafoamGreen")!

    static var tcBlack: UIColor {
        return UIColor(named: "tcBlack")!

    static var tcWhite: UIColor {
        return UIColor(named: "tcWhite")!

This file pairs each of the class variables to the custom color sets defined in our asset catalog.

Once we start coding, we'll be able to access each respective color through the UIColor class variable:

let selectedColor = UIColor.tcSeafoamGreen

Notice that we prefix each of our custom colors with tc to avoid namespace conflicts and make our colors easier to find with Xcode autocomplete.

In this project, your custom colors have been defined in your asset catalog, however this is just one of many ways for defining custom colors. You can also create custom colors programmatically or through Interface Builder.

App Delegate

To wrap up our new project tour, let's briefly take a look at our App Delegate.

Open AppDelegate.swift from your project navigator:

import UIKit

class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    // MARK: - App Lifecycle

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        return true

For this tutorial, you won't need to change or modify the App Delegate. However, it's helpful to know about it's purpose for when you start writing your own apps.

Each iOS Xcode project must have an AppDelegate.swift file which is responsible for the app's lifecycle. The app delegate specifies what happens when app lifecycle events are triggered. Common example events are app launch, receiving a push notification, app termination, etc.

In our tip calculator's app delegate, we don't add any code other than the boilerplate application(_:didFinishLaunchingWithOptions:) method that comes by default in each Xcode project template.

Wrapping Up

We've just taken a look at the files in our new Xcode starter project. Throughout this tutorial, we'll continue to build on this project to create our final tip calculator.

Let's get started by diving into storyboard and creating our views for our UI.


If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations in San Francisco and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more