Create Custom Cell Template for iOS UITableView

This page discuss how you can customize the appearance and presentation of cell template in a table view for iOS to match your business requirement. It is expected that you have successfully displayed a list of data before continuing.

Your apps look better when the cell template are presented more intuitively, for instances, adding a label to a TableViewCell. Crosslight has provided techniques that will help you easily customizing the look of your cell template.

Create a Custom Cell Template from Item Template

Customizing item styles in iOS and Android require fairly large number of code and involve a number of steps such as updating the view’s elements from different entry points and synchronize model and view manually. Crosslight provides dozens of item templates to help you quickly create commonly used Crosslight project items. The Crosslight item templates are readily available from Visual Studio IDE. For more information, see Using Crosslight Item Templates.

To add a custom cell template, simply add a new project item from Visual Studio. In the dialog box, choose Crosslight iOS Table Cell for iPhone.

The following shows the class created by the item template.

 

Create View for Custom Cell Template

Next, create a view (also known as interface definition typically with .xib extension). Double click the CrosslightiPhoneTableCell1.xib file in Xamarin Studio and it will open up Xcode. In this sample, a Label will be added.

Once you finished the design, make sure that Use Auto Layout is unchecked if your design does not use the iOS auto layout features.

Customize Cell Height

The custom cell height is set to 44 which is the default from the iOS table cell height. If you prefer to design your custom cell with a different height, you can easily set the desired height values directly in the Xcode’s Layout inspector. Make sure the Custom checbox is checked as well. See the following screenshot.

Starting from Crosslight 2.4 onward, the custom row height in the XIB design will be automatically detected and applied to the table view at runtime. There are no additional code or effort needed. For more information, see Crosslight 2.0 Update 4 Release Notes.

 

Override CellTemplate and CellStyle

Once you have the custom cell template ready (both the class and the view), the final step is overriding CellTemplate and CellStyle in UITableViewController that consumes the custom cell template. Crosslight provides a class called UIViewTemplate Class which you can instantiate and pass in the UINib instance that represents the custom cell template.

 

Configure Binding in BindingProvider

After creating our own custom cell template in the view level, then bind the Label using the BindingProvider Class that contains the definition for the view bindings.

The following example shows how to configure the binding for the above custom cell templates.

After saving all the changes, you should see the result similar to the following image.

Samples

The sample code for this article can be downloaded from our Git server: http://git.intersoftpt.com/projects/CROS-SUPP/repos/customcelltemplate-for-ios-uitableview/browse.

Leave a Reply