In this application we will see how to add background image in the table view. This is the simple simple example of tableview. Let see how it will be worked.

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

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 ImageTableViewController class for you. Expand Resources and notice the template generated a separate nib, ImageTableViewController.xib, for the “ImageTable”.

Step 4: 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 class name “DetailView”.

Step 5: We need to add image in the Resources folder. Give the name of the image “Apple_logo.jpg”.

Step 6: Open the AppDelegate.m file and make the following changes:

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

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

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

#import <UIKit/UIKit.h>

@interface ImageTableViewController : UIViewController
 <UITableViewDelegate, UITableViewDataSource>
{
 IBOutlet UITableView *tableView;
 NSArray *productName;
}

Step 8: Double click the ImageTableViewController.xib file and open it to the Interface Builder. Drag the Image View from the library and place it to the view window ,select the Image View from the view window and bring up attribute inspector select the Apple_logo image. Next drag the table view from the library and place it to the view window. Connect File’s Owner icon to  the View icon and select view .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.

Step 9: Open the ImageTableViewController.m file and make the following changes in the file:

#import "ImageTableViewController.h"
#import "DetailView.h"
 
@implementation ImageTableViewController

- (void)viewDidLoad {
  productName = [[NSArray alloc]   initWithObjects:@"iPhone",@"iPod",@"MacBook",@"MacBook Pro",nil];
  self.title = @"Table view Example";
  tableView.backgroundColor = [UIColor clearColor];
  tableView.alpha = 0.9;
  [super viewDidLoad];
}

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

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
  return @"iPhone Products";
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
  static NSString *CellIdentifier = @"Cell";
  UITableViewCell *cell = [tableView   dequeueReusableCellWithIdentifier:CellIdentifier];
  if (cell == nil) {
  cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero    reuseIdentifier:CellIdentifier] autorelease];
}

 cell.text = [productName objectAtIndex:indexPath.row];
 cell.accessoryType =  UITableViewCellAccessoryDisclosureIndicator;
 return cell;
}

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

}

Step 10: Open the DetailView.h file , we have added here UILabel  for the display text and added a method. So make the following changes in the file:

@interface DetailView : UIViewController {
 IBOutlet UILabel *detailText;
}
 - (IBAction) detailText:(NSString *)str;

Step 11: 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 12: In the DetailView.m file make the following changes in the file:

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

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

You can downloaded SourceCode from here ImageTable 2