Adding a text field to a UITableview Cell

Question

Am new to Ios programming with swift 2.2

What am trying to achieve is inserting two text fields in a uitableviewcell or uitableviewcells

for example the tex

Answer 1

If you want to do it entirely from code:

import UIKit

struct MatchInfo {
    var teamA: String
    var teamB: String
}

class ViewController: UIViewController, UITableViewDataSource {
    @IBOutlet weak var tableView: UITableView!

    var matches = [MatchInfo]()

    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableView.dataSource = self

        // Add some data
        matches.append(MatchInfo(teamA: "Panthers", teamB: "Broncos"))
        matches.append(MatchInfo(teamA: "Bucaneers", teamB: "Falcons"))
        matches.append(MatchInfo(teamA: "Vikings", teamB: "Titans"))
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }


    // MARK: -
    // MARK: Table View Data Source Delegate
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return matches.count
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("myCell") ?? makeCell()

        let textFieldA = cell.viewWithTag(1) as! UITextField
        let textFieldB = cell.viewWithTag(2) as! UITextField

        let row = indexPath.row
        textFieldA.text = matches[row].teamA
        textFieldB.text = matches[row].teamB

        return cell
    }

    func makeCell() -> UITableViewCell {
        let textFieldA = UITextField(frame: CGRectZero)
        let textfieldB = UITextField(frame: CGRectZero)

        textFieldA.tag = 1
        textfieldB.tag = 2
        [textFieldA, textfieldB].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
            $0.borderStyle = .RoundedRect
        }

        let vsLabel = UILabel(frame: CGRectZero)
        vsLabel.text = "vs."
        vsLabel.translatesAutoresizingMaskIntoConstraints = false

        let cell = UITableViewCell(style: .Default, reuseIdentifier: "myCell")
        [textFieldA, textfieldB, vsLabel].forEach { cell.contentView.addSubview($0) }

        // Layout the elements
        let views = ["A": textFieldA, "B": textfieldB, "vs": vsLabel]
        let c1 = NSLayoutConstraint.constraintsWithVisualFormat("H:[A]-8-[vs]-8-[B]", options: .AlignAllBaseline, metrics: nil, views: views)
        let c2 = NSLayoutConstraint(item: textFieldA, attribute: .Left, relatedBy: .Equal, toItem: cell.layoutMarginsGuide, attribute: .Left, multiplier: 1, constant: 0)
        let c3 = NSLayoutConstraint(item: textfieldB, attribute: .Right, relatedBy: .Equal, toItem: cell, attribute: .Right, multiplier: 1, constant: 0)
        let c4 = NSLayoutConstraint(item: textFieldA, attribute: .CenterY, relatedBy: .Equal, toItem: cell.contentView, attribute: .CenterY, multiplier: 1, constant: 0)
        let c5 = NSLayoutConstraint(item: textFieldA, attribute: .Width, relatedBy: .Equal, toItem: textfieldB, attribute: .Width, multiplier: 1, constant: 0)

        NSLayoutConstraint.activateConstraints(c1 + [c2, c3, c4, c5])

        return cell
    }
}

Result:

Answer 2

Do the following:

• Create a new class and make it a subclass of UITableViewCell and call it something like MyTableViewCell.

• In your Storyboard file click your tableView, then in the right panel click the attributes inspector, choose prototype cells: 1.

• Click your newly created cell and in the attributes inspector choose an identifier name (for instance, "myCellID"). Then in the identity inspector set the class attribute MyTableViewCell.

• Drag and drop the textFields to your cell, then with the assistant editor, ctrl + click and drag from your textFields to your UITableViewCell subclass. It should create outlets for your textFields.

• In your ViewController, make your class implement UITableViewDataSource protocol and override the tableView(_: numberOfRowsInSection:) and the tableview(_: cellForRowAtIndexPath:). Then in the latter method write:

  let myCell = tableView.dequeueReusableCellWithIdentifier("myCellID") as! MyTableViewCell return myCell

Even though we are not using the outlets for the text fields you created, you will need to use them at some point to pre-populate content, set target-action methods, etc.

Answer 3

1. Create a subclass of UITableViewCell with two text field outlets:

   class TextFieldsCell: UITableViewCell {
       @IBOutlet var textfield1: UITextField!
       @IBOutlet var textfield2: UITextField!
   }
   

2. In IB, select your table view and add a prototype cell to your table view by setting "Prototype Cells" to "1", in attributes inspector:

3. In IB, layout the text fields inside your cell using autolayout. (skipping details of autolayout implementation)

4. In IB, select your table view cell, and change it's "Identifier" to "TextFieldsCell", in attributes inspector:

5. In IB, select your table view cell, and change it's "Class" to "TextFieldsCell", in identity inspector:

6. In IB, connect TextFieldsCell's IBOutlets with the corresponding text fields:

7. In your view controller which contains the table view, implement the following:

   func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
       return 2;
   }
   
   func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
       let cell: TextFieldsCell = tableView.dequeueReusableCellWithIdentifier("TextFieldsCell") as! TextFieldsCell
       return cell
   }
   

8. If you set everything up properly, you should see this on the next run: