This time we are going to take a look on how to create a form with text input using UITableView. Displaying static text in UITableView is easy but for enabling text input in UITableView and propagating the change back to a model object requires a couple of steps.
In this example project we are going to create a table view what consists of several rows with text input. The content of the table view is defined by an object
Form. Form’s responsibility is to define the items table view displays and also propagating changes back to a model object. In the end we will have a table view where user can edit properties of a model object.
Creating a model object
Model object what we are going to use is an object representing a note. It just has two properties: topic and title. Whenever topic or title changes, it is logged to the console which is enough for verifying updates to model.
Creating a Form
Like mentioned before, form is going to dictate the content of the table view by defining sections and items. In this simple case, we just have one section with two rows.
TextInputFormItem represents a single row with editable text field. It defines text, placeholder and change handler. Text is used as initial value and if there is no text, table view cell will display placeholder string instead. When user changes the text in the table view row, change handler is called with the new value. This is where we are going to update the model object with a new value.
Setting up table view
FormViewController is a UITableViewController subclass and it glues Form and table view together. It uses Form for determining how many sections and items table view has. In addition, based on the item type, it chooses appropriate table view cell for it. In this simple project, we only have items of one type but it is simple to expand it further to support more cell types.
Adding editable text field to UITableViewCell
For text input we are going to use a custom cell. This cell adds an editable text field to its contentView. Secondly, it handles touches began event for moving the first responder to the editable text field when users taps on the row and finally calls change handler when text in the editable text field changes.
Creating form for model object
Finally it is time to create a
Form. We’ll just have one section with two items: one item for Note’s topic and the other one for Note’s text. Whenever text is edited in table view, we’ll get the change callback and then we can propagate the change back to the
We created a table view with editable text field by subclassing UITableViewCell and adding UITextField to it. Then we created
Form and used it to decouple model object from table view. Form’s items provide content for table view cells and handle propagating changes back to the model object.
If this was helpful, please let me know on Twitter @toomasvahter. Thank you for reading.
UITableViewCellTextInput (GitHub) Xcode 10.1, Swift 4.2.1