iOS Table View Tutorial

Hello friends welcome to iOS Table View Tutorial. In the last tutorial we learnt about taking user input using Text Field. Today we will learn creating a simple Table View in iOS using Swift in Xcode 7. So lets begin this iOS Table View Tutorial.

What is Table View?

The name is little ambiguous for me 😛 As the same thing in Android is known as a ListView. So a Table View is one of the most common element in iOS apps and it is used to display list of data.

In the previous tutorials we did some simple things but today we will learn about Table View which is a bit more complex. Below you can see a simple Table View in iOS.

We will be creating the same in this tutorial. So lets start our iOS Table View Tutorial.

So lets start our iOS Table View Tutorial. We will start with creating a new Xcode project. Start following these steps.

Creating a new Xcode Project

Launch Xcode and create a new project.

Now you need to select Single View App and click on next.

Now give your app a name, I have given TableViewExample. You can put your Organization Name and Identifier or you can also leave the defaults value. After filling the values click on Next again.

Now you will be asked to select a location to store your project. You can choose any location and then click on create.

Now your project will be loaded.

Now click on Main.storyboard and unmark Use Size Classes.

Adding Table View Controller to Storyboard

Click on Main.storyboard.

Here you can see your current View Controller. Just click on it and Press Delete to delete this View Controller.
Now from the left find Table View Controller.

After dragging the Table View Controller to story board you will see your Table View Controller.

Here you need to mark your Table View Controller as Initial View Controller. (See the above image for explanation).
Now click on ViewController.swift and modify the code as follow.

//
//  ViewController.swift
//  TableViewExample
//
//  Created by Belal Khan on 30/07/16.
//  Copyright © 2016 Belal Khan. All rights reserved.
//

import UIKit

//Changed the class name to TableViewController
//and it is inheriting the class UITableViewController
class TableViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

We haven’t done much we just changed the class name to TableViewController and it is inheriting the class UITableViewController.
Now in identity inspector we will add our class.

The above image explaining what you need to do. Basically we are adding our class to our Table View Controller.
Now we need to assign the cell an identifier.

You can put any name in identifier, just remember it is case sensitive.
Now we will add some data to our Table View.

Adding Data to Table View

Come inside ViewController.swift and modify the code as follow.

//
//  ViewController.swift
//  TableViewExample
//
//  Created by Belal Khan on 30/07/16.
//  Copyright © 2016 Belal Khan. All rights reserved.
//

import UIKit

//Changed the class name to TableViewController
//and it is inheriting the class UITableViewController
class TableViewController: UITableViewController {

    //created a string array to display on table view
    var tableItems = ["Swift","Python","PHP","Java","JavaScript","C#"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    
    //this method will populate the table view
    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let tableRow = tableView.dequeueReusableCellWithIdentifier("TableRow") as UITableViewCell!
        
        //adding the item to table row
        tableRow.textLabel?.text = tableItems[indexPath.row]
        
        return tableRow
    }
    
    
    //this method will return the total rows count in the table view
    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return tableItems.count
    }


}

Now try executing your application.

Bingo! its working absolutely fine.
If you are having confusions, you can download the source code from the below link.

[sociallocker] iOS Table View Example (1020 downloads) [/sociallocker]

So thats all for this iOS Table View Tutorial friends. Feel free to ask your queries by leaving your comments. Thank You 🙂

iOS Table View Tutorial – Creating TableView in Xcode 7 using Swift

What is Table View?