Inline Editing within UITableViewCell? - ios

Question

I’m trying to build an app that uses UITableView and UITableView Cell.
I want users to tap an Add button to add an item to the TableView without calling up a new window or an alert pop-up. I also want users to tap a cell to edit its value and then save it.
I’m struggling to find the best way to do this. Based on what Apple documents about UITableViewCell, it doesn’t seem possible.
Is there a better approach?

Answer 1

Here is a very basic example.
In your Storyboard, add a UITableViewController embedded in a UINavigationController. Set the Custom Class of the table view controller to SampleTableViewController. That's all you should need to do to run this.
The table starts out empty. Tap the Add ("+") button on the navigation bar to add a new item to the data array and reload the table.
As you edit a text field, the text will be passed back to the controller via a "callback" closure, where we update the data array with the new string.
There is also a Done button - tapping it will simply print the data array to the debug console so we can see the changes. That is where you'd do something like save the user entered data (or whatever else you're planning to do with it).
SampleTableViewController class
class SampleTableViewController: UITableViewController {
var myData: [String] = []
override func viewDidLoad() {
super.viewDidLoad()
// cells will have text fields, so we want to be able to
// dismiss the keyboard by scrolling the table
tableView.keyboardDismissMode = .onDrag
// register our custom cell
tableView.register(SampleTextFieldCell.self, forCellReuseIdentifier: "cell")
// put system Add "+" button and system "Done" button
// on right side of the navigation bar
let addBtn = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(self.addButtonTapped))
let doneBtn = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(self.doneButtonTapped))
navigationItem.rightBarButtonItems = [doneBtn, addBtn]
}
#objc func addButtonTapped() -> Void {
// add a new element to data array
myData.append("")
// reload the table
tableView.reloadData()
}
#objc func doneButtonTapped() -> Void {
// do something with the added / edited items
// maybe save then to a database?
// for now, just print the data array to the debug console
print(myData)
}
override func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return myData.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! SampleTextFieldCell
cell.theTextField.text = myData[indexPath.row]
// set the "callback" closure so we can save the text as its being edited
cell.callback = { str in
// update data array when text in cell is edited
self.myData[indexPath.row] = str
}
return cell
}
}
SampleTextFieldCell class
class SampleTextFieldCell: UITableViewCell {
let theTextField = UITextField()
// closure used to tell the controller that the text field has been edited
var callback: ((String) ->())?
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
theTextField.borderStyle = .roundedRect
theTextField.placeholder = "Enter new item..."
theTextField.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(theTextField)
let g = contentView.layoutMarginsGuide
NSLayoutConstraint.activate([
theTextField.topAnchor.constraint(equalTo: g.topAnchor, constant: 0.0),
theTextField.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 0.0),
theTextField.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: 0.0),
theTextField.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: 0.0),
])
theTextField.addTarget(self, action: #selector(self.textFieldEdited(_:)), for: .editingChanged)
}
#objc func textFieldEdited(_ textField: UITextField) -> Void {
// send newly edited text back to the controller
callback?(textField.text ?? "")
}
}