Gallery
Share
Explore

MAD 3004 SWIFT W23 April 3 Lab Test

Peter Sigurdson
Last edited 157 days ago by System Writer
Student Lab Learning Exercise: iOS App Development with Swift
Objective:
In this lab test, you will create a simple iOS app using Swift that incorporates user interface elements, navigation, and table views. You will create a basic shopping list app with the ability to add, edit, and delete items.
When done, Zip your Xcode Project as StudentName_StudentID_LabTest_MAD3004_ShoppingList and upload to:
⁠
https://www.dropbox.com/request/lo3xONl9bwLRpZVpvxKE
⁠
⁠
Prerequisites:
Xcode installed on your Mac
Basic understanding of Swift programming language
Lab Exercise Breakdown:
User Interface
Navigation
TableView
⁠
Exercise 1: User Interface
1.1. Create a new single view iOS application using Xcode and Swift. Name it "ShoppingListApp".
1.2. Open Main.storyboard and drag the following elements onto the View Controller:
UILabel
UIButton
UITextField
UITableView
1.3. Apply Auto Layout constraints to the UI elements to ensure a responsive design.
1.4. Create a new Swift file named "MainViewController.swift" and set it as the class for the initial view controller in the storyboard.
1.5. Add IBOutlet properties for UITextField and UITableView in "MainViewController.swift":
swiftCopy code
import UIKit

class MainViewController: UIViewController {

@IBOutlet weak var itemNameTextField: UITextField!
@IBOutlet weak var tableView: UITableView!

// Rest of the code goes here
}

⁠
Exercise 2: Navigation
2.1. Embed the initial View Controller in a UINavigationController.
2.2. Add a second View Controller to the storyboard.
2.3. Create a UIStoryboardSegue from the initial View Controller to the second View Controller. Set the segue identifier to "editItemSegue".
2.4. In the second View Controller, add a UILabel and a UITextField.
2.5. Apply Auto Layout constraints to the UILabel and UITextField.
2.6. Add a "Save" UIBarButtonItem to the navigation bar in the second View Controller.
2.7. Create a new Swift file named "EditItemViewController.swift" and set it as the class for the second view controller in the storyboard.
2.8. Add an IBOutlet property for UITextField in "EditItemViewController.swift":
swiftCopy code
import UIKit

class EditItemViewController: UIViewController {

@IBOutlet weak var itemTextField: UITextField!

// Rest of the code goes here
}

⁠
Exercise 3: TableView
3.1. In the initial View Controller, set the UITableViewDataSource and UITableViewDelegate for the UITableView.
3.2. Conform the MainViewController class to UITableViewDataSource and UITableViewDelegate:
swiftCopy code
class MainViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
// ...
}

3.3. Create a custom UITableViewCell with a UILabel and a UIImageView. Name it "ItemTableViewCell".
3.4. Implement the UITableViewDataSource methods in MainViewController:
swiftCopy code
var shoppingList: [String] = []

func numberOfSections(in tableView: UITableView) -> Int {
return 1
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return shoppingList.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "ItemCell", for: indexPath) as! ItemTableViewCell
cell.itemLabel.text = shoppingList[indexPath.row]
cell.itemImageView.image = UIImage(named: "shopping_cart_icon")
return cell
}

3.5. Implement the UITableViewDelegate methods in MainViewController:
swiftCopy code
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
tableView.deselectRow(at: indexPath, animated: true)
performSegue(withIdentifier: "editItemSegue", sender: indexPath.row)
}

func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt
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.