Gallery
Share
Explore

Lab Book Constructing the Simplest iOS App with UITableView and UITableViewCell

Lab Book: Constructing the Simplest iOS App with UITableView and UITableViewCell
Introduction: In this lab book, we will learn how to create a simple iOS app with a UITableView and UITableViewCell. UITableView is a powerful and flexible class for displaying lists of data in iOS apps. It is commonly used to display data in a table format, with each row representing a single item of data. UITableViewCell is a subclass of UIView that is used to display the content of each row in a UITableView.
Prerequisites:
A Mac computer running macOS 10.15 or later
Xcode 12 or later installed on your Mac
Basic knowledge of Swift programming language
Step 1: Create a new Xcode project
Open Xcode and select "Create a new Xcode project" from the welcome screen.
Choose "App" under the "iOS" tab and click "Next".
Enter a product name for your app, select a team, and choose a language (Swift).
Choose a location to save your project and click "Create".
Step 2: Add a UITableView to your app
Open the Main.storyboard file in your project.
Drag a UITableView from the Object Library onto the canvas.
Resize the table view to fill the entire screen.
Connect the table view to your view controller by control-dragging from the table view to the view controller icon in the storyboard scene.
Choose "delegate" and "dataSource" from the pop-up menu.
Step 3: Create a custom UITableViewCell
Create a new file in your project by selecting "File" -> "New" -> "File" from the menu bar.
Choose "Cocoa Touch Class" under the "iOS" tab and click "Next".
Enter a class name for your custom table view cell (e.g. "CustomTableViewCell").
Choose "UITableViewCell" as the subclass and click "Next".
Choose a location to save your file and click "Create".
Open the Main.storyboard file in your project.
Drag a UITableViewCell from the Object Library onto the canvas.
Resize the table view cell to your desired size.
Control-drag from the table view cell to the CustomTableViewCell class in the project navigator to create an outlet for the cell's label.
Repeat step 9 for any other UI elements you want to add to the cell.
Step 4: Populate the UITableView with data
Open the ViewController.swift file in your project.
Add the following code to the class to define an array of data to display in the table view:
let data = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]

Add the following code to the class to implement the UITableViewDataSource protocol:
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return data.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "CustomTableViewCell", for: indexPath) as! CustomTableViewCell
cell.label.text = data[indexPath.row]
return cell
}

Open the Main.storyboard file in your project.
Select the table view cell in the canvas.
In the Attributes Inspector, set the "Identifier" field to "CustomTableViewCell".
Run your app in the simulator or on a device to see the table view populated with data.
Conclusion: In this lab book, we learned how to create a simple iOS app with a UITableView and UITableViewCell. We created a custom table view cell, populated the table view with data, and implemented the UITableViewDataSource protocol to display the data in the table view. With this knowledge, you can now create more complex iOS apps with dynamic lists of data.
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.