iOS: Make your own cell for a table view/Customizing a table view

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.

Gb1

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.

Gb2

Click next, and Create.

Gb3

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:

GB4

You can test Build and Run this project. The display will be look like this image below:

Image 5

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…”

Gb6

Next, choose “Empty” at User Interface template, click next.

Gb7

And then choose “iPhone” at device family and click “Next”.

Gb8

Save file with “CustomCell” name, click Create.

Gb10

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:

Gb11

At Size Inspector, we can customize the height of the Table View Cell.
Enter 400 at Height column.

Gb12

The next step, drag the elements needed into the cell, for example, I will create an interface cell looks like the image below:

Gb13

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.

Gb14

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.

Gb15

For the column class, insert “CustomCell” and insert “UITableViewCell” for Subclass Of column.

Gb16

Click next and Create. So we have created two files, CustomCell.h and CustomCell.m that can be seen at Project Navigator.

Gb17

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:

Gb18

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:

Gb19

Remember, at CustomCell.xib we need to change TableViewCell class at Identity Inspector into “CustomCell”

Gb20

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:

Gb21

Remember to set the height of the cell from the TableView, add the code below:

Gb22

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:

Gb23

Gb24

This is the display of table view that I created.

Gb25

Gb26

 

 

Source code available on my github.

Written by M. Lutfi, Mobile Developer at 41studio

 

%d bloggers like this: