Share
Explore

MAD 3004 SWIFT W23 April 3 Lab Test

​
Peter Sigurdson
Last edited 179 days ago by Peter Sigurdson
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 codeimport 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 codeimport 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 codeclass 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 codevar 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 codefunc 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
Headings you add to this page will appear here.
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.