Friday, February 10, 2017

How to Create TableView Example Using Swift Language

No comments :

Create a new project

Open Xcode 6, create a new “Single Page Application” and select Swift as the programming language.

Add a table view property

Open the ViewController.swift class and add a new tableview instance variable below the class declaration.
    @IBOutlet
    var tableView: UITableView!
The @IBOutlet attribute makes the tableView property visible in Interface Builder.

Conform to the TableView Delegate and DataSource protocols

To conform to the UITableViewDelegate and UITableViewDataSource protocol just add them seperated by colons afterUIViewController in the class declaration. This was a bit confusing at first but the new protocol syntax is cleaner.
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    ...

}
After that we need to implement the tableView(_:numberOfRowsInSection:)tableView(_:cellForRowAtIndexPath:) and
tableView(_:didSelectRowAtIndexPath:) methods in the ViewController class and leave them empty for now
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    ...

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 0
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        return UITableViewCell()
    }

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

    }

}

Add a table view in your view controller

Search in the componet library(It should be in the lower right corener) for Table View and then drag and drop it on the view.
Dragging the table view

Connect the Interface Builder Outlets

Connect the referencing, dataSource and delegate outlets.
We can connect the respective outlets using interface builder by right clicking on the table view and dragging each outlet on the view controller.
Connecting the interface outlets

Register the cell class

In the viewDidLoad method call the registerClass(_:forCellReuseIdentifier:). Tip: to get the class use the class name followed by .self
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    ...

    override func viewDidLoad() {
        super.viewDidLoad()

        self.tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "cell")
    }

    ...

}

Add some data to display

Add a property called items as an Array of Strings and set some values
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    var items: [String] = ["We", "Heart", "Swift"]

    ...

}

Set the number of rows

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    ...

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.items.count;
    }

    ...

}

Create the cell

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    ...

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        var cell:UITableViewCell = self.tableView.dequeueReusableCellWithIdentifier("cell") as UITableViewCell

        cell.textLabel?.text = self.items[indexPath.row]

        return cell
    }

    ...

}

Handle cell selection

Another new thing in Swift is String Interpolation that let’s you add arbitrary code inside a string.
Some examples:
var one = "\(1)" // "1"
var two = "\(1 + 1)" // "2"

var name = "Andrei Puni"
println("my name is \(name) and I heart Swift") // will print "my name is Andrei Puni and I heart Swift"
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    ...

    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        println("You selected cell #\(indexPath.row)!")
    }

    ...

}
By now your ViewController class should look like this:
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource 
{
    @IBOutlet
    var tableView: UITableView
    var items: [String] = ["I", "Love", "Swift"]

    override func viewDidLoad() {
        super.viewDidLoad()

        self.tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "cell")
    }

//MARK:- TABLE VIEW METHODS
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.items.count;
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        var cell:UITableViewCell = self.tableView.dequeueReusableCellWithIdentifier("cell") as UITableViewCell

        cell.textLabel?.text = self.items[indexPath.row]

        return cell
    }

    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        print("I selected cell #\(indexPath.row)!")
    }
}
If you haven’t skipped any steps you should be able to run the app and see something similar to:
A simple table view using iOS 8 and Swift Programming language







TableView Without Custom cell Source Code :


import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource
{
    @IBOutlet var tableView: UITableView!
    
    var items: [String] = ["I", "Love", "Swift"]
    
    override func viewDidLoad() 
{
        super.viewDidLoad()
        
        self.tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "cell")
    }
    
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int
    {
        return self.items.count;
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
    {
        var cell:UITableViewCell = self.tableView.dequeueReusableCellWithIdentifier("cell") as UITableViewCell
        
        cell.textLabel?.text = self.items[indexPath.row]
        
        return cell
    }
    
    func tableView(tableView: UITableView!, didSelectRowAtIndexPath indexPath: NSIndexPath!)
    {
        print("I selected cell #\(indexPath.row)!")
    }

}

No comments :

Post a Comment