In this application we will see how to add images and labels in the UITableView. So just look how it will be worked.

Step 1: Create a View base application using template. Give the application name “ViewTable”.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: Expand classes and notice Interface Builder created the ViewTableViewController class for you. Expand Resources and notice the template generated a separate nib, ViewTableViewController.xib, for the “ViewTable”.

Step 4:  We need to add UITableViewCell class to the project. Choose New file -> Select cocoa touch classes group and then select UITableViewCell . Give the class name “MainView”. Create the .xib file select Resource -> Add -> New File ->User Interface-> select ViewXIB and give the XIB name “MainView.xib” . Now we need to add UIVIewController class to the project. Choose New file -> Select cocoa touch classes group and then select UIViewController and corresponding .xib file . Give the project name “DetailView”.

Step 5: We need to add six images in the Resources folder. Give the name of the images “1.iPhone.jpg”,”2.iPod.jpg”,”3.MacBook.jpg”,”4.MacBook Pro.jpg”,”5.Mac Mini.jpg”,”6.iPad.jpg”.

Step 6: Open the ViewTableAppDelegate.m file, and make the following changes in the file:

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

  UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:viewController];
  [window addSubview:navController.view];
  [window makeKeyAndVisible];
}

Step 7: In the ViewTableViewController.h file, we have import “MainView.h” file and added two protocol delegate and datasource for the table view and declared two array that will hold the data and image for the display. So make the following changes in the file:

#import <UIKit/UIKit.h>
  #import "MainView.h"

  @interface ViewTableViewController : UIViewController
  <UITableViewDelegate, UITableViewDataSource>
 {
   IBOutlet UITableView *tableView;
   NSArray *arryList;
   NSArray *imagesList;
   IBOutlet MainView *tableCell;
}

Step 8: Double click the ViewTableViewController.xib file and open it to the Interface Builder. Open the View icon and drag the TableView from the library and place it to the View window. Select the tableview from the view window and bring up size inspector change the height of the row (See the figure1 below). Again select the tableview from the view window and bring up connection inspector, you’ll see there are two connections are available delegate and datasource.Drag from the circle next to each of those connections over to the File’s Owner icon. Next select the File’s Owner icon from the Main Window and bring up connection inspector select tableView to the TableView. Now save it , close it and go back to the Xcode.

Figure 1: Size of the TableView

Step 9: Now make the following changes in the ViewTableViewController.m file:

#import "ViewTableViewController.h"
  #import "MainView.h"
  #import "DetailView.h"

  - (void)viewDidLoad {
  arrayList = [[NSArray alloc]   initWithObjects:@"iPhone",@"iPod",@"MacBook",@"MacBook Pro",@"Mac Mini",@"iPad",nil];
  imagesList = [[NSArray alloc]   initWithObjects:@"iPhone.jpg",@"iPod.jpg",@"MacBook.jpg",@"MacBook Pro.jpg",@"Mac Mini.jpg",@"iPad.jpg",nil];

  self.title = @"Table View";
  [super viewDidLoad];
}

 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}

 - (NSInteger)tableView:(UITableView *)tableView  numberOfRowsInSection:(NSInteger)section {
  return [arryList count];
}

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

  MainView *cell = (MainView *)[tableView  dequeueReusableCellWithIdentifier: MyIdentifier];
 if(cell == nil) {
  [[NSBundle mainBundle] loadNibNamed:@"MainView" owner:self   options:nil];
  cell = tableCell;
}

  [cell LabelText:[arryList objectAtIndex:indexPath.row]];
  [cell ProductImage:[imagesList objectAtIndex:indexPath.row]];
  return cell;
}

  - (void)tableView:(UITableView *)tableView   didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
  DetailView *detailController = [[DetailView alloc]   initWithNibName:@"DetailView" bundle:nil];
  [self.navigationController pushViewController:detailController animated:YES];
  [detailController changeText:[arryList objectAtIndex:indexPath.row]];
}

Step 10: Open the MainView.h file , we have added here UILabel  for the display text and UIImageView for display image and added two methods.

@interface MainView : UITableViewCell {
  IBOutlet UILabel *cellText;
  IBOutlet UIImageView *productImg;
}

  - (void)LabelText:(NSString *)_text;
  - (void)ProductImage:(NSString *)_text;

Step 11: Double click the MainView.xib file and open it to the Interface Builder. Drag the Table View Cell from the library and place it to the Main window (See the figure2). Select the Table View Cell from the Main Window and bring up Identity Inspector, change the class name into the MainView. Open the Table View Cell icon, select it and bring up size inspector change the width 251 and height 86(See the figure3). Now drag the label from the library and place it to the Table View Cell window and drag ImageView from the library and place it to the Table View Cell window. Select File’s Owner icon and bring up Connection Inspector drag from tableCell to the MainView. Next select Table View Cell icon and bring up Connection Inspector then drag from the cellText  to the label and productImg to the ImageView. Now save it , close it, and go back to the Xcode.

Figure 2: Main Window of the MainView.xib

Figure 3: Size of the TableView

Step 12: In the MainView.m file make the following changes in the file:

- (void)LabelText:(NSString *)_text;{
  cellText.text = _text;
}

  - (void)ProductImage:(NSString *)_text;{
  productImg.image = [UIImage imageNamed:_text];
}

Step 13: Open the DetailView.h file and added UILabel for display the text and a method. So make the following changes in the in the file:

@interface DetailView : UIViewController {

  IBOutlet UILabel *detailText;
}
  - (IBAction) changeText:(NSString *)str;

Step 14: Double click the DetailView.xib file and open it to the Interface Builder. Open the View icon from the Main Window and drag two label place it to the view window. Select first label and bring up Attribute Inspector and change the text into “Detail Text”. Select second label and delete the text. Next connect File’s Owner icon to the View icon and select view and drag File’s Owner icon to the label and select detailText. Now save it, close it and go back to the Xcode.

Step 15: In the DetailView.m file make the following changes in the file:

- (IBAction) changeText:(NSString *)str
  {
        detailText.text = str;
  }

Step 16: Now compile and run the application in the Simulator.

You can downloaded SourceCode from here ViewTable