iOS: Make your own cell for a table view/Customizing a table view
Table view is one of the most important UI element in iOS apps, Table view usually used to display list of data. The data which is displayed can be any kind of data, including images and videos. How to make custom table view cell, that the display of the table view of each cell looks interesting.
Let’s Start !
Open XCode and create a new project with Single View Application Template.
Fill the option at the Product Name column with “CustomTableView”, make sure Use Automatic Reference Counting option checked, Storyboards and Include Unit Tests don’t have to be checked, because for this simple project we don’t need a storyboard.
Click next, and Create.
Click nib file or ViewController.xib, choose Table View in Object Library, and then drag to ViewController. So that the display will look like this:
You can test Build and Run this project. The display will be look like this image below:
This is the display of a simple table view. Now we will try to customize the table view by creating a new cell file.
Let’s create a new interface !
Well, firstly, create a separated cell by creating new file; at Project Navigator right click “CustomTableView” and choose “New File…”
Next, choose “Empty” at User Interface template, click next.
And then choose “iPhone” at device family and click “Next”.
Save file with “CustomCell” name, click Create.
At Project Navigator, we have created a new nib file with CustomCell.xib
Click CustomCell.xib, choose TableViewCell at Object Library, then drag to the design area from Interface CustomCell. The display will be look like the image below:
At Size Inspector, we can customize the height of the Table View Cell.
Enter 400 at Height column.
The next step, drag the elements needed into the cell, for example, I will create an interface cell looks like the image below:
You can add your own image file to the project to be placed in UIImageView.
Next at Attributes Inspector, at Identifier column fill “CustomCell”. This Identifier will be use at TableView class.
Ok. We already have our own custom cell that’s ready to be called at ViewController class. How to call it? Yap, of course we must have our own class for CustomCell.
Let’s create a new class !
Create a new file by right clicking at CustomTableView “New File…” and then choose Objective-C class at Cocoa Touch template. Click next.
For the column class, insert “CustomCell” and insert “UITableViewCell” for Subclass Of column.
Click next and Create. So we have created two files, CustomCell.h and CustomCell.m that can be seen at Project Navigator.
Open CustomCell.h and register the outlet of each element created before. In my case, I added outlet for Name, Time, Image, and Button Comment as follows:
Next, make a connection between the nib file with the property at class. The image below is an example for the nib file interface that has been connected:
Remember, at CustomCell.xib we need to change TableViewCell class at Identity Inspector into “CustomCell”
Ok, now we need to connect the previous TableViewController with CustomCell that has been created. In order to do that, we need to call CustomCell class into the ViewController class by importing it. As follows:
Remember to set the height of the cell from the TableView, add the code below:
Yap, that’s it.
Next, we can display the data saved from database or web services in table view that we inserted into an array.
You can use your own creativity to display the more complex data.
My full code at XYZViewController.m looks like this:
This is the display of table view that I created.
Source code available on my github.
Written by M. Lutfi, Mobile Developer at 41studio