Custom TableView in iOS Swift

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.