Introduction

If you have read the previous tutorial then as of now you will be able to create a simple table-view.

In this tutorial we will work on the app and try to customize the table-view.

So in this tutorial
Mainly we are going to focus on below points.

1. Display the images for each row.
2. We will customize the table-view cell -> just we are moving one step forward and make CustomCell instead of using the default style of table-view cell.

So lets start with the first point.

Task 1 : Display the images for each row

Note : You don’t need to create different project for that. as you have follow our previous tutorial then you have successfully created a simple table view so we will continue the coding part where we left in previous tutorial.

For this we need to add some more code in below method

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

So to display the image for each row what you need first.
Obviously “image” which you like to display in table View cells.

So download your desired image and add it in to your project. To add just DRAG and DROP image into your Xcode project.

At that time, a screen will appear like following screen shot.

Check -> “copy items into destination group’s folder”
Check -> “Add to Targets”

Now write a following line of code in “cellForRowAtIndexPath” method.

cell.imageView.image = [UIImage imageNamed:@"images.jpeg"];

Now your method look like below :

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

// This method is called every time when cell is display in tableview.

static NSString *simpleTableIdentifier = @"SimpleTableItem";

// Here we declare static identifier which will be useful for concept of reusability.

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

// here we create cell with ReusableCellWithIdentifier

if (cell == nil)

{

cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];

// here we alloc cell with style and ReusableCellWithIdentifier.

}

cell.textLabel.text = [tbl_data objectAtIndex:indexPath.row];

// here we set our tbl_data to cell's label.

cell.imageView.image = [UIImage imageNamed:@"images.jpeg"];

return cell;

}

Now Save and run your program.

You screen look like below

Now what you will do if you want to show the diff diff image to each row ?

In this sample program we are displaying 10 rows. so you need 10 different images. so first download or collect your desired images which you want to show for each row and give them proper name.

Or

you can download the images form here.

And add them in project. [Remember don’t forget to check the options as we discussed above for adding images into project]

Now give the name as per below screenshot. in that you can see the images list with numbers.

(if you have downloaded the images from above link which is provided by us then no need to change the name.)

Now

Declare an Array which which contain images name which we are yogin to display in each row.

In “ViewController.h” file write below line of code.

NSArray *cell_images;

Now your “ViewController.h” file code look like below.

#import 

@interface ViewController : UIViewController <UITableViewDelegate,UITableViewDataSource>

// Here is simple and short information for UITableViewDelegate and UITableViewDataSource.

/*

UITableViewDelegate : it is Protocol which we implement in our class to receive UITableview events.

[For Example : Selection on your Rows, LAYOUT methods (height of rows, header view, footer view etc...)]

*/

/*

UITableViewDataSource : it is Protocol which we implement in our class to provide data to UITableview.

[for example :  Providing data for rows.]

*/

{

IBOutlet UITableView *tbl_simple;

// IBOutlet :  IBOutlet representing an instance variable in our class which can be visually connected to the UI object in Interface Builder (.xib) file.

NSArray *tbl_data;

// Declare an object "tbl_data" of "NSArray" class.

NSArray *cell_images;

// Declare an object "cell_images" of "NSArray" class which contain images name which we are yogin to display in each row

}

@end

Now Move to “ViewController.m” file

and modified the “viewDidLoad” method like below.

i have added a comment for each line of code but even if your are having any doubt then feel free to comment 🙂

- (void)viewDidLoad

{

[super viewDidLoad];

tbl_data = [[NSArray alloc] initWithObjects:@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10", nil];

// In above line : we Initialize "tbl_data" with the objects.

cell_images = [[NSArray alloc] initWithObjects:@"images(1).jpeg",@"images(2).jpeg",@"images(3).jpeg",@"images(4).jpeg",@"images(5).jpeg",@"images(6).jpeg",@"images(7).jpeg",@"images(8).jpeg",@"images(9).jpeg",@"images(10).jpeg", nil];

// Initialize the array with the images name

// Do any additional setup after loading the view, typically from a nib.

}

in Above method we have added the following line of code

cell_images = [[NSArray alloc] initWithObjects:@"images(1).jpeg",@"images(2).jpeg",@"images(3).jpeg",@"images(4).jpeg",@"images(5).jpeg",@"images(6).jpeg",@"images(7).jpeg",@"images(8).jpeg",@"images(9).jpeg",@"images(10).jpeg", nil];

“cell_images” contain name of an images.

Now modify the “cellForRowAtIndexPath” method.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

// This method is called every time when cell is display in tableview.

static NSString *simpleTableIdentifier = @"SimpleTableItem";

// Here we declare static identifier which will be useful for concept of reusability.

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

// here we create cell with ReusableCellWithIdentifier

if (cell == nil)

{

cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];

// here we alloc cell with style and ReusableCellWithIdentifier.

}

