Creating a To-Do List Using Swift with UIKit, iPhone App Development, and 12 Table View Controllers

Introduction

Apple’s iOS platform offers a highly robust application development environment with solid UI components and various features. In this article, we will explore how to develop an iPhone app based on the UIKit framework using the Swift programming language. Specifically, we will detail the process of creating a To-Do List app utilizing UITableViewController. This project will greatly aid in understanding the fundamental concepts of UIKit.

Introduction to Swift and UIKit

Swift is a programming language developed by Apple that provides fast, safe, and modern syntax. UIKit is the framework used for building user interfaces in iOS apps, offering various UI components such as buttons, labels, and text fields to help developers create attractive and intuitive applications.

Main Features of the To-Do List App

The primary features we aim to achieve in this project are as follows:

• The ability to add and delete tasks
• The ability to check off tasks to mark them as completed
• The ability to save and load the task list

Project Setup

Now, let’s open Xcode and create a new iOS project. We will use the ‘Single View App’ template and select Swift as the programming language. We will set the project name to ‘ToDoList’.

UI Design

To design the app’s UI, we will use Storyboards. Open the Main.storyboard file and add a UITableViewController. Follow these steps:

1. Select the existing View Controller in the storyboard and delete it.
2. Drag a UITableViewController from the library to the storyboard.
3. Set the class name of the new UITableViewController to ‘ToDoListTableViewController’.

Creating the Data Model

We create a data model to store tasks. To do this, add a new Swift file and create a class called ‘Task’.

                class Task {
                    var title: String
                    var isCompleted: Bool

                    init(title: String) {
                        self.title = title
                        self.isCompleted = false
                    }
                }
            

The code above defines a simple task model. Each task has a title and a completion status.

Setting up UITableViewDataSource

Now we will adopt the UITableViewDataSource protocol in the ‘ToDoListTableViewController’ class to provide data for the table view. Add the following code.

                class ToDoListTableViewController: UITableViewController {
                    var tasks: [Task] = []

                    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: "TaskCell", for: indexPath)
                        let task = tasks[indexPath.row]
                        cell.textLabel?.text = task.title
                        cell.accessoryType = task.isCompleted ? .checkmark : .none
                        return cell
                    }
                }
            

The UITableViewController now returns the correct number of data items and updates the content for each cell.

Implementing Task Addition

To implement the feature of adding tasks, provide an interface for the user to enter tasks using alerts or pop-ups. Create a new ViewController and design a text field and a button. After the user enters a task and clicks the button, add the input to the tasks array and refresh the table view.

Implementing Task Deletion

Set up the ability to delete a task by swiping each cell. Use the tableView(_:commit:forRowAt:) method of UITableViewDelegate.

                override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
                    if editingStyle == .delete {
                        tasks.remove(at: indexPath.row)
                        tableView.deleteRows(at: [indexPath], with: .fade)
                    }
                }
            

Implementing Completion Status Change

Set up to change the completion status when each task is tapped. Override the tableView(_:didSelectRowAt:) method to handle this.

                override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
                    tasks[indexPath.row].isCompleted.toggle()
                    tableView.reloadRows(at: [indexPath], with: .automatic)
                }
            

Data Saving and Loading

To ensure that the task list persists even after the app is closed, use UserDefaults to save and load data. Implement the following methods:

                func saveData() {
                    let encoder = JSONEncoder()
                    if let encoded = try? encoder.encode(tasks) {
                        UserDefaults.standard.set(encoded, forKey: "SavedTasks")
                    }
                }

                func loadData() {
                    if let savedTasks = UserDefaults.standard.object(forKey: "SavedTasks") as? Data {
                        let decoder = JSONDecoder()
                        if let loadedTasks = try? decoder.decode([Task].self, from: savedTasks) {
                            tasks = loadedTasks
                        }
                    }
                }
            

Conclusion

Now we have created a simple To-Do List app using Swift and UIKit. We learned how to use key UIKit components such as UITextField, UITableView, and UIButton, created a data model, and explored how to display and manipulate data using UITableViewDataSource and UITableViewDelegate. Through this process, we were able to deepen our basic understanding of iOS development.