iOS Dev. #1 – UITableView Tutorial & Design Swift Xcode

///iOS Dev. #1 – UITableView Tutorial & Design Swift Xcode

iOS Dev. #1 – UITableView Tutorial & Design Swift Xcode

Full Code: UITableView

Swift iOS Development UITableView Tutorial & Implementation

In this tutorial, we will be looking at iOS Development in Swift. The particular topic we will be covering is UITableViews and how to instantiate them through a UITableViewController as well as a ViewController. This is an extremely important concept which you will be using every single time you create a UITableView in your applications. Needless to say, they are implemented very frequently.

Where are UITableViews used

A table is simply a collection of data. It is nothing more but a UI display of certain information or data. There are different types of tables; some are dynamic and others are static. Dynamic tables will update with the data; static ones will display a constant set of data. A good example of a dynamic table would be the text messages you can see on popular social media applications. A static table would be a settings and controls menu of your application.

Hardware & Software for the Project

We will be using Xcode 7.3.1 for this tutorial. Although the Xcode 8 beta is available, it is preferable to stick to what works at this point.

UITableViewController Implementation

The simplest way to get started with UITableViews is by implementing a UITableViewController.

1. Drag a Table View Controller onto your screen. Make sure to set it as your “Initial View Controller” in the attributes inspector.
UITableViewController Swift XCode

2. Add a New File to your project. Make sure that you’ve added a UITableViewController “subclass”.

3. Lastly, select the “Identity Inspector” of your UITableViewController and select the Class that you’ve just created. This will tell the compiler that this particular screen is controlled by the file you just created.
UITableViewController Swift XCode

4. Your “TableViewController1.swift” file will contain all the functions you will need to implement in order to get a table displayed. However, before we dive into them, let’s create an object which will be displayed in each cell. In other words, this will be out Model layer.

Object Implementation

Keep in mind that the object we are creating is for testing purposes only. You can make yours as simple or as complex as you wish.

1. Create a new Swift file and name is Object1 (or whatever you prefer).

2. Implement the following code:
import UIKit
class Object1: NSObject {
private var _name: String
private var _value: Int
var name: String {
get {
return _name
var value: Int {
get {
return _value
init(name: String, value: Int) {
_name = name
_value = value

3. Understanding what is going on in the Object class is very important. It is a simple class which implements two variables. The first one is of type String and the other of type Int. They are both hidden behind private variables and are “get” only from outside of the class. The init or the constructor of the class, simply assigns each parameter to the correct value.

Getting back to the UITableViewController implementation

1. Create the Model structure which will be displayed in the table.
UITableView Data Model Implementation
The code creates an array which will hold the Object1 instances followed by the ViewDidLoad() function which will take care of populating our array. This is done through a simple for in loop going from 1 to 5. Each object is instantiated based on the index and appended to the table.

2. Implement the numberofSectionsInTableView & numberOfRowsInSection functions.
These two functions are responsible for the number of sections and the number of rows in each section (as per their name). We will be using a single section which contains x rows where x is the number of objects we have in our array. This is implemented as follows:
UITableView Data Model Implementation
The code is fairly straight forward. We are returning 1 for the number of sections and the number of objects for the “numberofrows” by counting the array size.

3. Populating and returning the cell.
We have our object, but we still need to properly link it to the UITableViewCell element of our controller. The following code does just that:
Each cell will be created with a “TableCell” identifier. It is important to go back to our Storyboard and to add this to our cell object, so let’s do that right now!
Now back to our code… We need to populate each cell with the data of our object. Therefore, we create an item which references an Object1 item appropriate for the row of our table. The textLabel of the cell is then set to the appropriate name of the object.

UITableViewController Final Outcome

If you implemented the code above, you should be able to run the application and see the following result. It’s not the prettiest table, but a great first step in the right direction.
UITableViewController Simulator Test

UIViewController Implementation

Now that you’ve learned to work with a UITableViewController, you should tackle the UIViewController implementation.

Key differences
  • UITableViewDelegate & UITableViewDataSource need to be implemented.
    Your class will need to implement the two protocols which are implemented in a Table View. You can simply added them after your class inheritance as shown below:
    class ViewController1: UIViewController, UITableViewDelegate, UITableViewDataSource {
  • An IBOutlet needs to be instantiated for the TableView Object.
    You will need to control drag from your TableView onto the controller code and create an outlet for the TableView like so:
    @IBOutlet weak var tableView: UITableView!
  • Specifying the delegate and datasource for the TableView.
    You must tell the controller that it will be handling the delegate as well as the data source protocols for the table to work. This code inside of the ViewDidLoad() method will accomplish just that:
    tableView.dataSource = self
    tableView.delegate = self
  • Contraints on the Storyboard.
    You will need to make sure that the TableView you’ve implemented is positioned correctly on your view. You may stretch it all the way our position it at the bottom of the view. The sky is the limit!

UIViewController Final Outcome

If you compile and run the program at this point, you should have an identical UITableView as you had on the first implementation.


We went over the UITableViewController and UIViewController implementations. They allowed us to create structures for TableViews and display data inside of them. I hope that you’ve learned a lot from this tutorial and as always, make sure to comment some of the places you will be suing these table!

Thank you for reading & watching,
– Vlad Romanov, EEEnthusiast

By | 2016-09-26T12:39:33-07:00 September 26th, 2016|iOS Development, Tutorials|0 Comments

About the Author:

Welcome to My name is Vlad, I'm an Electrical Engineer and I love to build and teach. I graduated in 2013 and have tried my best to share my electrical knowledge and experience with viewers and readers from all over the world. You can find me on my personal site or LinkedIn!

Leave A Comment

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Show Buttons
Hide Buttons