The following contains all of the UI steps for Hack on The Hill 6's Intro to iOS workshop where we make a simple calculator app!
-
Begin by creating a new project in Xcode.
-
Select "Create a new Xcode project" near the bottom left of the window.
-
Ensure that the "iOS" tab at the top of the page is selected.
-
Double-click on "Single View App".
-
Name your project "HothCalculator".
-
Pick whatever Team, Organization Name and Organization Identifier that you want.
-
Ensure that the Language field is set to "Swift".
-
Ensure that "Use Core Data" is unchecked.
-
Click "Next".
-
On the following window, select where you'd like your project's folder to be create (default location is ~/Desktop) and click "Create".
-
In the Project Navigator on the left, you should see all of the files associated with our project. The only group (folder) we're interested in for the purposes of this tutorial is the HothCalculator group. The HothCalculatorTests, HothCalculatorUITests, and Products groups aren't important for now.
-
Inside the HothCalculator group you should see a file named Main.storyboard. Click it and you'll be taken to the Interface Builder.
-
Locate the button that has a circle with a square in it on the top right of the screen and click it.
-
The Object Menu will appear and contain UI elements we can drag into our storyboard. Here, we already searched for a label.
From the Object Menu, drag 2 Labels, 2 TextFields, and 5 Buttons and place them onto the ViewController like the following picture. It doesn't have to be exact but relatively close.
Click on the top label in the ViewController to select it. On the right side window, there is a upside down triangle thing called the Attributes Inspector. Click on it and make the following changes:
-
Change the "Label" text to "0".
-
Change Alignment to Center.
-
Change Font Size to 45.0.
With the top label still selected, on the bottom right of the screen is the Align and Add New Constraints Button. Align is the one with a shorter rectangle on top of another. Add New Constraints is to the right of it.
Click on Align.
Click on Horizontally in Container and Vertically in Container. Then, click on Add 2 Constraints.
The Answer label should now be in the middle of the screen. However, we want it back up where we put it initially. With it still selected, on the right side window, click on the ruler icon.
Towards the bottom, there is a constraint item for our Vertically in Container constraint. Click Edit and change the multiplier field to 0.25.
Click on Add New Constraints (to the right).
Click on the left and right text fields and enter 10 for both. Change Height to 80. Then, click on Add 3 Constraints.
Click on the Label under the Answer label to select it. On the right side window, select the Attributes Inspector and make the following changes:
-
Change the "Label" text to "?".
-
Change Alignment to Center.
-
Change Font Size to 35.0
With the label still selected, go to Align and click on Horizontally in Container. Add the constraint.
Now go to Add New Constraints (to the right), and add the following constraints:
Width and Height to 50.
Top spacing to 40. Type in the topmost textfield, this will trigger the highlighted red I. This sets the top of the Operator label to always be 40 away from the bottom of the Answer Label.
Add the 3 constraints.
Select the left text field.
Go to Add New Constraints and change the Width to 80, Height to 30, and TRAILING margin constraint to 45. This will make its trailing edge always 45 away from the left of Operator label.
Select the right text field.
Go to Add New Constraints and change the Width to 80, Height to 30, and LEADING margin constraint to 45. This will make its leading edge always 45 away from the right of Operator label.
Now, we want to center these two text fields vertically with respect to our operator, just like in the image. To do so, we are going to control-click and hold on each text field, and then drag it to the operator label and let go. A black menu will pop up with the option to "Center Vertically".
Select the Button right under the left side Textfield. Press CONTROL, and while holding it, drag the new blue line to the left side Textfield until it highlights it. Then let go. The following menu will appear, select Center Horizontally. This will center the Button to the Textfield.
Repeat this for the Button under it.
Also repeat this for the 2 right side Buttons, but with the right side Textfield.
For each of the two top Buttons, select Align and click Vertically in Container.
For each of the two bottom Buttons, select Add New Constraints and add a top constraint of 40.
For the top left Button, select it and go to its Attribute Inspector.
-
Change the "Label" text to "-".
-
Change Alignment to Center.
-
Change Font Size to 20.0
For the top right Button, select it and go to its Attribute Inspector.
-
Change the "Label" text to "+".
-
Change Alignment to Center.
-
Change Font Size to 20.0
For the bottom left Button, select it and go to its Attribute Inspector.
-
Change the "Label" text to "/".
-
Change Alignment to Center.
-
Change Font Size to 20.0
For the bottom right Button, select it and go to its Attribute Inspector.
-
Change the "Label" text to "x".
-
Change Alignment to Center.
-
Change Font Size to 20.0
Select the final Button.
Go to its Attribute Inspector and do the following:
-
Change the "Label" text to "Enter".
-
Change Alignment to Center.
-
Change Font Size to 30.0
Click on Align.
Click on Horizontally in Container and Vertically in Container. Then, click on Add 2 Constraints.
Now the Button is in the middle of the screen. We want it back towards the bottom.
Click on the ruler again on the right side window. Scroll down to the Center Y constraint and click on edit. Change the multiplier to 1.6.
Finally, for aesthetics, you can change the color of the text of the buttons and labels, the background view, to anything you want inside each one's Attributes Inspector. There is a Color and Background located in each one's Attributes Inspector.
We are going to shift-click the Operator Label and Answer Label and choose a white text color.
Next, we are going to shift click the 5 buttons and choose a white text color.
Finally, we are going to select the background and choose a black background color.
Here is the final screen :
We will need to use the Assistant editor to view our source code and our storyboard at the same time. Click the double circle button in the top right to open to code area for the current view, hold the control button, and drag it to an area of the code.
The following GIF shows how we can hold CNTRL, hold click, and drag the blue line to the ViewController class in order to connect the UI element to functionality.
IBActions are what happens when the user does something, and any code in them will activate when the user does the action
Outlets allow you to reference the button or other object in your code IE: Check my textfields text or see if my button is clicked
Inside of your ViewController class brackets, above the viewDidLoad() func, add in the two text fields as IBOutlets, naming them firstNumber and secondNumber. Add in the two labels, answer and operator, as IBOutlets as well. Below the viewDidLoad() func, add in the 5 buttons with their operation names as IBActions.




















