Custom UITableViewCell for Text Input in Swift

The need to collect data via text input is a common in many applications. This walk-through showcases how to create a custom UITableViewCell for accepting text input within a UITableView.

Table Views for Data Entry?

Table views provide nice, built-in styles that present a form-like view for collecting data from your users. They also have inherent scrolling capabilities. Finally, there is some handy keyboard handling, such as auto-scrolling to avoid covering up a data entry cell, or hiding the keyboard when the user scrolls the Table View. Both of those are challenging to get right if you were to do implement a data entry form some other way.

Many of Apple’s own UIs utilize table views to collect data from the user (think Settings, Calendar, Reminders).

For those reasons, I think a table view is a really convenient choice for collecting data from a user.

Step by Step Walkthrough

Drag a table view to Storyboard

Assuming that you have a View Controller already on the Storyboard design surface, drag a table view onto the Storyboard scene.
Drag Table View to Storyboard

Wire up table view data source and delegate

For this step it’s helpful to have the document outline pane visible. Selecting the Table View from the document outline and subsequently Control + Click + Dragging to the View Controller icon on the Storyboard scene will allow you to link the table view’s dataSource and delegate properties to the View Controller.
Ctrl+Click-Drag to set DataSource and Delegate

Set DataSource and Delegate
Note that you’ll need to perform the Control + Click + Drag maneuver twice to set both the dataSource and the delegate.

Configure keyboard dismissal for table view

With the attributes inspector selected in the utilities pane, scroll down to the Keyboard option and set it to “Dismiss on drag”.
Configure Keyboard Dismissal
This can be helpful if you’d like the keyboard to automatically hide itself when the user scrolls the table view.

Set constraints, increase prototype cells count

Use the document outline to set constraints. With the attributes inspector selected in the utilities pane, select “Dynamic Prototypes” for the Content property, and set the Prototype Count property to 1 (or more, depending on your needs).
Set Constraints and Prototype Cells
Configuring constraints on the table view will ensure that it displays properly on all device sizes and orientations.

In this particular example, there’s only one kind of prototype cell that I want the table view to display. If I had multiple prototypes, I’d increase the prototype cells count to match the number of prototypes I had.

Drag text field to cell, increase text field width

Drag a text field into the cell’s contents and use XCode’s blue guides to adjust the width so that it takes up the whole cell.
Drag Text Field to Cell
Now comes the customization of the prototype cell itself. Since we’re designing it for text input, we’ll use a text field as the contents of the table view cell prototype.

Configure Text Field Constraints and Border

Use the document outline to set constraints for the text field. With the text field selected, and the attributes inspector selected in the utilities pane, set the Border Style property to the style you prefer.
Configure Text Field Constraints and Border
Configuring constraints on the text field will ensure that it displays properly on all device sizes and orientations.

Depending on your taste / needs, you can change the border style from rounded to none, or whichever other border style is most appealing for your app.

Create new TextInputTableViewCell class

Add a new .swift file named TextInputTableViewCell to your project. Create a new class in that file called TextInputTableViewCell which inherits from UITableViewCell.
Create new class - TextInputTableViewCell

Create an IBOutlet between the text field and the TextInputTableViewCell class

Use the document outline to Control + Click + Drag and IBOutlet to the TextInputTableViewCell class.
Create IBOutlet

Implement TextInputTableViewCell class

An example implementation with a function for configuring the text field’s properties might look something like this:

Change cell class in Storyboard to TextInputTableViewCell

Use the document outline to select the Table View Cell. With the identity inspector selected in the utilities pane, change the Class property to your TextInputTableViewCell class.
Change Cell Class to TextInputCell

Set reuse identifier

With the Table View Cell still selected in the document outline, select the attribute inspector in the utilities pane and change the Identifier property to “TextInputCell” (or some other string that’s easily remembered).
Set Reuse Identifier

Implement table view data source and delegate methods

In the View Controller, specify that it adopts the UITableViewDataSource and UITableViewDelegate protocols. Implement the appropriate protocol methods.
I’ve written a cheat sheet for this, but I’ll also provide the following sample implementation of the mai ViewController class:

Lines 9 and 11 are of most importance. Notice that I’m dequeueing a TextInputCell, which is what I set the reuse identifier of my cell to be. I’m also casting the dequeued cell as a TextInputTableViewCell so that it can be configured (line 11)

