Customize UI Table View Cell By Adding Images and Style Text

On January 4, 2013, in iPhone iPad Object-C, by James Liu

When we create Apps using UITableView and UITableViewCell, the default UI usually can not meet our needs. In this tutorial, I will show you how to customize UITableViewCell step by step. From simple customization to complicated customization, this tutorial will cover how to change default UITableViewCell height, text font, size and color. It will also describe how to show image icon in default UITableView or totally customize a new table view cell from sketch.

Change Basic Table View Cell Style

When we use a default UITableViewCell to create a table app, it will usually look like this.

Default UITableViewCell UI

If the title is very long, it will look much ugly.

UITableViewCell Default UI

To make it nicer, we can customize the cell higher and change the font size smaller. If we want, we can also change the font family and font color. All these jobs can be done in the Storyboard environment. For simple usage, we can choose basic style table view cell. To change the height of the basic table view cell, we can select the Table View Cell in the storyboard left side and open the size inspector in the right-top storyboard.

Change Table Cell Height

choose the basic style table view cell

After change the cell height, we can change more style on the text label. For example, changing the label text to two rows, change the font size smaller. All these attributes can be set in the attributes inspector.

Change Basic Table View Cell Text

After we change the table view cell style, our table view will look like:


Insert Image in Table View Cell

Adding image in a Table View Cell is not a big deal. If we choose basic Table View Cell, it has a default image layout. We can specify a static image in the attribute inspector, or set dynamic image in cell programatically. To specify image in the attribute inspector, the static image must be added in the project. After that, we can type the image name in the attribute inspector. In programmatic way, we have more choices. As well as static image, we can also set images from internet. See the following code example, it will load a image from internet.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    static NSString *CellIdentifier = @"2lineCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    // Configure the cell...
    [cell.textLabel setText:[rssData objectAtIndex:indexPath.row]];
    [cell.imageView setImage:[UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:@""]]]];
    return cell;

In the above example, I set all cell with the same image. But in your app, you can set different image according to the indexPath row. Here is the what it looks like after we add the image in the table view cell.

Table View Cell with Image

Change Table View Cell Height Dynamically

In the storyboard,

- (CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
    if(indexPath.row % 2 == 0)
        return 50;
        return 100;

change table view cell height dynamically

Tagged with:  

3 Responses to “Customize UI Table View Cell By Adding Images and Style Text”

  1. Harshad says:

    Thank you so much its helpful for me 🙂

  2. Manan Shah says:

    I have diffrent size of image. how to set image with same size image in tableviewcell imageview?

    • James Liu says:

      Please check the function “heightForRowAtIndexPath”. You can set different height for different raw basing on the image height.

Leave a Reply

WordPress Blog

Free WordPress Theme