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.

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

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.

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.

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:@"http://www.axialis.com/tutorials/iw/star.jpg"]]]];
    
    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.

Change Table View Cell Height Dynamically

In the storyboard,

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