Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UITableView example for Swift

I've been working with Swift and iOS for a number of months now. I am familiar with many of the ways things are done but I'm not good enough that I can just write things up without looking. I've appreciated Stack Overflow in the past for providing quick answers to get me back on track with topics I've gotten rusty on (for example, AsyncTask Android example).

iOS's UITableView is in this category for me. I've done them a few times, but I forget what the details are. I couldn't find another question on StackOverflow that just asks for a basic example and I'm looking for something shorter than many of the tutorials that are online (although this one is very good).

I am providing an answer below for my future reference and yours.

like image 376
Suragch Avatar asked Oct 20 '15 10:10

Suragch


People also ask

What is UITableView in Swift?

A view that presents data using rows in a single column. iOS 2.0+ iPadOS 2.0+ Mac Catalyst 13.1+ tvOS 9.0+


1 Answers

The example below is an adaptation and simplification of a longer post from We ❤ Swift. This is what it will look like:

enter image description here

Create a New Project

It can be just the usual Single View Application.

Add the Code

Replace the ViewController.swift code with the following:

import UIKit class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {          // Data model: These strings will be the data for the table view cells     let animals: [String] = ["Horse", "Cow", "Camel", "Sheep", "Goat"]          // cell reuse id (cells that scroll out of view can be reused)     let cellReuseIdentifier = "cell"          // don't forget to hook this up from the storyboard     @IBOutlet var tableView: UITableView!          override func viewDidLoad() {         super.viewDidLoad()                  // Register the table view cell class and its reuse id         self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellReuseIdentifier)                  // (optional) include this line if you want to remove the extra empty cell divider lines         // self.tableView.tableFooterView = UIView()          // This view controller itself will provide the delegate methods and row data for the table view.         tableView.delegate = self         tableView.dataSource = self     }          // number of rows in table view     func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {         return self.animals.count     }          // create a cell for each table view row     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {                  // create a new cell if needed or reuse an old one         let cell:UITableViewCell = self.tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as UITableViewCell!                  // set the text from the data model         cell.textLabel?.text = self.animals[indexPath.row]                  return cell     }          // method to run when table view cell is tapped     func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {         print("You tapped cell number \(indexPath.row).")     } } 

Read the in-code comments to see what is happening. The highlights are

  • The view controller adopts the UITableViewDelegate and UITableViewDataSource protocols.
  • The numberOfRowsInSection method determines how many rows there will be in the table view.
  • The cellForRowAtIndexPath method sets up each row.
  • The didSelectRowAtIndexPath method is called every time a row is tapped.

Add a Table View to the Storyboard

Drag a UITableView onto your View Controller. Use auto layout to pin the four sides.

enter image description here

Hook up the Outlets

Control drag from the Table View in IB to the tableView outlet in the code.

Finished

That's all. You should be able run your app now.

This answer was tested with Xcode 9 and Swift 4


Variations

Row Deletion

You only have to add a single method to the basic project above if you want to enable users to delete rows. See this basic example to learn how.

enter image description here

Row Spacing

If you would like to have spacing between your rows, see this supplemental example.

enter image description here

Custom cells

The default layout for the table view cells may not be what you need. Check out this example to help get you started making your own custom cells.

enter image description here

Dynamic Cell Height

Sometimes you don't want every cell to be the same height. Starting with iOS 8 it is easy to automatically set the height depending on the cell content. See this example for everything you need to get you started.

enter image description here

Further Reading

  • iOS & Swift Tutorial: UITableViewController
  • iOS Table View Tutorial Using Swift
like image 171
Suragch Avatar answered Sep 16 '22 14:09

Suragch