Hello. In this post, we will explore how to develop an iPhone app using the Swift language with SwiftUI. Specifically, I will provide a detailed explanation of creating a to-do list flow using UITableViewController. We will compare the differences and use cases between SwiftUI and UIKit, and help you understand through hands-on practice.<\/p>\n
SwiftUI is Apple’s new UI framework that helps you create user interfaces more intuitively. SwiftUI adopts a declarative programming approach, which is different from how you construct a UI using the traditional UIKit.<\/p>\n
In UIKit, you manage each screen using ViewController, and you have to connect UIKit’s basic components directly in code or storyboard. In contrast, SwiftUI allows you to declare ‘views’ as constants and compose the screen by combining them. This means you can easily manage UI state changes.<\/p>\n
SwiftUI simplifies state management by providing various property wrappers like @State, @Binding, and @ObservedObject. These features improve upon the complex logic previously required in UIKit, such as using Delegate patterns or NotificationCenter as needed.<\/p>\n
Let\u2019s set up the project now. Open Xcode and create a new iOS app project.<\/p>\n
Now, let’s look into how to create a to-do list using SwiftUI. In this step, the to-do list will be managed as an array.<\/p>\n
First, we will define the data model for the to-do list. We create a simple structure as below.<\/p>\n
\nstruct Task: Identifiable {\n var id = UUID()\n var title: String\n var isCompleted: Bool\n}<\/code>\n <\/pre>\n3.2 Adding a To-Do List Array<\/h3>\n
Now, we create an array that includes multiple to-do items.<\/p>\n
\nclass TaskStore: ObservableObject {\n @Published var tasks: [Task] = []\n}<\/code>\n <\/pre>\n3.3 Creating the View<\/h3>\n
The view for the to-do list can be created using the List structure to display each task. Write the code as follows.<\/p>\n
\nimport SwiftUI\n\nstruct ContentView: View {\n @ObservedObject var taskStore = TaskStore()\n\n var body: some View {\n NavigationView {\n List {\n ForEach(taskStore.tasks) { task in\n HStack {\n Text(task.title)\n Spacer()\n if task.isCompleted {\n Image(systemName: \"checkmark\")\n }\n }\n }\n }\n .navigationBarTitle(\"To-Do List\")\n .navigationBarItems(trailing: Button(action: {\n \/\/ Logic to add a task\n }) {\n Image(systemName: \"plus\")\n })\n }\n }\n}<\/code>\n <\/pre>\n3.4 Adding a Task<\/h3>\n
We will implement an add button so that users can add tasks. We will add an Alert to prompt the user for input.<\/p>\n
\n@State private var showingAddTask = false\n@State private var newTaskTitle = \"\"\n\nButton(action: {\n showingAddTask.toggle()\n}) {\n Image(systemName: \"plus\")\n}\n.alert(isPresented: $showingAddTask) {\n Alert(title: Text(\"Add New Task\"),\n message: Text(\"Please enter the task title.\"),\n primaryButton: .default(Text(\"Add\")) {\n let newTask = Task(title: newTaskTitle, isCompleted: false)\n taskStore.tasks.append(newTask)\n newTaskTitle = \"\"\n },\n secondaryButton: .cancel())\n}\n.textFieldAlert(\"Task Title\", text: $newTaskTitle)<\/code>\n <\/pre>\n4. Creating a To-Do List with UITableViewController<\/h2>\n
Now, let’s implement the same functionality using UITableViewController with UIKit. We will include UIKit in the project and set up the UITableView.<\/p>\n
4.1 Creating the UITableViewController Class<\/h3>\n\nclass TaskListViewController: UITableViewController {\n var tasks: [Task] = []\n \n \/\/ Initialize Data in viewDidLoad\n override func viewDidLoad() {\n super.viewDidLoad()\n \/\/ Add default data\n tasks.append(Task(title: \"Example Task\", isCompleted: false))\n }\n \n override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {\n return tasks.count\n }\n\n override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {\n let cell = tableView.dequeueReusableCell(withIdentifier: \"cell\", for: indexPath)\n let task = tasks[indexPath.row]\n cell.textLabel?.text = task.title\n return cell\n }\n}<\/code>\n <\/pre>\n4.2 Setting Up Table View Cells<\/h3>\n
To set up the table view cells, we register a UITableViewCell and set the delegate and datasource.<\/p>\n
\noverride func viewDidLoad() {\n super.viewDidLoad()\n tableView.register(UITableViewCell.self, forCellReuseIdentifier: \"cell\")\n}\n<\/code><\/pre>\n4.3 Adding a Task<\/h3>\n
As we used an Alert in the SwiftUI app, we can use UIAlertController to receive user input in UIKit.<\/p>\n
\n@objc func addTask() {\n let alert = UIAlertController(title: \"Add New Task\", message: \"Please enter the task title.\", preferredStyle: .alert)\n alert.addTextField()\n \n let addAction = UIAlertAction(title: \"Add\", style: .default) { [weak self] _ in\n guard let title = alert.textFields?.first?.text else { return }\n let newTask = Task(title: title, isCompleted: false)\n self?.tasks.append(newTask)\n self?.tableView.reloadData()\n }\n \n alert.addAction(addAction)\n alert.addAction(UIAlertAction(title: \"Cancel\", style: .cancel))\n present(alert, animated: true)\n}<\/code>\n <\/pre>\n5. Conclusion<\/h2>\n
In this post, we explored the process of creating a to-do list app using SwiftUI and UIKit. SwiftUI offers greater intuition in UI composition and simplified state management, providing many conveniences for developers. Both UIKit and SwiftUI have their advantages, so it’s important to choose the appropriate framework based on the situation.<\/p>\n
Thank you for reading this far, and if you have any additional questions or need assistance, please feel free to leave a comment.<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"