Today we will learn how to make a simple custom tableview in ios using Xcode8 and swift 3

Steps 1:

  1. Create a new xcode project Lets say(CustomTableViewiniOSinSwift)
  2.  Now go to storyBoard and take on Label and a TableView.
  3. Now take a tableViewCell  from object Library and put it inside the TableView.
  4. Also take one Label and one image inside the contentView of the cell.

Screen Shot 2016-10-01 at 2.33.44 AM.png

  1. Now Create a new class of subclass UITableViewCell.

File- New – File- Cocoa  Touch Class

Screen Shot 2016-09-30 at 11.26.14 PM.png

 

Screen Shot 2016-09-30 at 11.26.31 PM.png

  1. Now change the TableView  cell class name to our custom cell that we just created.

 

Screen Shot 2016-10-01 at 2.36.57 AM.png

  1. Also give Cell Identifier name as Cell.

Screen Shot 2016-10-01 at 2.37.07 AM.png

  1. Make Proper IBOutlet connection for table Cell element.

import UIKit

class TableViewCell: UITableViewCell {

    @IBOutlet weak var cellImage: UIImageView!

    @IBOutlet weak var cellLabel: UILabel!

    override func awakeFromNib() {

        super.awakeFromNib()

        // Initialization code

    }

    override func setSelected(_ selected: Bool, animated: Bool) {

        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state

    }

}

9. Also make a connection for the tableView. Now we will take a array and write the dataSource methods for the tableView. I have taken a image named “Car.png”. You need to include one image in Your project.

import UIKit

class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!

    var tableArray :[String] = [“One”,“Two”,“Three”,“Four”,“Five”]

    let cellReusableIdentifier = “Cell”

    

    

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view, typically from a nib.

    }

    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

        // Dispose of any resources that can be recreated.

    }

    

    public func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat{

        return 100

    }

    

    public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int{

        return tableArray.count

    }

    

    

   internal func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell{

        

        let cell :TableViewCell = self.tableView.dequeueReusableCell(withIdentifier: cellReusableIdentifier) as! TableViewCell

        

        cell.cellLabel.text = tableArray[indexPath.row]

        cell.cellImage.image = UIImage(named :“car.png”)

        return cell

    }

}

9. Now run the Application and see the desired output.

Screen Shot 2016-10-01 at 2.42.12 AM.png

You can watch the whole thing on my Youtube channel also. This is my first video, So I know I am not that much good. So please share your views.

You can download the whole source code from here.

Do share if you like the content.

Happy Coding 🙂

Advertisements