How to create a basic tableview in iOS swift in XCode

How to create a basic tableview in iOS swift:

In this post, we will learn how to create one basic tableview in iOS using swift. Our program will show one Table View and load some static data on it. This post will give you the basic idea on how to create table view in iOS and how it works.

Create a project in XCode:

Open you XCode, go to File -> New -> Project.
Select App and click Next

Enter a product name and create the project.

Create tableview UI:

By default, we get one Main.storyboard and one ViewController class as the default viewcontroller.

Open your Main.storyboard file, click on the + button on top right corner of your XCode. It will show you a list of items. Search for Table View, drag and drop it on ViewController screen.

Add 0 margins constraints to all sides of this Table View.

Click on the Add Editor and add one new editor. Open the ViewController in this right editor

Drag the tableview to the ViewController and create one new IBOutlet variable tableview :

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

Edit ViewController:

Open the ViewController file and add the below code :


import UIKit

class ViewController: UIViewController {

    let data = ["sun","mon","tues","wed","thurs","fri","sat"]

    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableView.dataSource = self
    }
}

extension ViewController: UITableViewDataSource{
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: UITableViewCell.CellStyle.subtitle, reuseIdentifier: "identifier")
        cell.textLabel?.text = data[indexPath.row]
        return cell
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }

    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
}

Explanation:

Here,

data is a list of strings that will be loaded in the tableview.
In viewDidLoad, we are setting the dataSource of the table view as self. It indicates that the current viewcontroller is responsible for the data of the tableview, i.e. it will decide how many rows to load, how many sections this table view has and what cell we need to load for a specific row.
The extension of ViewController is used as UITableViewDataSource. Here, we have three methods implemented.
- numberOfRowsInSection returns how many rows we are shwing in the tableView. It is same as the number of items we have in the array data
- numberOfSections returns the number of sections for the table view. It is 1 for this example.
- cellForRowAt is used to return one table view cell. We are creating one object of UITableViewCell and returning its value. We can also load custom classes with different UIs in the table view cell.

If you run the app, it will look as like below:

I hope that you got the basic understanding of Table View and how to load it in iOS using swift. In upcoming tutorials, I will show you how to create custom UI tableview cells.

You might also like:

Journey with Code and DesignCodeVsColor on Twitter About
Privacy Policy
T&C
Contact