Build an iOS Calculator App – Tutorial Part 1

In this two-part tutorial, we’re going to build a clone of iOS Calculator app using Xcode 9 and Swift 4. Our goal is to get as close to the shipping app as we can with few little modifications. Part one of the tutorial guides you through a process of designing and building a user interface (UI) of the Calculator app in Xcode using Interface Builder. Part two will guide you through connecting the UI to code, implementing actions and app logic

Here is how the current Calculator app looks like on iOS 11 (left image) vs. how our clone app will look like (right).

The only noticeable difference between the two are the shapes of the buttons. iOS 11 introduced round buttons but I went with a square/rectangle design for them because honestly I was struggling with the round design preserving a circle shape when switching between different device screen sizes.

Creating New Project

Open Xcode. Select “Create a new Xcode Project”.

Select “Single View App” for iOS and click Next.

For “Product Name” type “Calculator” and use anything you want for Organization Name and Organization Identifier. Select Swift for language. Click Next.

Pick a folder where you wish to save your new project and hit the Create button.

Configuring the Calculator Project

After creating the new project, it should be opened in the workspace window.

If for some reason the workspace window wasn’t opened, click on the top level “Calculator” project in the Navigator area.

Disregard the “Signing for Calculator requires […]” error. Fixing it is not necessary to our progress.

Our Calculator app will run only on iPhone and only in Portrait orientation. Make the necessary changes under the “Deployment Info” section by changing the “Devices” selection to iPhone only and unselecting the Upside Down, Landscape Left & Landscape Right options.

Your new Deployment Info settings should look like this.

Running the App

We’re going to build and run our application in the simulator to make sure it launches without any errors.

First, we need to select the simulator device we’re going to run our app in. From the Scheme pop-up menu select iPhone 8 and then click on Run button.

You should be able to see your (empty) app launched in the simulator.

Pressing the virtual home button should reveal your new app and its icon on iPhone’s home screen.

At this point we’re ready to start building our Calculator app.

Building the User Interface

We’re going to design our app so that it supports different iPhone screen sizes.

Click on Main.storyboard and you should be able to see the following Xcode view.

It seems like the screen in iOS Calculator app is split into seven rows of equal heights (more or less). There are five button rows and the label’s height takes about two rows.

First, we’re going to split the main view into two subviews:
– top view with a label displaying current value,
– bottom view with all calculator buttons.

Taking into consideration that the screen is split into 7 rows, our top view will take 2/7 of the screen height and the bottom view will take 5/7 of the screen height.

Drag and drop two views onto the main view in storyboard from the Object Library. The Object Library is located at the bottom-right corner of Xcode.

Now, we’re going to make sure that the top view always stays at the top of the screen by adding auto layout constraints.

Select the top view. Open the Add New Constraints menu by clicking on its icon located at the bottom of the screen.

Add the top, left, and right constraints by clicking on each dotted line. They become solid red when added. Make sure that each value is set to 0 and pinned to Safe Area. Make sure to uncheck Constrain to margins.

The result should look like this.

Click Add 3 Constraints to apply the changes.

Xcode now complains that we’re missing the height constraint.

Let’s fix it by setting a height constraint for our top view. Select the top view. Control drag from the selected view to its superview (the main view) and select Equal Heights in the pop up menu.

There are two ways to perform this operation. You can either click on the view itself and then perform the control drag to its superview in the canvas.

Or you can select the top view in the Outline view and control drag to its superview in the hierarchy.

Either way, the action will open the following menu from which you should select Equal Heights.

Next, in the Outline view, reveal the Constraints menu and select the height constraint which is called “View.height = height”

With the constraint selected, go to its Size inspector and set the Multiplier to 2:7. Hit enter.

Now we’re going to take care of the size and position of our bottom view which will hold all of the buttons.

Select the bottom view.

Click on Add New Constraints menu and make sure that spacing to nearest neighbor is set to 0 for all four constrains (top, left, right, bottom). Constraint to margins unchecked.

Click Add 4 Constraints. When done, you should be able to see nicely aligned views splitting the screen.

Adding the Top Label

Now let’s add a label to the top view. The label will be used to display the calculator’s results. Find it in the Object Library and drag and drop onto the top view.

Our label is going to spread across entire width of its placeholder but its height is going to be equal to half of its container view height. It is also going to be aligned to the bottom of its container.

Select the label and in the Add New Constraints menu pin it to left, right, and bottom with 0 value making sure that Constraint to margins is selected.

Now, in order to set the label’s height to half of of its container height, control drag from the label to its container view and select Equal Heights constraint.

Reveal the Constraints menu for the label. Select “Label.height = height” constraint.

Go to its Attributes Inspector and set its Multiplier to 1:2

At this point, our label should be nicely aligned in the Storyboard.

Let’s play a little with the label’s properties to make it look like in the Calculator app.

Select the label and open its Attributes inspector.

Set the Text of label to “0”, Alignment to Right, increase the font size to 90, set its style to Light (or Thin) and change the Color to white.

As you probably noticed, now we need to change the label’s container view background color to black. Select this view and in its Attributes Inspector change the Background to Black Color.

The result should be as follows.

If you run this app, you’ll immediately notice that the top status bar has a different background color.

Let’s fix it by making its background color black and setting its font color to white.

Select the main view in the outline view and then in Attributes Inspector set its Background to black.

Next up, open the ViewController.swift file from the Navigator area and add the following code to it.

override var preferredStatusBarStyle: UIStatusBarStyle {
 return .lightContent
}

This will change the style and color of a status bar to use white font. Run the app.

Adding Buttons

Open the Main.storyboard file.

In order to build the buttons matrix, first, find a button object in the Object Library and then drop it onto the Storyboard’s bottom view. Repeat the process of adding a total of 19 buttons to the view. Make sure that they are semi-arranged in the calculator’s layout we’re trying to achieve because this will help us when connecting the buttons into actual grid layout.

