Applications open for January and September 2018 - Apply Now

X
Tip it up!

Tip it up!

April 16, 2017
Expand

Project: Tip Calculator in Swift 3

Linking your interface to code

Xcode makes it easy to connect your interface to code. Now that we've got an interface let's get it hooked up to our code files!

There are two main kinds of code connections: outlets, and actions.

Outlets let you assign a variable in code to a component of your interface you have created in your storyboard to interact with that component in code. Outlets are very useful for objects such as text fields, because it means that we can change the text within the field in our Swift class, by modifying the variable that is directly linked to it.

Actions let you create a function in code that is called whenever a user interacts with a component of the interface. Actions are great for buttons & segmented controls, because, for example, they tell our Swift class that the user has tapped that button with their finger.

Adding code connections

  1. Close the layout tree and attribute inspector to make some room.
  2. Open the assistant editor and make sure ViewController.swift is displayed by switching from "Preview" to "Automatic" in the dropdown menu above the assistant editor view window.
  3. Control-click (or right-click) drag from bill amount text field to under the class ViewController line and name the outlet billAmountField.
  4. Control-click (or right-click) drag from the tip selector segmented control and name the outlet tipSelector.
  5. Control-click (or right-click) drag from the tip amount text field and name the outlet tipAmountField.
  6. Control-click (or right-click) drag from the total amount text field and name the outlet totalAmountField.
  7. Control-click (or right-click) drag from the calculate button to the view controller. Choose Action and name it calculateTip.
  8. Add some space to clean up the file.

Adding the logic

Before we get started with the logic, we need to go over a new Swift concept! Let's talk about if let statements...

if let is a special statement that allows us to check the condition of a variable and perform actions based on that condition. In the code below, we are saying if you can cast billAmount to a Double and save it to a new variable called billAmount, then do nothing. However, if you cannot do this, then we should stop what we are doing and clear the fields". If the condition is met, then the function can continue.

Now that we have some outlets and actions, we can actually code our logic. Since this tutorial is about Xcode, not programming, we are going to give you the logic. Study the code below and make sure you understand the logic!

Add the following to your calculateTip function. You should type it out and make sure you understand the logic!

if let billAmount = Double(billAmountField.text!) {
    var tipPercentage = 0.0

    switch tipSelector.selectedSegmentIndex {
    case 0:
        tipPercentage = 0.15
    case 1:
        tipPercentage = 0.18
    case 2:
        tipPercentage = 0.20
    default:
        break
    }

    let roundedBillAmount = round(100 * billAmount) / 100
    let tipAmount = roundedBillAmount * tipPercentage
    let roundedTipAmount = round(100*tipAmount)/100
    let totalAmount = roundedBillAmount + roundedTipAmount

    if (!billAmountField.isEditing) {
        billAmountField.text = String(format: "%.2f", roundedBillAmount)
    }
    tipAmountField.text = String(format: "%.2f", roundedTipAmount)
    totalAmountField.text = String(format: "%.2f", totalAmount)
} else {
    //show error
    billAmountField.text = ""
    tipAmountField.text = ""
    totalAmountField.text = ""
}

Run it and give it a spin! Do you understand the code? Hover over the Solution below to see an explanation!

The calculateTip function starts off with a if let statement. If billAmount does not contain a number, it resets all of the fields.

If it does have a number, then the function continues. It uses a switch statement to read the segmented control and set tipPercentage. It then calculates the tipAmount and totalAmount. Finally, it updates the respective text fields.

Testing it out

Now that we have an interface, code connections, and logic... let's test it all out! Run the simulator and try calculating a tip :)

Quick Review

Let's look at what you just did in this section:

  1. Learned about code connections and the difference between an outlet and an action
  2. Created Outlets for the Text Field objects
  3. Created an Action for the calculate button
  4. Added the logic into the class to make the buttons work
  5. Tested out the app on our phones (or on the simulator) to ensure that everything is working

Looking good! Everything seems to work. On the next page, we'll make some small UI improvements before moving on to a more substantial app!

Feedback

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