iOS Customize TableView Cells with image

In the previous tableview example, we have created a simple Table View app to display list of countries. In this tutorial we are going to customize the table view cell.

Add images folder

First let’s add the images folder. In the TableViewExample folder press right button click, and select “Add Files to TableViewExample”

Select the folder with the images

Add new array that stores the flags name

We need to add the new flags array in the same order as the countries names array.

NSArray *tableData;
NSArray *flagsImages;
- (void)viewDidLoad
{
    [super viewDidLoad];
	// Initialize table data
    tableData = [NSArray arrayWithObjects:@"England", @"France", @"USA", @"Spain", @"Mexico", @"Germany", @"Russia", @"Uruguay", @"China", @"Indonesia", @"Nigeria", @"Egypt", @"Japan", @"Colombia", nil];
    
    // Initialize flagsImages
    flagsImages = [NSArray arrayWithObjects:@"england.jpg", @"france.jpg", @"usa.jpg", @"spain.jpg", @"mexico.jpg", @"germany.jpg", @"russia.jpg", @"uruguay.jpg", @"china.jpg", @"indonesia.jpg", @"nigeria.jpg", @"egypt.jpg", @"japan.jpg", @"colombia.jpg", nil];
}
Add the image to the cell
Finally we need to add the image to the cell in the "cellForRowAtIndexPath"
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *tableIdentifier = @"SimpleTableItem";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:tableIdentifier];
    
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:tableIdentifier];
    }
    
    cell.textLabel.text = [tableData objectAtIndex:indexPath.row];
    cell.imageView.image = [UIImage imageNamed:[flagsImages objectAtIndex:indexPath.row]];
    
    return cell;
}
Now the tableview show the flag with the country name.

Check the source code in github: https://github.com/iOS-devcfgc/TableView-iOS