Custom UITableViewCell example in iOS

Custom UITableViewCell example in iOS

January 29, 2015 by Manishankar 0 Comments

       We have already worked on implementing an UITableView in ios development. So now let’s move further. In this tutorial I am going to implement custom UITableViewCell as an additional part of the previous UITableView tutorial.

            UITableView is an collection of UITableViewCell’s. It defines the attributes and behaviour of the cells. UITableViewCell may contain image, text, label or whatever. User can use the default cell or he/she can modify them as per their requirement in the app development process. Read apple documentation about UITableViewCell.

Overview

    In this tutorial I am going to create an application with customized UITableViewCell’s, which contains food recipe image, name and their preparation time. 

Getting Started

      Create a new single view application. Enter the project name as ‘CustomUITableViewCell’. Enter the organization and company identifier details. Select the device family as ‘iPhone’. Select next and save the project.

 

           Now your project should contains these files,

 

         Select Main.Storyboard file. Drag and drop an UITableView in the viewcontroller scene. Create an outlet for the UITableView as ‘tableViewObject’ and connect the datasource, delegate to the file owner.

 

        Add this code inside the ViewController.h file. Here we are declaring three array’s to display recipe image, name and time needed to prepare them. 

1	NSMutableArray *tableAray,*foodImageArray,*timeArray;

 

        Now add this code below inside the ViewDidLoad method in the ViewController.m file.

1 2 3 4 5 6

tableAray = [[NSMutableArray alloc] initWithObjects:@"Food 1",@"Food 2",@"Food 3",@"Food 4",@"Food 5",@"Food 6",@"Food 7",@"Food 8",@"Food 9",@"Food 10", nil];       foodImageArray = [[NSMutableArray alloc] initWithObjects:@"image1.png",@"image2.png",@"image3.png",@"image4.png",@"image5.png",@"image6.png",@"image7.png",@"image8.png",@"image9.png",@"image10.png",@"image11.png", nil];         timeArray = [[NSMutableArray alloc] initWithObjects:@"30 min",@"22 min",@"5 min",@"44 min",@"22 min",@"33 min",@"50 min",@"25 min",@"12 min",@"10 min", nil];

 

     Oops! We need to add the recipe images. Download and add these recipe images inside your project. These images will be displayed in the UITableViewCell. 

 

Create Custom UITableViewCell

        Select File–>New–>File to create a new file. Enter the file name as ‘CustomCell’. Select the SubClassof as ‘UITableViewCell’. Uncheck the options ‘Targeted for iPad’ and ‘With XIB for user interface’ and select next to save the files.

 

          Now we need to create a xib file. Select File–>New–>File. Select file type as user interface–> Empty. Select next and save the file.

         Drag and drop an UITableViewCell on the xib. Now add an UIImageView and two labels for recipe name and time inside the UITableViewCell. Now your xib file should look like this,

          Now you need to connect your new xib file to CustomCell class. Select the root view under object in the xib file. In the third column of the file inspector you can find a field named as ‘Custom Class’. Enter the value as ‘CustomCell’ the newly created class name.

      UITableView does not destroy every cell after using them. It will recycle these cell’s to improve their performance. To do this UITableView needs to find the specific cell. So the Cell Identifier is used to identify a particular cell. Even you can  implement multiple cell’s for an UITableView.

         Now select the root view under objects in the xib file. You can find the field named ‘Identifier’ on the fourth column of the file inspector. Enter the value as ‘CustomCell’.

     

      Create IBOutlets for UIImageView, recipe name label and time label as ‘imageView’,’foodName’ and ‘time’. Add @synthesize to these IBOutlets in the CustomCell.m file like this,

1	@synthesize foodName,imageView,time;

Implement UITableView

       We have already created our custom UITableViewCell so its time to implement the UITableView. Add these methods inside the file ‘ViewController.m’.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

#pragma - mark UITableView Methods   - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section   {       return [tableAray count];   }   - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath   {       return 70;   }   - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath   {       static NSString *simpleTableIdentifier = @"CustomCell";              CustomCell *cell = (CustomCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];       if (cell == nil)       {           NSArray *nibArray = [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil];           cell = [nibArray objectAtIndex:0];       }       cell.foodName.text = [tableAray objectAtIndex:indexPath.row];       cell.imageView.image = [UIImage imageNamed:[foodImageArray objectAtIndex:indexPath.row]];       cell.time.text = [timeArray objectAtIndex:indexPath.row];              return cell;   }   - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath   {       UIAlertView *selectedAlert = [[UIAlertView alloc]                                    initWithTitle:[NSString stringWithFormat:@"%@ Selected", [tableAray objectAtIndex:indexPath.row]] message:[NSString stringWithFormat:@"It takes %@ to prepare!",[timeArray objectAtIndex:indexPath.row]] delegate:nil cancelButtonTitle:@"Got It" otherButtonTitles:nil];     [selectedAlert show];   }

 

       Implement the ‘UITableViewDelegate’ and ‘UITableViewDataSource’ in the ViewController.h file. Like this,

 

Conclusion

   In the above code everything is implemented pretty same as UITableView implementation. The only difference is we have implemented the CustomCell instead of UITableViewCell in the ‘cellForRowAtIndexPath’ method. Now everything seems to work fine. You can download the source code below to understand this complete app development process.