Custom TableView Cell

In this post we will have a look on how to create a custom cell for the table view. 

Design view: For this demo we will make a custom UITableViewCell with three labels and one image view, the three labels will represent details about a particular cartoon character including an image view which will show the image of that cartoon character. Here is a view at the final output.

Step 1: Open Xcode and select the windows based application template and add the UITableViewController subclass file to the project with the name MyTableViewController or any other name of your choice. Now there will be two files that would be added into your project those are the MyTableViewController.h and MyTableViewController.m file. Now add a UITableViewCell subclass file to your project with the name MyCustomCell and two more files will be added with the name MyCustomCell.h and MyCustomCell.m.

Step 2: Select the MyCustomCell.h file and declare three variables of UILabel type and one variable of UIImageView type. Also declare the properties of these variables that you will be using (we are declaring properties so that we can access these variables with the help of the dot operator in the MyTableViewController.m file). Here’s the code to do that.

#import <UIKit/UIKit.h>

@interface MyCustomCell: UITableViewCell {

 UILabel *charName,*cartoonName,*charCity;

 UIImageView *charImage;

}

@property (nonatomic,retain) UILabel *charName,*cartoonName,*charCity;

@property (nonatomic,retain) UIImageView *charImage;

@end

Step 3: In the MyCustomCell.m file give memory to these variables

#import " MyCustomCell.h"

@implementation MyCustomCell

@synthesize charCity,charName,charImage,cartoonName;

- (id)initWithFrame:(CGRect)frame reuseIdentifier:(NSString *)reuseIdentifier {

    if (self = [super initWithFrame:frame reuseIdentifier:reuseIdentifier]) {

        // Initialization code

    charName = [[UILabel alloc]initWithFrame:CGRectMake(102, 14, 85, 21)];

    charName.font = [UIFont fontWithName:@"Verdana" size:12.0f];

    

    cartoonName = [[UILabel alloc]initWithFrame:CGRectMake(102, 40, 111,21)];

    cartoonName.font = [UIFont fontWithName:@"Verdana" size:12.0f];

 

    charCity = [[UILabel alloc]initWithFrame:CGRectMake(102, 65, 81, 21)];

    charCity.font = [UIFont fontWithName:@"Verdana" size:12.0f];

 

charImage = [[UIImageView alloc]initWithFrame:CGRectMake(7, 12, 78, 70)];

 

  //adding the controls in the table cell

  [self.contentView addSubview:charName];

  [self.contentView addSubview:cartoonName];

  [self.contentView addSubview:charCity];

  [self.contentView addSubview:charImage];

 

    }

    return self;

}

Now after allocating memory to the variables and setting the frame of the lables and the imageView its time to add this custom cell to our table view so in order to do that first you have to import the MyCustomCell.h as the header in the MyTableViewController.h file

#import <UIKit/UIKit.h>

#import " MyCustomCell.h"

@interface MyTableViewController: UITableViewController {

}

@end

and then in the MyTableViewController.m file go to the

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

Here all you have to do is replace the below code 

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (cell == nil) {

        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];

    }

With this code

 MyCustomCell *cell = (MyCustomCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (cell == nil) {

        cell = [[[MyCustomCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];

    }

and then using switch case manipulate the cells

switch (indexPath.row) {

 case 0:

  cell.cartoonName.text = @"Dragon ball z";

  cell.charName.text = @"Goku";

  cell.charCity.text= @"Japan";

  cell.charImage.image = [UIImage imageNamed:@"goku.jpg"];

  break;

 

 case 1:

  cell.cartoonName.text = @"Batman ";

  cell.charName.text = @"Bruce Wyane";

  cell.charCity.text= @"Gotham City";

  cell.charImage.image = [UIImage imageNamed:@"batman4952.jpg"];

  break;

 

 case 2:

  cell.cartoonName.text = @"Superman";

  cell.charName.text = @"Clark Kent";

  cell.charCity.text= @"Krypton";

  cell.charImage.image = [UIImage imageNamed:@"superman.jpg"];

  break;

 

 case 3:

  cell.cartoonName.text = @"Spider man";

  cell.charName.text = @"Peter Parker";

  cell.charCity.text= @"NewYork";

  cell.charImage.image = [UIImage imageNamed:@"Spider-Man.jpg"];

  break;

 

 case 4:

  cell.cartoonName.text = @"Iron Man";

  cell.charName.text = @"Tony Stark";

  cell.charCity.text= @"U.S.A";

  cell.charImage.image = [UIImage imageNamed:@"ironman.jpg"];

  break;

}

Step 4: The above code is self-explanatory.  By using switch case operator We are giving different names and images to different cells of the table view.

Note: for this demo we have to increase the row height of the cell. So implement the below delegate method of the UITableView.

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

{

 return 90;

}

Step 5: Select the AppDelegate.m file of your project and add this piece of code and then run your application to get the output just like the above image

#import "CustomCelldemoAppDelegate.h"

#import "MyTableViewController.h"

@implementation CustomCelldemoAppDelegate

@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch

 MyTableViewController *mtVC = [[MyTableViewController alloc]init];

 [window addSubview:mtVC.view];

    [window makeKeyAndVisible];

}

After adding this select build and go and get the below output