[Swift] Make a Table View in IOS by using swift code

4:00:00 AM 0 Comments

Hi,

I would share my little experiences on how to make a Table View in ios by using their latest programming language, Swift.

Create a new project

Just simply open Xcode and create a new project based on your needs, so there are not much things to do here. In this tutorial, we are doing in the single view application.

Create a table

Normally, you can have a Table View by 2 ways:
  1. - A single Table View Controller.
  2. - A View Controller that contains a Table View Controller.
Both of them are the same, the only different here is that you may have to declare a UITableView @IBOutlet in the second one.

So, search for Table View Controller in the bottom right of Xcode and drag it to your storyboard, right into the default View Controller. After that you have put the Table View Cell into your Table View Controller. 

* Go to View -> Utilities -> Show Object Library, in case Xcode don't open it.

Declare @IBOutlet for Table View Controller

Add this one above viewDidLoad() @IBOutlet weak var tableView: UITableView!

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    @IBOutlet weak var tableView: UITableView!

    ...

}

Go into viewDidLoad() function and add those two lines below super.viewDidLoad().

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

Switch to Main Storyboard and drag the recent created tableView to the Table View in View Controller.

Create a UITableViewCell 

We need to create a new swift file that inherit the UITableViewCell, in this class we will defines table cell, such as label, textfield or any other controls you put in here.

So create a new swift file in project and name it "TableViewCell"

class TableViewCell: UITableViewCell {
    @IBOutlet weak var nameLabel: UILabel!
}

Go to Storyboard -> select Table View Cell and change custom class to "TableViewCell". Then change the Identifier to "TableViewCell" or any name you want. 

Drag the nameLabel @IBOutlet to the label in cell.

Conform to UITableViewDelegate and UITableViewDataSource protocol.

After you have conformed two protocols of UITableView, implementing the protocol's functions. There are a few functions that we mostly use in TableView.

       //Set the number of rows in each section
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
    }

       //Set the number of sections in table
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        
    }

       //Set up the table cell here
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
  
    }

Before implement those functions, we need a sample data to test our table. So let's declare a sample array:

let tableData = ["row1", "row2", "row3"]

Then implementing the following functions of UITableView and our ViewController.swift will be looked like this:

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    @IBOutlet weak var tableView: UITableView!
    let tableData = ["row1", "row2", "row3"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        tableView.delegate = self
        tableView.dataSource = self
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    // 1
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return tableData.count
    }
    
    // 2
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }
    
    // 3
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("TableViewCell", forIndexPath: indexPath) as! TableViewCell
        cell.nameLabel.text = tableData[indexPath.row]

        return cell
    }
}
  1. - The number of rows in section will be equal to number of elements in tableData array.
  2. - We will use only 1 section and there is no section header.
  3. - This function is used for setting up each row in table view. In this example, basically, we have just to set the text of nameLabel to corresponding tableData item. We are working with 1 section so just get the row number directly to access the item in tableData. That's all.
* All of this functions are usually called when UITableView is running reloadData().

Run it

Hit the run button, wait it for compiling and see what's happening on your screen. Run on simulator or real devices is up to you.



OK, let's add another function to handle the click on Table Cell

    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        
    }

This function allow you to do anything you want, when a cell is being clicked. So our ViewController.swift now will be like this:

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    @IBOutlet weak var tableView: UITableView!
    let tableData = ["row1", "row2", "row3"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        tableView.delegate = self
        tableView.dataSource = self
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    // 1
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return tableData.count
    }
    
    // 2
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }
    
    // 3
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("TableViewCell", forIndexPath: indexPath) as! TableViewCell
        
        cell.nameLabel.text = tableData[indexPath.row]
        
        return cell
    }
    
    // 4
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        // Do anything you want here
    }
}

In case you missed anything, try to have a look in this source code.

Don't hesitate to point out any mistakes in this tutorial. I'm not a super expert so I will try to fix it as soon as possible. So we can learn from each other :).

 Feel free to share it if you find it useful.

 Thanks




Unknown

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard. Google

0 comments:

Subscribe to: Post Comments (Atom)