How To Use Table View Cells In iPhone?

To show how to use custom cells, we’re going to create a new application with another table view, and we,re going to display two lines of information to the user. our application will display the name and color. We’ll display both of those information in the same table cell by adding subviews to the table view cell.

Step 1: Create a new Xcode project using the view-based application template.

Step 2: Double click .xib files and add a Table View, and sei its delegate and datasource to File’s Owner. Save it, and go back to Xcode.

Step 3: We need to add some code in the header file. We have define two constants and assign tags to some of the subviews that we’ll be adding to the table view cell. Add four subviews to the cell , and two of those need to be changed for every row.


#import <uikit/UIKit.h>
#define kNameValueTag 1
#define kColorValueTag 2

@interface CellsViewController : UIViewController
NSArray *computers;

@property(nonatomic,retain) NSArray *computers;



Step 4: In our controller, we need to set up some data to use, and then implement the table data source methods to feed that data to the table. The viewDidLoad method this time creates a bunch of dictionaries. Each dictionary contains the name and color information for one row in the table. The name for that row is held in the dictionary under the key Name, and color is held under the Color.


- (void)viewDidLoad {
NSDictionary *row1 = [[NSDictionary alloc] initWithObjectsAndKeys:
NSDictionary *row2 = [[NSDictionary alloc] initWithObjectsAndKeys:
@"MacBook pro",@"Name",@"Silver",@"Color",nil];
NSDictionary *row3 = [[NSDictionary alloc] initWithObjectsAndKeys:
NSArray *array = [[NSArray alloc] initWithObjects:
row1,row2,row3, nil];
self.computers = array;

[row1 release];
[row2 release];
[row3 release];
[super viewDidLoad];

-(NSInteger)tableView:(UITableView *)tableView
return[self.computers count];

-(UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
static NSString *CellTableIdentifier = @"CellTableIdentifier";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellTableIdentifier];
if(cell == nil){
CGRect cellFrame = CGRectMake(0,0,300,65);
cell = [[[UITableViewCell alloc] initWithFrame: cellFrame
reuseIdentifier:CellTableIdentifier] autorelease];

CGRect nameLabelRect = CGRectMake(0,5,70,15);
UILabel *nameLabel = [[UILabel alloc] initWithFrame:nameLabelRect];
nameLabel.textAlignment = UITextAlignmentRight;
nameLabel.text = @"Name:";
nameLabel.font = [UIFont boldSystemFontOfSize:12];
[cell.contentView addSubview: nameLabel];
[nameLabel release];

CGRect colorLabelRect = CGRectMake(0,26,70,15);
UILabel *colorLabel = [[UILabel alloc] initWithFrame:colorLabelRect];
nameLabel.textAlignment = UITextAlignmentRight;
colorLabel.text = @"Color:";
colorLabel.font = [UIFont boldSystemFontOfSize:12];
[cell.contentView addSubview: colorLabel];
[colorLabel release];

CGRect nameValueRect = CGRectMake(80,5,200,15);
UILabel *nameValue = [[UILabel alloc] initWithFrame:nameValueRect];
nameValue.tag = kNameValueTag;
[cell.contentView addSubview:nameValue];
[nameValue release];

CGRect colorValueRect = CGRectMake(80,25,200,15);
UILabel *colorValue = [[UILabel alloc] initWithFrame:colorValueRect];
colorValue.tag = kColorValueTag;
[cell.contentView addSubview:colorValue];
[colorValue release];

NSUInteger row = [indexPath row];
NSDictionary *rowData = [self.computers objectAtIndex:row];
UILabel *name = (UILabel *)[cell.contentView viewWithTag:kNameValueTag];
name.text = [rowData objectForKey:@"Name"];

UILabel *color = (UILabel *)[cell.contentView viewWithTag:kColorValueTag];
color.text = [rowData objectForKey:@"Color"];
return cell;




Step  5: Compile and run your application, you should get rows with two lines of data in it, Just show in figure 1.

Figure 1: Adding subviews to the table view cell can give you multiline rows.

You can downloaded SourceCode from here Cells 2