Skip to content

uclaacm/hoth6-ios-workshop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

hoth6-ios-workshop

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!

Getting Started

  1. Begin by creating a new project in Xcode.

  2. Select "Create a new Xcode project" near the bottom left of the window.

alt text

  1. Ensure that the "iOS" tab at the top of the page is selected.

  2. Double-click on "Single View App".

alt text

  1. Name your project "HothCalculator".

  2. Pick whatever Team, Organization Name and Organization Identifier that you want.

  3. Ensure that the Language field is set to "Swift".

  4. Ensure that "Use Core Data" is unchecked.

  5. Click "Next".

  6. On the following window, select where you'd like your project's folder to be create (default location is ~/Desktop) and click "Create".

Interface Builder

  1. 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.

  2. Inside the HothCalculator group you should see a file named Main.storyboard. Click it and you'll be taken to the Interface Builder.

alt text

Setting up the UI

  1. Locate the button that has a circle with a square in it on the top right of the screen and click it.

  2. The Object Menu will appear and contain UI elements we can drag into our storyboard. Here, we already searched for a label.

alt text

Building the UI

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.

alt text

Setting up Answer Label

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:

  1. Change the "Label" text to "0".

  2. Change Alignment to Center.

  3. Change Font Size to 45.0.

alt text

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.

alt text

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.

Setting up Operator Label

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:

  1. Change the "Label" text to "?".

  2. Change Alignment to Center.

  3. 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.

Setting up the number Text fields

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".

Setting up the operator Buttons

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.

Changing Settings for Each Button

For the top left Button, select it and go to its Attribute Inspector.

  1. Change the "Label" text to "-".

  2. Change Alignment to Center.

  3. Change Font Size to 20.0

For the top right Button, select it and go to its Attribute Inspector.

  1. Change the "Label" text to "+".

  2. Change Alignment to Center.

  3. Change Font Size to 20.0

For the bottom left Button, select it and go to its Attribute Inspector.

  1. Change the "Label" text to "/".

  2. Change Alignment to Center.

  3. Change Font Size to 20.0

For the bottom right Button, select it and go to its Attribute Inspector.

  1. Change the "Label" text to "x".

  2. Change Alignment to Center.

  3. Change Font Size to 20.0

Setting up Enter Button

Select the final Button.

Go to its Attribute Inspector and do the following:

  1. Change the "Label" text to "Enter".

  2. Change Alignment to Center.

  3. 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.

Final Screen

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 :

Adding Outlets and Actions: Connecting UI to Code

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.

Alt text

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.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages