Calculator App Fast AF

Swift Fast AF
4 min readDec 20, 2022

--

Welcome to this tutorial on how to create a calculator app for iOS using swift and Xcode! In this tutorial, we will go through the steps of building a simple calculator app that can perform basic arithmetic operations.

Before we begin, it is important to note that in order to follow along with this tutorial, you will need to have Xcode installed on your Mac. Xcode is a free integrated development environment (IDE) provided by Apple for developing software for macOS, iOS, watchOS, and tvOS.

To get started, launch Xcode and create a new project by selecting “Create a new Xcode project” from the welcome window. On the next screen, select “Single View App” and click Next.

Give your project a name, select “Swift” as the programming language, and make sure “Use Storyboards” is checked. Click Next and choose a location to save your project.

Next, we will design the user interface (UI) of our calculator app. In the project navigator on the left side of the Xcode window, select Main.storyboard. This will open the storyboard in the editor area on the right side of the window.

From the object library on the bottom right corner of the window, drag a label onto the view and position it at the top of the screen. This label will be used to display the result of our calculations.

Next, drag nine buttons onto the view and arrange them in a 3x3 grid, leaving a space for a fourth row at the bottom for the remaining buttons. Set the titles of the buttons to “7”, “8”, “9”, “4”, “5”, “6”, “1”, “2”, “3”, respectively.

Drag three more buttons onto the view and position them in the fourth row. Set the titles of these buttons to “0”, “.”, and “=”.

Finally, drag two more buttons onto the view and position them on the right side of the fourth row. Set the titles of these buttons to “+” and “-”.

Your view should now look something like this:

[Insert image of calculator layout]

Now that we have the UI of our calculator app set up, it’s time to start writing some code. In the project navigator, select ViewController.swift. This is the file where we will write the code that powers our calculator app.

First, we need to create outlets for our label and buttons so that we can reference them in our code. To do this, control-drag from each button and the label to the code file and create an outlet for each. Your code should look something like this:

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var resultLabel: UILabel!
@IBOutlet weak var button0: UIButton!
@IBOutlet weak var button1: UIButton!
@IBOutlet weak var button2: UIButton!
@IBOutlet weak var button3: UIButton!
@IBOutlet weak var button4: UIButton!
@IBOutlet weak var button5: UIButton!
@IBOutlet weak var button6: UIButton!
@IBOutlet weak var button7: UIButton!
@IBOutlet weak var button8: UIButton!
@IBOutlet weak var button9: UIButton!
@IBOutlet weak var buttonDot: UIButton!
@IBOutlet weak var buttonEqual: UIButton!
@IBOutlet weak var buttonAdd: UIButton!
@IBOutlet weak var buttonSubtract: UIButton!

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
}

Now, we need to connect this function to the number buttons in the UI. To do this, control-drag from each number button to the code file and select the numberButtonPressed(_:) function as the action.

Next, let’s create a function that will be called when the “+” or “-” button is pressed. This function will take in a sender parameter, which will be the button that was pressed. We will then get the title of the button and store it in a variable called operation.

Add the following function to your code:

var operation = ""

@IBAction func operationButtonPressed(_ sender: UIButton) {
operation = sender.currentTitle!
}

Now, we need to connect this function to the “+” and “-” buttons in the UI. To do this, control-drag from each button to the code file and select the operationButtonPressed(_:) function as the action.

Finally, let’s create a function that will be called when the “=” button is pressed. This function will take the result from the previous calculation, if any, and perform the operation specified by the operation variable with the current value in the resultLabel.

Add the following function to your code:

var result = 0.0

@IBAction func equalButtonPressed(_ sender: UIButton) {
switch operation {
case "+":
result += Double(resultLabel.text!)!
case "-":
result -= Double(resultLabel.text!)!
default:
break
}

resultLabel.text = String(result)
}

Now, we need to connect this function to the “=” button in the UI. To do this, control-drag from the button to the code file and select the equalButtonPressed(_:) function as the action.

Congratulations! You have successfully created a calculator app for iOS using swift and Xcode. You can now build and run the app in the simulator to test it out.

It is important to note that this is just a basic calculator app and there are many more features and improvements that could be added. Some ideas could include implementing more advanced arithmetic operations such as multiplication and division, adding a clear button to reset the calculation, and adding error handling for cases where the user inputs invalid data.

As always, it is important to properly cite any resources or documentation that you used while creating your app. Some resources that may be helpful in this project include the Apple Developer Documentation for iOS and the Swift Programming Language Guide.

I hope you found this tutorial helpful and are now able to create your own calculator app for iOS using swift and Xcode. Happy coding!

--

--