In most of the applications which are based on UITableView or are using it for displaying some complex data we need UITableViewCell which is much more complex then basic cells provided in the Interface Builder. If existing cell types are not satisfying our requirements we need to do is to develop custom cell with extending default functionality of UITableViewCell. Extending the functionality of the basic UITableViewCell is most of the time by designing custom content view which will hold and display our complex data but also we can set extra functionality like gestures on components inside the cell so we can execute some method.

In this tutorial we will develop custom UITableViewCell which will present data for the product with UIImageView on the left side and with three UILabel components.

Let’s start.

 

We are starting with creating the Single View Application in our Xcode IDE.

screen-shot-2016-09-17-at-09-00-14

 

Next we are setting Product Name, Organisation Name, Identifier, Language ( Objective-C or Swift ) and Device.

screen-shot-2016-09-17-at-09-00-47

 

Your project should look like this after finishing previous step:

screen-shot-2016-09-17-at-09-01-20

 

From the Object Library we are taking UITableView component and we are placing it in our View Controller.

screen-shot-2016-09-17-at-09-05-19

 

 

screen-shot-2016-09-17-at-09-05-42

 

From the Object Library we are taking one UITableViewCell and we are placing it in our UITableView.

screen-shot-2016-09-17-at-09-05-55

 

 

screen-shot-2016-09-17-at-09-06-05

 

After placing the UITableViewCell we need to cell Identifier.

screen-shot-2016-09-17-at-09-06-17

 

Next we are starting with cell customization by dropping some components from the Object Library in our cell, so we are starting with UIImageView, we are taking UIImageView and we are dropping over the cell and we are making size adjustment.

screen-shot-2016-09-17-at-09-08-17

 

 

screen-shot-2016-09-17-at-09-09-45

 

Next for the product name we are taking UILabel from the Object Library and we are dropping also in our cell.

screen-shot-2016-09-17-at-09-10-27

 

We are also taking one UILabel for displaying the product category.

screen-shot-2016-09-17-at-09-12-28

 

And also one UILabel for the product price.

screen-shot-2016-09-17-at-09-12-37

 

After dropping all components we are setting size, position, font etc.

screen-shot-2016-09-17-at-09-20-28

 

For our custom cell we are creating one new class which will hold references for the UI components but also we can use this class for custom logic implementation.

screen-shot-2016-09-17-at-09-20-45

 

 

screen-shot-2016-09-17-at-09-21-19

 

 

screen-shot-2016-09-17-at-09-21-59

 

When we have created the new class we are setting this class as Custom Class property Identity Inspector for the cell.

screen-shot-2016-09-17-at-09-22-39

 

For each component in the cell we are making IBOutlet references so we can set the correct data.

screen-shot-2016-09-17-at-09-25-03

 

 

screen-shot-2016-09-17-at-09-25-10

 

 

screen-shot-2016-09-17-at-09-25-41

 

 

screen-shot-2016-09-17-at-09-25-49

 

 

screen-shot-2016-09-17-at-09-26-15

 

 

screen-shot-2016-09-17-at-09-26-21

 

 

screen-shot-2016-09-17-at-09-26-44

 

 

screen-shot-2016-09-17-at-09-26-50

 

 

screen-shot-2016-09-17-at-09-27-10

 

If we have finished with setting the references, we are connecting UITableView  datasource and delegate with File’s Owner in Connection Inspector.

screen-shot-2016-09-17-at-09-28-14

 

 

screen-shot-2016-09-17-at-09-28-29

 

 

screen-shot-2016-09-17-at-09-28-35

 

From the Finder we are dragging multiple images which will be displayed in each cell as product photo.

screen-shot-2016-09-17-at-13-09-51

 

Like in previous three tutorials where we saw implementation on UITableView here also in class ViewController we are inserting UITableViewDataSource and UITableViewDelegate right after the class UIViewController which we extend in class declaration so our class will conform with UITableView.

screen-shot-2016-09-17-at-13-10-16

 

We will define one complex data structure which will hold data for each cell in our UITableView.

screen-shot-2016-09-17-at-13-39-16

 

The code is almost the same as in previous tutorials with the only difference in the method cellForRowAtIndexPath where instead of loading defualt cell from the tableView by calling the method dequeueReusableCell which is implemented in the UITableView we are setting the type of the cell as our custom cell. Next we are creating one constant rawObject which will contain product data and we are initializing this constant from our complex data structure by selecting the correct object using indexPath.row. After initialization of our data object we are setting all properties on our custom UITableViewCell and we are returning the cell.

screen-shot-2016-09-17-at-13-43-58

 

If everything is implemented like in the previous steps the application should look like this.

screen-shot-2016-09-17-at-13-45-52

 

For successful UITableView implementation in your project please check previous three tutorials:

UITableView Basics Part One
UITableView Basics Part Two
UITableView Basics Part Three

 

Complete source code can be found on my GitHub ready for testing.

Print Friendly

Leave a Comment

Your email address will not be published. Required fields are marked *