SwiftUI — Creating a Basic Calculator

As we explore more about Swift, in this blog we are going to go over how to use Swift programming language alongside XCode’s SwiftUI which is powerful enough to allow us to create our own custom basic calculator with a button that produces a random value.

What is SwiftUI?

When I started exploring around and using SwiftUI I found that there were many neat things that SwiftUI can offer when creating applications. SwiftUI's easy drag and drop features it can make the programmer's life easier. But, the real big question here is what is SwiftUI? The developers at Apple responsible for XCode have created SwiftUI which primarily focuses on allowing users to apply Swift programming language to create aesthetically pleasing while remaining powerful and efficient applications all while doing so in the least amount of code possible. In addition, SwiftUI makes use of declarative syntax to allow a user to simply provide and state exactly what they want the user interface to do. SwiftUI can give the power of user experience right to the developer’s fingertips by providing just one set of APIs and tools available.

This tutorial will all be done on macOS, before we begin creating our calculator we must first make sure we have XCode downloaded and ready to go.

Step 1: First Create a new XCode Project

First, we will open up XCode then click on “Create a new Xcode project”, that you will be prompted to choose a template. We are going to stick with the default one provided which happens to be “app”. From here another window will open where we can enter in the options for our new project, enter in your own custom project name, make sure to select SwiftUI for the interface, SwiftUI App for the Life Cycle, and Swift is the language then hit next, then choose where to save the project it will then create the new project.

Figure 1.1 ← | Figure 1.2 | → Figure 1.3

Step 2: Open up ContentView.swift file to start writing our code

Once we have our new project open we can start coding our new calculator! In the struct ContentView, we will replace the default generated text with a ZStack (allows for us to overlap/overlay content upon each other, i.e. small text over an image) and within that, we will be creating a VStack (it allows us to create vertical views in our app). Inside the VStack we will have to create a horizontal stack (HStack) for the display for our numbers which will take the variable “value” to display (will be discussed later on) and then create a ForEach loop that loops over each “button” (2D array) of its self and then contains properties for each calculator button as well as the button action function which we will discuss in a later step.

Figure 2.1 ← → Figure 2.2

The .background property that takes in an item of the enum colorsOfButton will be discussed in the next step.

These new functions being used inside of the .frame property for the buttons are the buttonWidth and buttonHeight function which are still inside the struct ConstructView but at the bottom, they are pictured here below. In the width function we will take an enumeration of AllButtons as a parameter which we will create and discuss next.

Figure 2.3

Step 3: Create an enumeration for all calculator buttons and for Operators

Next, we create an enumeration of the calculator buttons, here we created AllButtons as a String type because this is where the text labels are on the button, so if we change the horse emoji to a pineapple emoji it would change on the application view as well. The colorsOfButton variable is responsible for having the displaying the correct color of the button. The case for randomFun will be for a randomly generated number between 0–199 ***The case for horse created here is just for fun :)***

Figure 3.1

For our enumeration of operations, we can create it right below our enum of calculator buttons we just created. This new enum of which will include: add, minus, multiply, divide, and none (no selected operation, default scenario).

Figure 3.2

Step 4: Back inside struct ContentView, create a 2D array for Buttons

Now that we have created an enum of all calculator buttons we can now apply that enumeration and start to create that 2D grid of our buttons which can be used to display all buttons on the application.

Figure 4.1

Step 5: Add in some @State property wrapper variables for “value” “currentNum” and selectedOperator

If you recall back in Step 2, we have not actually defined the “value” variable yet so we should define it at the top of the struct ContentView. It is responsible for controlling the number being displayed to the user. Next we will also have to define the currentNum variable, this will allow us to have a set variable that can track the running number and save Double numbers that will be used to apply operations to by the user selecting an operation. Finally, the third variable is responsible for keeping track of which operation the user selected and the variable makes use of the Operators enumeration that we created back in Step 3.

Figure 5.1

Step 6: Let’s add logic and functionality

Recall back to Step 2, we mention a button action function with some nested switch statements inside to supplement the calculator functionality. So again, we are still inside of the struct ConstructView. In order to start this, we will need to develop a function that can react to users’ inputs and place it on each button (done inside the ForEach loop we created for the button properties). We can create this below our ForEach loop for our calculator buttons inside the struct ConstructView.

Primarily, this function will take in the parameter enumeration of AllButtons and then switch on each button in the calculator to apply the necessary functions (if the user hits add, take input 1 add to input 2, if the user hits multiply, take input 1 and multiply by input 2, user hits AC to clear, etc.).

Figure 6.1 ← → Figure 6.2

Final Product Overview (Video)

Conclusion

Now if you have followed along with the code and do not have any errors, you should have a nice colorful functional basic calculator that provides a random number or something silly like a horse emoji. We can now see the powers of Swift and SwiftUI through Xcode, thank you for reading my blog 😊