Skip to end of metadata
Go to start of metadata

UIResizableTextViewCell is a specialized component variant of UITableViewCell which transforms a static table view cell into an editable one. With only a few line of code, this component lets you quickly add inline editing capability to your table view similar to the Apple's Reminder app. Leveraging MVVM pattern, all you need to do is binding the model to the table view through a two-way binding definition. When user completes the editing, the changes will be automatically reflected to the bound object.

Some of the powerful features built into UIResizableTextViewCell are:

  • Auto resizing with smooth animation as user types in the text area.
  • Support dynamic cell accessory on editing.
  • Smart rotation handling with auto resizing when needed.
  • Support search and editing mode with smooth animation.
  • Great user experience – even better than Apple's own Reminder app.

On this page:

Using UIResizableTextViewCell

The first step to implement the resizable text cell is to add a custom table view cell to your iOS project. In the Add New Item dialog on Visual Studio or Xamarin Studio Mac, choose Crosslight iOS Table Cell template. For more information about available Crosslight project items, see Using Crosslight Item Templates. Make sure your table view controller has been configured to use the provided custom cell template. For step-by-step instructions, see Create Custom Cell Template for iOS UITableView.

Consider that you have added a new custom table view cell named EditableCell, your project should now have these files: EditableCell.cs, EditableCell.designer.cs, and EditableCell.xib files.

The next step is to add a text view to the EditableCell's interface definition which can be easily done via Xcode. Simply create an outlet named EditText for the text view in the Xcode designer such as shown below.

Finally, double click the EditableCell.cs file and change the derived class to UIResizableTextViewCell, and assign the actual text view control appropriately through the TextView override. See the following code.

With the above simple steps, you now have an intuitive, Reminder-style editable table view for your iOS apps. The following illustration shows the results of the code example above.

This document presumes that you already familiar with data binding and data presentation in Crosslight. For more information, see Understanding Binding Providers and Displaying Data in iOS.

Binding Data to Edit Text

In the previous section, you have learnt how to create an editable text cell with automatic resizing capability. However, you will notice that the changes are not reflected to the model. To setup data binding between a model and the target edit text in the template, simply add a binding definition through ItemBindingDescription in the binding provider. See the following example.

As seen in the code above, the binding between the Name property of the model and the EditText control in the template is done through the AddBinding method of the item binding description. Notice that the binding is defined with a two-way direction on the text property which allows the changes in the user interface to be updated to the bound model automatically. To learn more about data binding capabilities in Crosslight, see Crosslight Data Binding Features.

Showing Detail Button on Editing

By default, the editable cell shows only a plain text view when user tapped on the cell for editing. However, it is also a common scenario in iOS to let user reveal more details about the edited item. The UIResizableTextViewCell component lets you easily achieve this scenario by showing a specific accessory on the editing cell similar to the user experience in Apple's Reminder app. Simply override the ResponderAccessory property of the custom cell class and return the UITableViewCellAccessory enumeration that you desire to show.

The following code shows how to show a detail button dynamically on the editing cell.