Custom TableView in iOS Swift

Datetime:2016-08-23 04:14:51          Topic: Swift           Share

In this post we will see how we can create custom tableview cells in Swift.

Let’s Start…

Create a new project and name it the way you like.

For creating Custom TableView we have to do below things

1. Drag a tableview and Drag a UITableView Cell into it.

2. For our example – Drag and image and a label into the Prototype Cell.

Now create a new File and name it “CustomTableCell” and is should extend UITableViewCell.

CustomTableCell.swift

import UIKit

class CustomTableCell: UITableViewCell {
    
    @IBOutlet weak var thumbnailImage: UIImageView!
    @IBOutlet weak var headingLabel: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()
    }
    
    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
    
}

Here we have two members – a Label and and ImageView.

Open your storyboard and Click the Prototype Cell and in the attributes window, name the class as “CustomTableCell” and Identifier as “Cell” .

Make sure you link the variables in the Prototype Cell to the“CustomTableCell”Class variables.

Now the Model Class for Data in each row in the TableView.

Create a new file named“ListData”.

ListData.swift

import Foundation

class ListData {
    
    let name : String
    let thumbnail : String
    
    init(name : String, thumbnail : String) {
        self.name = name
        self.thumbnail = thumbnail
    }
    
}

Now the ViewController that implements the TableView.

ViewController.swift

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    @IBOutlet weak var tableView: UITableView!
    var allListData : [ListData] = [];
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.tableView.separatorStyle = UITableViewCellSeparatorStyle.None
        
        
        var listData = ListData(name: "Apple 1", thumbnail: "thumbnail.png")
        allListData.append(listData)
        listData = ListData(name: "Apple 2", thumbnail: "thumbnail.png")
        allListData.append(listData)
        listData = ListData(name: "Apple 3", thumbnail: "thumbnail.png")
        allListData.append(listData)
        listData = ListData(name: "Apple 4", thumbnail: "thumbnail.png")
        allListData.append(listData)
        listData = ListData(name: "Apple 5", thumbnail: "thumbnail.png")
        allListData.append(listData)
        listData = ListData(name: "Apple 6", thumbnail: "thumbnail.png")
        allListData.append(listData)
        listData = ListData(name: "Apple 7", thumbnail: "thumbnail.png")
        allListData.append(listData)
        listData = ListData(name: "Apple 8", thumbnail: "thumbnail.png")
        allListData.append(listData)
        listData = ListData(name: "Apple 9", thumbnail: "thumbnail.png")
        allListData.append(listData)
        
        self.tableView.dataSource = self
        self.tableView.delegate = self
        
    }
    
    func numberOfSectionsInTableView(tableView: UITableView) -> Int{
        return 1;
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) ->  Int {
        return allListData.count
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) ->  UITableViewCell{
        
        let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! CustomTableCell
        let entry = allListData[indexPath.row]
        let image = UIImage(named: entry.thumbnail)
        cell.thumbnailImage.image = image
        cell.headingLabel.text = entry.name
        return cell
        
    }

}

Make sure you have a thumbnail.png image in the resources.





About List