Gallery
Share
Explore

W23 MAD 3115 Lab Test 2 and Course Project: To-Do List app using View Controllers

For your Lab TEST: You will create a simple To-Do List app using View Controllers.
How to hand this in:
Export your XCode project to a ZIP FILE.
Name the Zip File as Student_Name_STUDENTID_IOS_LabTest2.zip
Upload to:
https://www.dropbox.com/request/DMG4AWAV7gdJEbIkSm3W
⁠
⁠

You will use Swift and Storyboard to build the user interface.
First, open Xcode and create a new project.
Select "App" and click "Next."
Name the project "ToDoListApp" and choose a location to save it.
Make sure the "Interface" is set to "Storyboard" and "Language" is set to "Swift."
Design the user interface:
Open Main.storyboard.
Drag and drop a Table View Controller from the Object Library to the storyboard.
Set the Table View Controller as the initial view controller by checking the "Is Initial View Controller" checkbox in the Attributes Inspector.
Embed the Table View Controller in a Navigation Controller by selecting "Embed in" from the "Editor" menu and then "Navigation Controller."
Create a custom table view cell:
Click on the Table View in the Table View Controller.
In the Attributes Inspector, set the "Prototype Cells" to 1.
Click on the prototype cell, and set its "Style" to "Basic" in the Attributes Inspector.
Set the "Identifier" to "ToDoItemCell."
Create the Add Task View Controller:
Drag and drop a View Controller from the Object Library to the storyboard.
Add a Text Field and a Button to the View Controller.
Set the Button title to "Add Task."
Add constraints to the Text Field and Button to properly position them.
Create the Swift files:
Create a new Swift file called "ToDoItem.swift." Add the following code:
swiftCopy code
import Foundation

struct ToDoItem {
let title: String
}

Create a new Swift file called "AddTaskViewController.swift." Replace the contents with:
swiftCopy code
import UIKit

protocol AddTaskDelegate: AnyObject {
func addTask(_ task: ToDoItem)
}

class AddTaskViewController: UIViewController {
@IBOutlet weak var textField: UITextField!
weak var delegate: AddTaskDelegate?
@IBAction func addTaskButtonTapped(_ sender: UIButton) {
if let taskTitle = textField.text, !taskTitle.isEmpty {
let task = ToDoItem(title: taskTitle)
delegate?.addTask(task)
navigationController?.popViewController(animated: true)
}
}
}

Create a new Swift file called "ToDoListTableViewController.swift." Replace the contents with:
swiftCopy code
import UIKit

class ToDoListTableViewController: UITableViewController, AddTaskDelegate {
var tasks: [ToDoItem] = []
override func viewDidLoad() {
super.viewDidLoad()
navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(addTaskButtonTapped))
}
@objc func addTaskButtonTapped() {
if let addTaskViewController = storyboard?.instantiateViewController(withIdentifier: "AddTaskViewController") as? AddTaskViewController {
addTaskViewController.delegate = self
navigationController?.pushViewController(addTaskViewController, animated: true)
}
}
func addTask(_ task: ToDoItem) {
tasks.append(task)
tableView.reloadData()
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return tasks.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "ToDoItemCell", for: indexPath)
cell.textLabel?.text = tasks[indexPath.row].title
return cell
}
}


Connect the View Controllers with the Swift files and Interface Builder:
Click on the Table View Controller in the storyboard.
Open the Identity Inspector and set the "Class" to "ToDoListTableViewController."
Click on the Add Task View Controller in the storyboard.
Set the "Class" to "AddTaskViewController" in the Identity Inspector.
Set the "Storyboard ID" to "AddTaskViewController" in the Identity Inspector.
Open the Add Task View Controller scene.
Control-drag from the Text Field to the AddTaskViewController.swift file to create an IBOutlet named "textField."
Control-drag from the "Add Task" Button to the AddTaskViewController.swift file to create an IBAction named "addTaskButtonTapped."


Run the app:

Select a simulator or a connected iOS device in Xcode.
Press the "Run" button (or press Cmd + R) to build and run the app.
You should now be able to add tasks to your To-Do List app.
This lab provided a simple introduction to creating a To-Do List app using View Controllers and Storyboard in iOS. You should now have a better understanding of how to create and connect user interfaces with Swift code.
For your Course Project: will will add these further features:
Editing Tasks
Deleting tasks,

Course Project: The Fully Functional To Do App

Working with the Code you developed above:
Add functionality to Edit and Delete Tasks.
You have now make a fully functional To Do App.
How to hand in your Course Project:
Zip your XCODE project: Name as StudentName_StudentID_MAD3115_Project,zip
Upload the ZIP FILE to:
https://www.dropbox.com/request/DMG4AWAV7gdJEbIkSm3W
⁠
⁠
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.