A Custom image in a UITableViewCell

How to setup a custom image in a UITableViewCell

This post is about how to add a custom image to a UITableViewCell in IOS using auto layout. Normally you can add an image to a table view cell on the left hand side using the default settings within a storyboard or NIB using xCode. That is very easy to do.

What if you want to add the icon image to the right margin of the tableViewCell? That’s possible with a little help from auto layout. Using AutoLayout, we can place the icon anywhere within the content view of the UITableViewCell. It is really easy to do, and this technique is independent of storyboards or NIB since we only use Objective-C to implement the layout constraints.

First you will need a UITableViewController setup and ready to go. For this sample, I am using a storyboard to configure a basic application with a Tableview with 5 rows. The storyboard is setup to use auto layout with a universal setup to allow it to run with all devices.

add a custom TableView Cell

We will start this sample at the point where you have added the tableview and added Objective-C classes for both the tableViewController and the customTableViewCell.

First we need to add an imageView to the CustomTableViewCell

Then in the source view we add the code to create and load the image.

In the tableview controller we need to register the reuseIdentifier with the CustomTableViewCell.

Next we load the cell. The Cell is created a little different than normal to take advantage of the overloaded call to initWithStyle.

In this code fragment, we see that we have added a check to the see if the cell is nil before configuring it. When the view is loaded, the dequeueReusableCellWithIdentifier call will return a nil value for the cell. At this point we create our own cell and use it. This will create the custom cell with the icon image contained within it.

If we try to run the application at this point we will not see the correct results. In fact, the result is rather bad..

customtableviewcell first run
Now it’s time to add the auto layout rules to configure the CustomImageTableViewCell so we can view the image correctly within the table cell.

Autolayout Rules to setup image in tableCell

Now that we have added the icon to the CustomTableViewCell, we need to setup some auto layout rules to properly size and position the icon within the tableViewCells content view.

first we setup the height and width of the icon. In the initWithStyle method, we add the following code.

Next we setup the auto layout constraints to position the icon on the right margin of the content view.

Now we have setup the rules to tell IOS how to place the icon on each tableViewCell that we create. To insure that these rules are applied, we need to override the UIView method layoutSubviews to force IOS to apply the custom layout rules we have setup in initWithStyle

That last bit of code will tell IOS to apply the layout rules each time IOS attempts to draw the table view cell. If you run the code now, you still won’t see the correct results however. There is still a small change to make in the tableview source. If you run the code at this step, you will only see the icon when the table cell is selected, otherwise we do not see the icon on the table view at all.
customtableviewcell no icons

To fix this problem we need to adjust the background color of the TableViewCell. In the tableview source we add one line of code to set the background color to a transparent color and this allows the tableview cell to be shown properly.

Now we have the finished sample code running.
customtableviewcell



A complete code sample can be downloaded from this link: CustomImageInTableViewCell source code

Advertisements