Friday, 17 June 2011

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;

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 {

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"];
 case 1:
  cell.cartoonName.text = @"Batman ";
  cell.charName.text = @"Bruce Wyane";
  cell.charCity.text= @"Gotham City";
  cell.charImage.image = [UIImage imageNamed:@"batman4952.jpg"];
 case 2:
  cell.cartoonName.text = @"Superman";
  cell.charName.text = @"Clark Kent";
  cell.charCity.text= @"Krypton";
  cell.charImage.image = [UIImage imageNamed:@"superman.jpg"];
 case 3:
  cell.cartoonName.text = @"Spider man";
  cell.charName.text = @"Peter Parker";
  cell.charCity.text= @"NewYork";
  cell.charImage.image = [UIImage imageNamed:@"Spider-Man.jpg"];
 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"];

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

1 comment:

  1. ロンドンオリンピックはもうすぐ開幕!アイホンで試合を見ることができて、嬉しい。電車の中でも、学校の通学道でも、アイホンを出して、試合を見たくなるでしょう。その時は可愛いiPhone ブランド ケースでアイホンを可愛くして、人目を引きたいでしょう。オススメしたいのは、当ショップの超目玉商品のバービー iphoneケースです。それに、ブランドの上品感を見せたいのなら、Tory Burch iphone ケースが絶好品!