A tableView is used to display a list of Items. Earlier We learned how to create a Simple Table View. Now in this part we will learn how to customize the tableView by taking Custom Cells.

Steps:

  1. Create a new Xcode Project for (Single View Application).
  2. Give Project a name ( Lets say CustomtableView).
  3. Click next button and the Project will be created,
  4. Now right  click on Your Project Folder and click on  “New File”.
  5. Select cocoa touch and create a new class with Subclass as “UItableViewCell” and check the “XIB” option.. Give it name (Lets say TableCell)
  6. Now go to Main StoryBoard of the Project and In the Object Library, select the “Table View” object and drag it into the view.
  7. Again from the Object Library select “TableViewCell” and drag it inside the TableView.
  8. Connect the TableView dataSource and delegate to the View Controller.
  9. Now go to the class inspector of table View Cell and give the class name as “TableCell”(name of the table view cell).
  10. Now go to the “TableCell” XIB and take one Label and one image View inside the XIB View.
  11. Make IBOutlet for both Label and image in “TableCell.h”

The TableCell.h will look something like this

// TableCell.h

// CustomTableView

//

// Created by Nilesh on 4/13/16.

// Copyright © 2016 Nilesh. All rights reserved.

//

#import <UIKit/UIKit.h>

@interface TableCell : UITableViewCell

@property (weak, nonatomic) IBOutlet UILabel *nameLabel;

@property (weak, nonatomic) IBOutlet UIImageView *cellImage;

@end

 

12. Make a IBOutlet Connection for the TableView in ViewController.h.

The “ViewVontroller.h” will look Something Like this .

//

// Created by Nilesh on 4/13/16.

// Copyright © 2016 Nilesh. All rights reserved.

//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (weak, nonatomic) IBOutlet UITableView *tableView;

@end

 

 

13. Now go to interface section of ViewController.m and declare two arrays.

// ViewController.h

// CustomTableView

@interface ViewController (){

NSArray *tableDataArray;

NSArray *imageThumbnails;

}

@end

 

14.  In the ViewDidLoad initialize two arrays.

– (void)viewDidLoad {

[super viewDidLoad];

tableDataArray = [NSArray arrayWithObjects:@”apple”,@”Mango”,@”Banana”, nil];

imageThumbnails = [NSArray arrayWithObjects:@”apple.jpeg”,@”mango.jpeg”,@”bananna.jpeg”, nil];

// Do any additional setup after loading the view, typically from a nib.

}

 

15. Make Sure that You have images with such name in Your Project . Import “TableCell.h” in your “ViewController.m”.

16. Now define the Datasource methods for the TableView.

#pragma mark – DataSource Methods

– (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

{

return [tableDataArray count];

}

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

{

static NSString *simpleTableIdentifier = @”TableCell”;

TableCell *cell = (TableCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

if (cell == nil)

{

NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@”TableCell” owner:self options:nil];

cell = [nib objectAtIndex:0];

}

cell.nameLabel.text = [tableDataArray objectAtIndex:indexPath.row];

cell.cellImage.image = [UIImage imageNamed:[imageThumbnails objectAtIndex:indexPath.row]];

return cell;

}

17. Now run the app it will give You the desired output.

Enjoy Coding 🙂

 

 

 

Advertisements