Explore

s24 MO1013 IOS Buidling the Simple App: Assignment 2

Hand in: A Word Document with Screen shots of your XCODE IDE, IOS Simulator, and the Code that you wrote.

Save the Document as StudentName_StudentID.docx - Upload to:

⁠

https://www.dropbox.com/request/aOIv3ArmzpGIE5C29aQF⁠

⁠

Lab: BUILDING THE IOS Calculator

I'll guide you through creating a simple iOS calculator app using Xcode and Swift, focusing on the "kinetic" practices unique to iOS development.

The main thing here is creating Interface Builder IB Actions and Outlets to hookp Storyboard Widgets like Buttons and Textfields to the Swift Code modules that reside in the Storyboard.

This will be a step-by-step guide that assumes familiarity with basic programming concepts but not necessarily with iOS development specifics.

Let's create a basic calculator that can perform addition, subtraction, multiplication, and division.

Step 1: Create a New Xcode Project

1. Open Xcode 2. Click "Create a new Xcode project" (or File > New > Project) 3. Choose "App" under iOS 4. Click "Next" 5. Set the following options: - Product Name: SimpleCalculator - Interface: Storyboard - Language: Swift 6. Choose a location to save your project and click "Create"

Step 2: Design the User Interface

1. In the Project Navigator (left sidebar), click on "Main.storyboard" 2. In the Object Library (bottom right), search for "Label" and drag it onto the view controller 3. Position the label at the top of the view and resize it to stretch across most of the width

4. With the label selected, go to the Attributes Inspector (top right) and change: - Alignment: Right - Font: System 40.0

5. Search for "Button" in the Object Library and drag 16 buttons onto the view controller

6. Arrange the buttons in a 4x4 grid below the label 7. Set the titles of the buttons as follows (from left to right, top to bottom): 7, 8, 9, ÷ 4, 5, 6, × 1, 2, 3, - 0, ., =, +

8. Select all buttons, go to the Size Inspector, and set their width and height to 80x80

9. Adjust the spacing between buttons for even distribution

Step 3: Create Outlets and Actions (equivaelent to JS onClick event handling programming)

To find the Assistant Editor in Xcode 15.4, follow these steps:

Open Your Project: Ensure you have your project open in Xcode.

Select the View Controller's Nib File: In the Project Navigator, select the nib file associated with your view controller (e.g., MyViewController.xib).

Display the Assistant Editor:

Click the Assistant Editor button in the Xcode toolbar. This button is located in the middle of the Editor group and resembles a bow tie and tuxedo. Alternatively, you can use the menu option View > Assistant Editor > Show Assistant Editor.

Configure the Assistant Editor: Ensure the Assistant Editor is displaying the view controller's header file (e.g., MyViewController.h). You can do this by clicking on the file name in the jump bar at the top of the Assistant Editor panel and selecting the required file.

Use the Assistant Editor: Now you can use the Assistant Editor to create IB Interface Builder connections between your storyboard elements (buttons and labels) and code in the file ViewController.swift. {in older tutorials, you will see this refered to as the nib file).

For example, you can (hold the control key) while -dragging from a button in the nib file to the method declaration area in the header file to create an action.

By following these steps, you should be able to find and utilize the Assistant Editor in Xcode 15.4.

1. Open the Assistant Editor by clicking the two overlapping circles icon in the top right 2. Make sure the Assistant Editor is showing the ViewController.swift file 3. Control-drag from the label to just inside the class ViewController definition and create an outlet named "resultLabel" 4. Control-drag from each number button (0-9 and .) to create actions. Name them "numberPressed" and change the type to "UIButton" 5. Control-drag from each operation button (+, -, ×, ÷) to create actions. Name them "operationPressed" and change the type to "UIButton" 6. Control-drag from the equals button (=) to create an action named "equalsPressed"

Your ViewController.swift file should now look something like this:

```swift import UIKit

class ViewController: UIViewController {

@IBOutlet weak var resultLabel: UILabel! @IBAction func numberPressed(_ sender: UIButton) { } @IBAction func operationPressed(_ sender: UIButton) { } @IBAction func equalsPressed(_ sender: UIButton) { }

override func viewDidLoad() { super.viewDidLoad() } } ```

Step 4: Implement Calculator Logic

Add the following properties to the ViewController class:

```swift var currentNumber: Double = 0 var previousNumber: Double = 0 var performingOperation = false var operation = 0 ```

Update the actions as follows:

```swift @IBAction func numberPressed(_ sender: UIButton) { if performingOperation { resultLabel.text = sender.titleLabel?.text performingOperation = false } else { resultLabel.text = resultLabel.text! + (sender.titleLabel?.text)! } currentNumber = Double(resultLabel.text!) ?? 0 }

@IBAction func operationPressed(_ sender: UIButton) { if resultLabel.text != "" && sender.tag != 0 { previousNumber = Double(resultLabel.text!) ?? 0 if sender.tag == 1 { // Division resultLabel.text = "÷" } else if sender.tag == 2 { // Multiplication resultLabel.text = "×" } else if sender.tag == 3 { // Subtraction resultLabel.text = "-" } else if sender.tag == 4 { // Addition resultLabel.text = "+" } operation = sender.tag performingOperation = true } }

@IBAction func equalsPressed(_ sender: UIButton) { if operation != 0 { if operation == 1 { // Division resultLabel.text = String(previousNumber / currentNumber) } else if operation == 2 { // Multiplication resultLabel.text = String(previousNumber * currentNumber) } else if operation == 3 { // Subtraction resultLabel.text = String(previousNumber - currentNumber) } else if operation == 4 { // Addition resultLabel.text = String(previousNumber + currentNumber) } } } ```

Step 5: Set Button Tags

1. Go back to Main.storyboard 2. Select the division button (÷) 3. In the Attributes Inspector, set its Tag to 1 4. Set the multiplication button (×) Tag to 2 5. Set the subtraction button (-) Tag to 3 6. Set the addition button (+) Tag to 4

Step 6: Run the App

1. Select an iOS simulator (e.g., iPhone 12) from the scheme menu in the top left 2. Click the "Run" button (play icon) or press Cmd+R

You should now have a functioning basic calculator app! You can test it by entering numbers and performing operations.

This example demonstrates several key principles of iOS development:

1. Using Interface Builder to design the UI 2. Connecting UI elements to code using IBOutlets and IBActions 3. Handling user interactions with buttons 4. Updating the UI based on user input and calculations

Remember, this is a basic implementation and doesn't handle all edge cases or more complex calculations. It serves as a starting point for understanding iOS development with Swift and Xcode.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.