Run in simulator

Simulator Output

Wrapping up

In this walkthrough, my goal was to show how to take advantage of a table view’s inherent styles, scrolling capabilities, and keyboard handling to make form-like text input easier. We created a custom subclass of UITableViewCell to accomplish this task. Take a look at the example published to GitHub to dive in further and explore the walkthrough in more depth.

  • louie rowley

    Andrew, thank you for sharing. I am learning and was lost as to how to do this very thing.

  • Fred Flinstone

    Thanks. Btw, how do you change the text color in the tableView? I’ve tried some inspector options but none of them change the text color even though some of them say text lol Quite mysterious.

  • Darkilluion

    that was helpful but how do you move to the next textField input when you are done with the firs by pressing done on the keyboardt?

    • Andrew Bancroft

      Initial thoughts (I haven’t experimented any with it yet) would be to look into figuring out how to make the next textbox “becomeFirstResponder”. I’d love to research this more and give you a definitive answer, but there’s a ton on my plate at the moment. But if I do get to looking into it and discover an answer, I’ll respond either here or in a new blog post. :]

      Thanks for your question!

  • Luca Faccenda

    Hi Andrew and thanks for your interesting post.
    In my project I would like to take advantage of entering text in the textfield of a customcell, but the problem that stopped me is make this textfield the firstResponder to handle keyboard events.
    I’ll stay waiting for your own resolution. Ciao. Luca.

    • Andrew Bancroft

      Thanks, Luca!

      I will definitely let you know if I get to experimenting and come up with a solution to that. I agree – having the first textbox as the first responder would be ideal.

      • Luca Faccenda

        Thanks a lot. I’m waiting for your experiments! 🙂

        • Andrew Bancroft

          Hey Luca!

          I was able to get the text field to be the first responder by doing something like this in tableView(_:cellForRowAtIndexPath:) :

          if indexPath.row == 0 {
          cell.textField.becomeFirstResponder()
          }

          That makes the first text field in a series of them become the first responder. Is that what you’re looking for?

  • Shankar

    Hey Andrew, thanks for sharing this post. I have managed to code up a UITableView with a custom UITableViewCell as described. Now I want to input data into these text fields and capture them in an string array when I press a button, to be used for further processing. I have been searching a solution, but havent had much luck.

  • Eugen ……

    Hi Andrew, great tutorial. How do you solve the scrolling Problem? When I have more then one textfields, the data in the textfields disappear.

    • Andrew Bancroft

      Is the problem to do with when you enter information into a text field, say at the top, then swipe to scroll down, and then swipe to scroll back up, the text entered into the original cell is gone?

      If that’s the issue you’re experiencing, I may have to admit I hadn’t thought about that scenario, and so my answer right now is, “I don’t know”. Have you made any progress?

      • It usually depends on cell reusing (dequeueReusableCellWithIdentifier …).
        You should keep status about cell data, something like an array in this case and you should use these data to fill the textfield.

        If you need a piece of code just let me know.

        • Nguyen Phuc Long

          Hi Davide I have problem like him , when I scroll down or scroll up textfielfd value jump mess , Please send me code to fix .
          my email : phlong28@yahoo.com.
          Thanks

  • Jorge Merino

    Hey Andrew, thank you for this great tutorial and for giving your time for others to learn. The example ran nicely on Swift 2 after I let the automated conversion to happen.

  • Patryk Mierzejewski

    Hi. Thanks for sharing 🙂 i have one question. How to call the text from UITextField in the controller class? For example i would have @IBAction func print () {} and what i need to do that? set up some kind of delegate? but how?

  • Akumez

    I can’t drag the text field to the custom tableviewcell class.. Specifically at this step in guide:
    Create an IBOutlet between the text field and the TextInputTableViewCell class
    Please help thanks a bunch!!

    • Marwan Khalawi

      go back to “Change cell class in Storyboard to TextInputTableViewCell” steps and do that first then try to drag the text field

  • Tyrone Chelsky

    Hey Andrew, I have a problem in that the “let cell = tableView.dequeueReusableCellWithIdentifier(“TextInputCell”) as TextInputTableViewCell” line of code has an error, and XCode forces it to change the “as” to an “as!”. When this happens and I run it, the Table View and its cells do not show up at all. There is just a blank screen on the simulator. Also, where does the code from the cheat sheet go? Thanks