iOS Tutorials: Creating a TableView using UITableViewController

This is a simple tutorial that uses UITableViewController instead of implementing TableView in a View Controller. This process is a lot faster and saves time.

On your Xcode, go to File > New > Project to create a new blank project. Go ahead and give your project any name. For mine, I put TableView. You could go ahead and put in the required information as your own information.

Then go to File > New > File > Cocoa Touch Class. We are going create a TableViewController. The benefit of doing this could save us a lot of time in writing the codes.

You should be on this page. Give your class a name. For mine, I just named it TableViewController. Make sure that it is the subclass of UITableViewController (this is important)

Now, go to Main.storyboard, this is where you will see different layout that will appear on the iOS devices. On the bottom right, search for Table View Controller and drag it out on the layout. You will see that there is two screen on the layout. The left screen represent Table View Controller and the right screen represent View Controller. You will notice that there is an arrow pointing at the View Controller, that arrows tells the iOS devices that this screen should first appear on the device when the app is open. Now drag the arrow to Table View Controller. We don’t need View Controller, so we are going to delete it. The easiest and fastest way is to click on the View Controller and press delete.

Your Main.storyboard should now look like this. If you have delete the View Controller along with the arrow. Dont worry. Look on the right bar where you see many different configuration,  checked Is Initial View Controller. That will then bring back the arrow.

The next step is essential which is to assign that layout to the newly created TableViewController (which is what I name), if you name it something else, put that in. This is basically linking the layout to the codes. If you miss out this step, you wont see any data.

On the below, click on the label to extend the document outline if you dont see the document outline. If you do, thats fine. Basically the document outline contains everything on Main.storyboard.

Look to the right where you could see Identifier and name it cell. On the document outline, you should notice that it would change its name from Table View Cell to cell

Now lets go to the Coding section and start coding. Your code should like this for it to works. We are only using several function this tutorial. You may ignore some of the codes that are not used here or experiment them yourself.

import UIKit
 
class TableViewController: UITableViewController {
 
    var data = ["Apple", "Apricot", "Banana", "Blueberry", "Cantaloupe", "Cherry",
                  "Clementine", "Coconut", "Cranberry", "Fig", "Grape", "Grapefruit",
                  "Kiwi fruit", "Lemon", "Lime", "Lychee", "Mandarine", "Mango",
                  "Melon", "Nectarine", "Olive", "Orange", "Papaya", "Peach",
                  "Pear", "Pineapple", "Raspberry", "Strawberry"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
 
 
    // MARK: - Table view data source
    
 
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }
 
 
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        
        cell.textLabel?.text = data[indexPath.row]
        return cell
    }
 
 
}

When you are done, start building your app by hitting CMD + R and it should look like below

In case if you have problem, feel free to download the source code from GitHub

  • Article By :
    Founder of DaddyCoding. Studied Computer Science, Information System and Information Technology at BYU-Hawaii. Currently spending most of my time researching and learning on helping to expose making iOS apps.

Random Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*