This article will show you how to make a calculator app in Swift. This article has two parts, each of which will be released on separate dates.
Part 1: Setting up the UI and connecting it to the code (3/19/2021)
To start off, create a new project in Xcode. Use the video below as a guide and ensure that you select the correct setting as detailed in the video.
Once you have created a new Xcode project, go to the Main.storyboard file and add a button:
Now, we need to add in all of the buttons and increase the text size. Note that we select the button and press command (or the windows key if you are remotely connected) and D to duplicate the button. You can alternatively copy and paste the buttons (cmd C and cmd V) if you prefer to do so.
Now, we need to constrain the buttons. The easiest way to do this is using a stack view. Follow the instructions below:
The poor buttons are all squished together! Let’s give them some space:
The buttons are not in the center! We will align the entire stack view to the center to do this:
We need a place to display the result of the calculation! Add in a label:
Let’s see how it looks on other iOS devices. It’ll look fine on everything except the iPhone 4s (But who uses that anyway! It is not worth the effort to try and fix it, so we’ll let it be.)
Adjust the minimum font size for the label as shown in the video. This will auto-reduce the size of the label if it starts going off the screen.
Whoops! Almost forgot to add the operations (+, -, x, /). We’ll go ahead and add them in now.
Lastly for this part, we will connect the elements to the code. Note that we press control while clicking to get the blue lines to show up.
Part 2: Coding and finishing up the app (this will be released by next Friday)
