The Storyboard

We are going to build a user interface that looks like Figure 2.

1. In the File Navigator pane on the left side, click on Main.storyboard.
2. Click on the View Controller (the big white space) in the middle of the screen.
3. Access the Library by clicking on the plus sign at the top of the Xcode window, to the right of where it says "Tip Calculator: Ready". This will cause the Library window to pop up.
4. Locate the entry "Label" in the menu on the left side of the Library. Add a label object to the View Controller by dragging and dropping it from the Library to the View Controller.
5. Double-click on the label, and replace the word "Label" with the string, "Enter the amount of the bill:". Hit the Enter key, or click on the white background to finish editing.
6. Drag and drop the label to the approximate position shown in Figure 1. (It doesn't have to be exact.)
7. Drag a "Text Field" from the Library to the View Controller and place it in the approximate position shown under the label you just created.
8. Drag a "Slider" from the Library and place it in the middle of the View Controller.
9. In a similar fashion, create and place four more labels: "Tax Percentage", "Calculated tax", "0", and "100". Notice that as you change the strings inside the labels, the "names" of the objects in the list of storyboard objects change accordingly.

Connecting the Storyboard to the Code

In the next step, we need to connect the user interface objects that we just created to variables in the code, so we can refer to their properties. We do this by creating outlets.

• First, we need to split the screen so we can access both the Storyboard and the Code Editor at the same time. In the file navigator, Option-Click on ViewController.swift. If you did this correctly, you should see both the Storyboard and the code for ViewController.swift side-by-side in the middle pane of the Xcode window.



• To create an outlet in the ViewController.swift file that refers to the text field, select the "Round Style Text Field" object in the object list, hold down on the "ctrl" key, and control-drag from the "Round Style Text Field" to the code. Place your cursor directly below the line that reads "class ViewController UIViewController {" and let go of the mouse button. A small window should pop up that looks like the following:



• Enter the string "billTextField" in the space next to "Name" and click the Connect button. A new line beginning with the string @IBOutlet should appear in the Code Editor where you clicked earlier.



• Move your cursor over the gray dot next to the new line of code. You should notice that the text field in the storyboard is highlighted! This is an indication that the variable you just created (called billTextField) is associated with the text field in the storyboard. You can use this variable in your code to access anything that the user types into this field in the app. You can also use it to place something in the field from your code.
• In a similar fashion, create connections between:
• the slider and an outlet variable called taxPctSlider
• the label "Tax Percentage" and an outlet variable called taxPctLabel
• the label "Calculated Tax" and an outlet variable called taxLabel
• When you're done, your code in the file ViewController.swift should look like this:



• Test to see if the connections are correct by moving your cursor over each of the four gray dots, and ensuring that the correct item in the storyboard is highlighted.

A Test Build

Let's build the app to see what it looks like so far, and see if there are any problems that we need to fix before proceeding.

Familiarize yourself with the top bar of your Xcode window. From left to right, you should see:

• three dots (colored red, yellow, and green) that enable you to close, minimize, or maximize the window.
• an icon that toggles the File Navigator pane (the part of the window that lists the files in your project).
• a triangle and a square icon that resemble "play" and "stop" on an audio or video player.
• the name of the project currently being displayed (TipCalculator), followed by the name of the current device that you're building the app for. (The value here depends on what it was the last time you used Xcode, such as "iPod Touch(7th generation)".)
• a status line that tells you if any process is currently running.

and then several other things, including the "+" icon for the library.

• Change the device you're building for by clicking on the name of the current device (as mentioned above) and selecting "iPhone 12 Pro Max".



• Click the "Play" button (the triangle icon). You should see messages appearing in the status line telling you that the project is building. When it completes, the status line should say, Running TipCalcuator on iPhone 12 Pro Max" and a new window should open up called iPhone 12 Pro Max. This window is called an emulator window, and it represents a simulated phone screen running the app you're creating!
  
  Note that this means you can actually do things in the emulator window like you would on the phone. For example, you can click on the text field and type in a number for the total amount of the bill. You can also hold down on the circle in the middle of the slider and move it from left to right.
  
  Of course, the number you enter in the text field and the position where you place the slider aren't used for anything yet. We need to write code for that.

Adding the Code

First, let's create and initialize some variables. When our tip calculator is launched, let's help the user understand how it works by entering an example value of $50.00 for the bill into the text field. We will also set the tax percentage at 15%, and set the tax percentage at 15%Add a blank line directly under the outlets you created (for readability), and then add the following four lines:

    // Initialize some default values for variables
    var total: Double = 0.0
    var taxPct: Double = 100.0
    var tip: Double = 0.0
        

• The first line creates a variable total. Double means it's a floating-point number, and we'll set it initially equal to zero. We plan to use this variable to contain the value of the bill. However, whatever the user types into the text field is a string of characters by default, not a number, so later we will retrieve that string, convert it into a floating-point number, and save it in this variable.
• The second line creates a variable taxPct. This will be a floating-point number that specifies what the tax percentage will be. We will initially set it to 100.0 (for 100%), but as the user moves the slider, we can change this value to anything from 0 to 100.
• The third line creates a variable tip. Once we calculate the tip, we will store the result here, and then display this value in the label called taxLabel. For now, we'll just set it equal to 0.

Next, let's update the user interface slightly. The function viewDidLoad() is automatically called whenever the view controller (the "screen") is loaded into memory. When our tax calculator app is loaded, let's put a value of 50.00 into the text field so the user can see an example of what should be entered. Let's also place the position of the slider to the far right. To do this, we need to modify the code in viewDidLoad():

    override func viewDidLoad() {
        super.viewDidLoad()
        // Assign initial values for bill and tax rate upon startup
        billTextField.text = "50.00"
        taxPctSlider.value = 1
    }
        

Here's what that code does:

• billTextField.text refers to the "text" property of billTextField, the variable we created to reference the text field. By setting the "text" property to the string "50.00", we cause this string to appear in the user interface.
• txtPctSlider.value refers to the "value" property of taxPctSlider, the variable we created to reference the slider. This property can have any value from 0 (the far left) to 1 (the far right). By setting the "value" property to 1, we set the slider to the rightmost position. Later, as the user drags the slider left or right, we can access this same property to get a new value for the tax.
• Note that we are also changing the comment that describes in English what we're doing in this function.

Our ViewController.swift file should now look something like this:

Finally, we need to make the slider work.

• Like we did when we were creating outlets, select the slider from the list of objects, and then drag and drop to the code - but instead of dropping it to the top, where all of the outlets are defined, drop it at the bottom of the file, between the end of viewDidLoad() and the closing right brace of the class. When you do this, you will get the same popup you got before - except that in the blank labeled "Connection", it should say "Action".
• Enter the string "taxPercentageChanged" in the space next to "Name" and click the Connect button. A new line should appear in the Code Editor where you clicked earlier. This time, instead of beginning with @IBOutlet, it should begin with @IBAction. Notice that this connection is a function (func) definition, not a variable (var).

Insert the following code between the curly braces "{" and "}".

      total = Double(billTextField.text!)!
      taxPctLabel.text = "Tax Percentage (" + String(format: "%0.2f",taxPctSlider.value*100) + "%)"
      tip = total * Double(taxPctSlider.value)
      taxLabel.text = String(format: "%0.2f", tip)
        

Here's what that code does:

• First, we extract the string contained in the text field by accessing billTextField.text. We then convert that string into a floating-point number using "Double" and save the result into total.
• Then we take the position of the slider txtPctSlider.value, a value between 0 and 1, multiply it by 100 to get a number between 0 and 100 accurate to two decimal places, and convert it into a string. We use that string to create a longer string that looks like "Tax Percentage (xxx.xx%)" for display.
• We calculate the tip amount by multiplying the total bill by the tax percentage.
• Finally, we truncate the tip amount to two decimal places, convert it to a string, and present it in the taxLabel.

The bottom of your file should look something like this:

Complete Build

Build the app again by clicking the "Stop" button, followed by the "Play button", and confirm that the app works! The function taxPercentageChanged gets called automatically any time the user moves the slider, so this causes the values in the tax percentage label and the tax label to be constantly updated. If you move the slider back and forth, you should see the numbers above and below the slider changing.

Confirm that the numbers you get make sense for a bill of $50.00. Then try clicking on the text field and changing the bill to some other number, and confirm that the numbers still make sense when you move the slider around.

Additional Exercises

Figure out how to modify the code to change your app's behavior.

• What would you have to change if you wanted to calculate the tax to three decimal places instead of just two? (This wouldn't make much sense, since in the US we only go down to pennies, but you could still do it.)
• When you copy the calculated tax into the taxLabel, it looks "off" because it's not properly centered under the slider. Click on the Tax Label object in the object tree (or click on the label in the storyboard - both work). The far right pane of the Xcode window is the Inspector pane. If you poke around over there, you can find a field called Alignment where you can set the alignment of the label to be centered.
• You can also use the Inspector to change other properties of the labels and the text field. See if you can figure out how to change the fonts, font sizes, foreground colors, and background colors of those objects.