Introduction: How to Make a Calculator in Xcode Using Swift
In this quick tutorial, I will show you how to create a simple calculator using Swift in Xcode. This app is built to look almost identical to the original calculator app for iOS. You can either follow the directions step-by-step and build the calculator with me, or you can simply go to the last step and copy and paste the code into your view controller. However, if you do this, make sure to connect all your elements on the storyboard with your view controller.
Step 1: Creating the Project
The first step in making our calculator is to actually create the project in Xcode. You can do this by clicking "Create a new Xcode project" and naming it whatever you would like. I named mine "Calculator." The next step is to select "Single View Application" for the app type. Keep all other info as the default value.
Step 2: Storyboard Layout
Step 2 of creating our calculator requires you to design a basic layout in the storyboard. Before you start this, I recommend changing your simulator device to the iPhone 7 Plus. Begin by dragging a button on to the storyboard and changing its dimensions to 89 x 89. Change its background color to mercury on the attributes inspector and its font color to tungsten. Next, adjust the font to Helvetica Light 30. Continue to copy and paste the button until you have a total of 20. Adjust the layout of these buttons so that you have five rows and four columns.
Step 3: Storyboard Design and Aesthetics
Delete the second button on the bottom row and expand the first button to take over this space. Change the placeholder value of this button to zero. Continue to change the number values and symbols of each button until it is practically identical the the picture shown above. On the attributes inspector, the darker grey color is silver, the orange color is tangerine, and the font color is changed to snow on the orange buttons. Next, click on the view controller and change its background color to black. Add a label above the buttons and adjust its size to however you feel comfortable. Align the text to the right and change the label's font to Helvetica light 70. If you would like, you can add constraints to all of the elements in order to make the app look the same for all devices.
Step 4: Connecting and Integrating Elements
Open the attributes inspector and change the tag for every single number button. The tag should be 1 more than the actual numerical value. For example, the #0 button should have a tag value of 1, the #1 button should have a tag value of 2, the #2 button should have a tag value of 3, and so on. Next, press control, click on the #0 button, and drag it onto the view controller. A popup should appear on the screen. Change the connection to 'action,' the type to 'UIButton,' the event to 'Touch Up Inside,' the arguments to 'Sender,' and its name to 'numbers.' You can change the name to whatever you would like but that means you would have to change the name again when calling the function later on in the program. Next, control, click, and drag each number button into the function that we just created. Now, control, click, and drag the label into the program, but NOT into the function. This means that you simply bring the label into the function as a separate variable. Remember, if you are ever confused about the code, I have left all my code for you to use on the last step of this Instructable.
Step 5: Establishing Variables
In order to make our number buttons functional, we will have to connect their value to the label in our 'numbers' function. You can do this by first creating a variable 'numberOnScreen' and make it of type double and equal to 0: var numberOnScreen: Double = 0; And don't forget, if the code on here is a little unclear, I have left you the full code on the last step for you to use to your likings. Next, establish another variable 'performingMath' of type bool and make it false: var performingMath = false; Also, create another variable called 'previousNumber' of type double and set it equal to 0: var previousNumber: Double = 0; The last variable that you have to create is the 'operation' variable. Set it equal to 0: var operation = 0;
Step 6: Number Buttons Function
After you've established the appropriate variables, you can then proceed to copy and paste this code into your 'numbers' function:
if performingMath == true {
label.text = String(sender.tag-1)
numberOnScreen = Double(label.text!)!
performingMath = false
}
else {
label.text = label.text! + String(sender.tag-1)
numberOnScreen = Double(label.text!)!
}
Essentially, this piece of code displays certain numbers on the label when the appropriate button is pressed. However, we still need to be able to use all the other buttons and make the calculator functional. We will be doing this in the next couple of steps.
Step 7: Integrating Operation Buttons
Open the attributes inspector and change the tag for all miscellaneous buttons. The clear button should have a tag of 11, the division button should have a tag of 12, the multiplication button should have a tag of 13, the subtraction button should have a tag of 14, the addition button should have a tag of 15, and the equal button should have a tag of 16. Next, press control, click on the clear button, and drag it onto the view controller. A popup should appear on the screen. Change the connection to 'action,' the type to 'UIButton,' the event to 'Touch Up Inside,' the arguments to 'Sender,' and its name to 'buttons.' You can change the name to whatever you would like but that means you would have to change the name again when calling the function later on in the program. Next, control, click, and drag each miscellaneous button into the function that we just created.
Step 8: Miscellaneous Buttons Function
After you have connected all the tagged miscellaneous buttons to their appropriate function, you can begin to insert the code into the 'buttons' function:
previousNumber = Double(label.text!)!
if sender.tag == 12 { //Divide
label.text = "/";
}
if sender.tag == 13 { //Multiply
label.text = "x";
}
if sender.tag == 14 { //Subtract
label.text = "-";
}
if sender.tag == 15 { //Add
label.text = "+";
}
operation = sender.tag
performingMath = true;
}
else if sender.tag == 16 {
if operation == 12{ //Divide
label.text = String(previousNumber / numberOnScreen)
}
else if operation == 13{ //Multiply
label.text = String(previousNumber * numberOnScreen)
}
else if operation == 14{ //Subtract
label.text = String(previousNumber - numberOnScreen)
}
else if operation == 15{ //Add
label.text = String(previousNumber + numberOnScreen)
}
}
else if sender.tag == 11{
label.text = ""
previousNumber = 0;
numberOnScreen = 0;
operation = 0;
}
Essentially, this piece of code displays one of the miscellaneous buttons when it is pressed and proceeds to calculate the final answer and displays it on the label.
Step 9: Full Code
If you didn't want to go through and build the calculator step by step with me, then you can simply add the elements to your storyboard and copy and paste the full code into your view controller. Here is the code:
import UIKit
class ViewController: UIViewController {
var numberOnScreen: Double = 0;
var previousNumber: Double = 0;
var performingMath = false;
var operation = 0;
@IBAction func numbers(_ sender: UIButton) {
if performingMath == true {
label.text = String(sender.tag-1)
numberOnScreen = Double(label.text!)!
performingMath = false
}
else {
label.text = label.text! + String(sender.tag-1)
numberOnScreen = Double(label.text!)!
}
}
@IBOutlet weak var label: UILabel!
@IBAction func buttons(_ sender: UIButton) {
if label.text != "" && sender.tag != 11 && sender.tag != 16{
previousNumber = Double(label.text!)!
if sender.tag == 12 { //Divide
label.text = "/";
}
if sender.tag == 13 { //Multiply
label.text = "x";
}
if sender.tag == 14 { //Subtract
label.text = "-";
}
if sender.tag == 15 { //Add
label.text = "+";
}
operation = sender.tag
performingMath = true;
}
else if sender.tag == 16 {
if operation == 12{ //Divide
label.text = String(previousNumber / numberOnScreen)
}
else if operation == 13{ //Multiply
label.text = String(previousNumber * numberOnScreen)
}
else if operation == 14{ //Subtract
label.text = String(previousNumber - numberOnScreen)
}
else if operation == 15{ //Add
label.text = String(previousNumber + numberOnScreen)
}
}
else if sender.tag == 11{
label.text = ""
previousNumber = 0;
numberOnScreen = 0;
operation = 0;
}
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