Once you’ve dropped and (more or less) arranged the buttons, re-name each of them to match the Calculator’s button titles.

Click on each button and in its Attributes inspector type a Default title for each. Increase the font size to make it more visible as well but don’t worry about its appearance right now, we’re going to style all of the buttons later on.

In order to type the divide symbol ÷ hold down the option key and press forward slash “/“ key.
To get the multiply symbol, just copy it from here × and paste it into the button’s Default title.

The final outcome of this operation should look like this.

At this point we need to take care of couple things. First, we need to make sure that the buttons are going to stay arranged in the desired matrix, and then we need to style them to match the iOS Calculator look.

In order to arrange the buttons into a grid, we’re going to use Stack views (horizontal and vertical).

Select the top row of buttons by clicking on them while holding down shift key. Then click on Embed In Stack. Xcode will create a horizontal Stack view for us.

Repeat the process of selecting each row of buttons and embedding it in Stack.

We will end up with 5 horizontal stack views. The result should look like this.

Now, select all of the newly created horizontal stack views by clicking on them while holding the shift key. Then click on Embed In Stack one more time.

This will arrange all of our horizontal stack views into one vertical stack view.

As you probably noticed, our newly created master stack view isn’t aligned well. Let’s add some Auto Layout constraints to make it spread across entire available space of its placeholder.

Select the master stack view and add the following 4 constraints: top, left, right, and bottom set to 0. Make sure that the Constraint to margins option is not selected.

At this point we need to take care of each horizontal stack view and make sure that it stays in its designated spot.

Select the top horizontal stack view and add the following 3 constraints – top, left, right set to 0.

Select the second horizontal stack from the top and add the same kind of constraints as before. Repeat the process for the two more stack views until you reach the last stack view with the zero button.

The last (bottom) horizontal stack view is going to have slightly different constraints. We’re going to clip it to all four directions – top, left, right, and bottom.

The result may seem somewhat random however we already made sure that our buttons are going to stay in the exact locations that we want to.

The last bit of work is to apply appropriate size constraints to our stack views and buttons to make sure that each takes the same amount of space on the screen (except the zero button which will be our special case).

First of all, let’s make sure that each individual horizontal stack view has exactly the same height. In order to accomplish this, we’re going to use the Equal Height constraint between each stack view.

Select the top horizontal stack view and control drag from it to the horizontal stack just below it. Select Equal Heights constraint.

Repeat this process for each pair of horizontal stack views – pick the second stack view and control drag from it to its neighbor below. Select Equal Heights. This should give us equally tall horizontal stack views.

Now, let’s add the Equal Widths constraints to all of our buttons in each of the horizontal stack view. (Except the zero button which will have its own set of constraints.)

Select the first button in the first horizontal stack view (the “AC” button) and control drag from it to the button right next to it (the “+/-“ button). Select Equal Widths constraint.

Repeat this action for the remaining button pairs in this stack view. E.g., “+/-“ button has Equal Width to the “%” button, and the “%” button has Equal Width to the “÷” button. The result should look like this.

Repeat the process of adding Equal Widths constraints between each button pairs in each horizontal stack view until you reach the last row.

For the zero button, control drag from it to its superview (the horizontal stack view), and select Equal Widths.

Then select the newly created width constraint and in its Attributes inspector set its Multiplier to 1:2. This will make sure that our zero button spans across the width of two regular buttons.

Complete adding constraints for this row but setting Equal Widths between the “.” button and the “=“ button. The end results should look like this. Evenly distributed and sized buttons.

Styling Buttons

Select the “AC”, “+/-“ and “%” buttons. In their Attributes inspector change the background color to Silver.

With the buttons still selected, in their Attributes inspector, change the Text Color to Black.

Select all of the number buttons (0 through 9) and the “.” button. You can use the Outline view to command-click on the desired buttons to select them. Change their background color to Tungsten.

Change their Text Color to white.

Select the remaining buttons in the rightmost column – the “÷”, “x”, “-“, “+” and “=” buttons. Change their background color to Tangerine.

Change their Text Color to white.

Select all of the buttons and change their font size to 37 and style to Light.

Now we need to put some finishing touches to add borders around the buttons. The result will look like this.

Rather than actually adding borders to the buttons, we’re going to add a spacing to each stack view which will simply add extra space in between each element in the stack view.

For every single stack view (5 horizontal and 1 vertical stack view), repeat the following actions – select it, go to its attributes inspector and change its Spacing value to 1.

Now, in order to make the “borders” black, select the bottom view and change its Background to Black Color.

Also, Xcode complains about having some Auto Layout issues.

In order to fix them, click on the little red arrow located in the top-right corner of the Outline view. This opens up the following view. A list of all auto layout issues Xcode found.

To fix them, click on each individual red icon and select the top constraint. Then click on Delete Constraints. The cause of these issues was adding the extra spacing to each stack view which threw Xcode off.

Save your project and run the app in simulator. Everything should look great except the zero button. Take a closer look at its right edge and note that it is not aligned well with the border of the button above. It happened because the extra spacing we added to each stack view threw off the width of each button by a little.

In order to fix it, select the zero button and expand its Constraints menu.

Then, select the “0.widht = 0.5 x width” constraint and in its Attributes inspector change the Constant value to -0.5. This will subtract half a point from the width of the zero button which is exactly the value we need.

Run your app – the UI looks great. Congratulations! You’ve just designed and implemented the User Interface of iOS Calculator app. In Part 2 of this tutorial we’re going to make the Calculator app work by implementing necessary actions and app logic.

One thought

  1. Nice article, but where is part 2.
    Logic is missing, but very nice. thanks

    Reply

Reply