cell.textLabel.text = [tbl_data objectAtIndex:indexPath.row];

// here we set our tbl_data to cell's label.

 <del>cell.imageView.image = [UIImage imageNamed:@"images.jpeg"];</del>

cell.imageView.image = [UIImage imageNamed:[cell_images objectAtIndex:indexPath.row]];

return cell;

}

Now save and run your program

Your screen will look like following.

Done it…… Now you have set the diff diff images for each row. Good work .

ok then we will move to our second task

2. We will customize the tableview cell -> just we are moving one step forward and make “CustomCell” instead of using the default style of tableview cell.

so we start with the design part.

Go to

File -> New -> New File

Select “User Interface” and select “Empty” and click “Next” button.

Select device family -> iPhone

in Save As write “SampleTableCell” and save to project.

Next step Go to Object Library, select “Table View Cell” and drag it to the design area of the Interface Builder.

See below screen shot

Over there change the size of the Table View Cell. Make Width 320 and Height 70.

Next, Go to “Attributes Inspector” in the upper part of the Utility area and set the “Identifier” of the custom cell to “SimpleTableCell”. This identifier will be used later in your code.

Now

Add Image in which we display the “image” field.

Add a label in which we will display the “name” filed.

Add a label in which we will display the “number” field.

Make the design as you want to see. now we will create the class for Custom Cell.

Go to File-> New-> New File

Select “Cocoa Touch” -> “Objective-c Class” -> Click next Button

• Set Class to “SampleTableCell“
• Set Subclass to “UITableViewCell” and click Next button and create the file

This is how your file added.

Now Modified the SampleTableCell.h file which will look like below

#import 

@interface SampleTableCell : UITableViewCell

@property (nonatomic, weak) IBOutlet UILabel *nameLabel;

// Create IBOutlet and property for "nameLabel"

@property (nonatomic, weak) IBOutlet UILabel *numberLabel;

// Create IBOutlet and property for "numberLabel"

@property (nonatomic, weak) IBOutlet UIImageView *thumbnailImageView;

// Create IBOutlet and property for "thumbnailImageView"

@end

And Modified the SampleTableCell.m file which will look like below

#import "SampleTableCell.h"

@implementation SampleTableCell

// Synthesize the filed.

@synthesize nameLabel = _nameLabel;

@synthesize numberLabel = _numberLabel;

@synthesize thumbnailImageView = _thumbnailImageView;

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

{

self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

if (self) {

// Initialization code

}

return self;

}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated

{

[super setSelected:selected animated:animated];

// Configure the view for the selected state

}

@end

Now we have to make connections with xib.

So follow the below steps.

AS per below image go to

“SampleTableCell.xib” -> Select “Table View Cell” -> Select identity inspector -> Click on drop down of “class” and select “SampleTableCell“.

Now Go to ” Connections Inspector ”

And set outlets Like below screens

Now Go to “ViewController.m” file and Import “SampleTableCell.h”

#import “SampleTableCell.h”

And Modify the cellForRowAtIndexPath method

Previous it look like below

<del>- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

 // This method is called every time when cell is display in tableview.

 static NSString *simpleTableIdentifier = @"SimpleTableItem";

 // Here we declare static identifier which will be useful for concept of reusability.

 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

 // here we create cell with ReusableCellWithIdentifier

 if (cell == nil)

 {

 cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];

 // here we alloc cell with style and ReusableCellWithIdentifier.

 }

 cell.textLabel.text = [tbl_data objectAtIndex:indexPath.row];

 // here we set our tbl_data to cell's label.

 cell.imageView.image = [UIImage imageNamed:[cell_images objectAtIndex:indexPath.row]];

 return cell;

}</del>

And Modified it to following :

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

// This method is called every time when cell is display in tableview.

static NSString *simpleTableIdentifier = @"SampleTableCell";

// Here we declare static identifier which will be useful for concept of reusability.

SampleTableCell *cell = (SampleTableCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

// here we create cell with ReusableCellWithIdentifier

if (cell == nil)

{

NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"SampleTableCell" owner:self options:nil];

cell = [nib objectAtIndex:0];

// here we alloc cell from nib file.

}

// Set label Data

cell.nameLabel.text = @"Krupanshu"; // here you can set the dynamic names as we set the numbers

cell.thumbnailImageView.image = [UIImage imageNamed:[cell_images objectAtIndex:indexPath.row]];

// cell.imageView.image = [UIImage imageNamed:@"images.jpeg"];

cell.numberLabel.text = [tbl_data objectAtIndex:indexPath.row];

// here we set our tbl_data to cell's label.

return cell;

}

And Add a new method foe setting the cell height

// Here we set height for row.

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

return 70;

}

Now save and run it.

This is how your screen look at the end.

Its done 🙂

If you have any question or comments , please feel free to post. I would love to hear them.

To download the source code click here : Download source code