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:
Prerequisites:
Xcode installed on your Mac Basic understanding of Swift programming language Lab Exercise Breakdown:
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:
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
Headings you add to this page will appear here.