Table view with text field in swift 3.0


Why I am creating this, every registration view I want to create the lot of the text fields and valid it each and every text field and I have to face the alignment problems. But, here I am not yet receiving any alignment problem and easy to get the values. Meanwhile, when keyboard hidden appeared easy move up and down the table views.

  • Create New Project.
  • Create TableView.
  • Create CustomTableviewCell which include text field.
  • Implement the table view delegate and data source.

Create New Project

Above the taskbar, we have an option to find “File -> New -> Project”. After, System shows a window to store the project and retrieve it through the location. Below, you get it from the screenshot.


Create TableView

In this project, you see the “Main.storyboard” which is used to create the views like user interface. You can use the storyboard to add the Table View and Table View cell. After drag and drop the delegate and data source for the Table View to the View controller. When you finish those processes. You should implement a TableView delegate and data source methods in the main view controller then create a custom Table View cell file.


Create CustomTableviewCell file.

In project left and side, we have the option to create a “New File..”. That option using to create the “New File”. After, the system shows the window to select the cocoa Touch and click the next button to save the file. Below, I have shown the screenshots.

After, you need to code in that “CustomTableViewCell.swift” file

import UIKit

class CustomTableViewCell: UITableViewCell {

    @IBOutlet var textLab:UITextField?   // drag and drop the textfield to tableview cell.

    override func awakeFromNib() {


        // Initialization code


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

        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state



Integrate the CustomTableViewCell file

In the identity inspector, you will select the cell in left side and type the custom class name in the class field in right side. I showed below. After drag and drop the “textLab” IBOutlet to file.


Implement the Table View Text Field code in the Main View Controller.

import UIKit

//here add the textfield delegate,tablevie delegate and data source for accessing the in-build functionality

class Login: UIViewController,UITextFieldDelegate,UITableViewDataSource, UITableViewDelegate {

    let animals: [String] = [“Test1”, “Test2”, “Test3”, “Test4”, “Test5”]

    override func viewDidLoad() {


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


    var allCellsText = [String?](repeating: nil, count:5)

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

        return animals.count


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

        let cell = tableView.dequeueReusableCell(withIdentifier: “cell”, for: indexPath as IndexPath) as! CustomTableViewCell

        cell.textLab?.delegate = self

        cell.textLab?.text = “”

        cell.textLab?.placeholder = animals[indexPath.row]

        cell.textLab?.autocorrectionType =

        cell.textLab?.autocapitalizationType = UITextAutocapitalizationType.none

        cell.textLab?.adjustsFontSizeToFitWidth = true;

        return cell


    func textFieldDidEndEditing(_ textField: UITextField) {

        let indexOf = animals.index(of:textField.placeholder!)


        if(textField.placeholder! == animals[indexOf!]){

            if( indexOf! <= (allCellsText.count1)){

            allCellsText.remove(at: indexOf!)


            allCellsText.insert(textField.text!, at: indexOf!)




    //delegate method

        func textFieldShouldReturn(_ textField: UITextField) -> Bool {           textField.resignFirstResponder()

        return true


        override func didReceiveMemoryWarning() {


        // Dispose of any resources that can be recreated.



I got the final output like this below.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s