Thursday, May 14, 2015

iPhone Application Table View

Here we are going to see about creating a simple table view with array of string as table contents. As I have already explained about creating a new project and redirecting the application to home screen in previous post, I am jumping directly to table view. In Blackberry and Android app development, we have separate fields like table view and list view / table field and list field. But in IPhone app development, we have only table view which acts as both.

iPhone Application Table View

Now let’s see about UITableView. Create a project and navigate it to home screen. 
In home screen header file (homescree.h) file, declare NSMutableArray for table data as mentioned in below code. I usually use NSMutableArray instead of NSArray because NSArray is non editable which means once if you initialize it with data’s, you cannot insert or delete the data’s in NSArray where as it is possible in NSMutableArray. 

#import <UIKit/UIKit.h>

@interface homescreen : UIViewController<UITableViewDataSource, UITableViewDelegate>
    NSMutableArray *strArray;

@property(nonatomic,retain)NSMutableArray *strArray;


UITableViewDataSource and UITableViewDelegate are the protocols of Objective C which are used to display table view.
Then, in main file (homescreen.m) synthesize the table view and array which we declared in header file as mentioned below.

@synthesize strArray;

Synthesize will allows user to access the fields and variables declared in header file.
Allocate the array value in the initWithNibName so that when the application starts, it will automatically hit the initWithNibName, and it will allocate the array.

strArray = [[NSMutableArray alloc]init];

As we already know, viewDidLoad is the constructor add values to the array in viewDidLoad as mentioned below

strArray = [NSMutableArray arrayWithObjects:@"9Lessons",@"Egg Labs",@"Wall Script",@"FG Login", @"9Lessons Reader", @"9Lessons Demo" ,nil];

Now it’s time to implement table view. Implementing a simple table mainly involves 3 functions which are mentioned below
• numberOfRowsInSection (used to declare row count of table)
• cellForRowAtIndexPath (used to declare cell text of table)
• didSelectRowAtIndexPath (table cell onclick function)

First we will initialize the number of rows for the table in numberOfRowsInSection function as mentioned below

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
return strArray.count;

In the above code, I have declared the array count as row count of the table.
Now we have to assign the array values to the table cells 

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

// Identifier for retrieving reusable cells.
static NSString *cellIdentifier = @"MyCellIdentifier";

// Attempt to request the reusable cell.
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];

// No cell available - create one.
if(cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault 

// Set the text of the cell to the row index.
cell.textLabel.text = [strArray objectAtIndex:indexPath.row];

// Set image icon to every cell. This is optional. If you want, you can add it.
cell.imageView.image = [UIImage imageNamed:@"egg.png"];

return cell;


In the above function, each and every line of code are explained with commented lines. Adding thumbnail image icon is optional. I don’t want to display the table view plain. To add spices, I have added the icon to it. 

Now we have to implement onclick function for the table view

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

// Show an alert with the index selected.
UIAlertView *alert = [[UIAlertView alloc]
initWithTitle:@"Cell Selected"
message:[NSString stringWithFormat:@"Cell Id %d", indexPath.row]
[alert show];
[alert release];

Now all the coding part is over. In application development we may declare several variables. Once we allocate a variable, surely it has to be de-allocated to free the memory. In our case we have allocated array. Now we have to release the array as mentioned below 

- (void)dealloc
[strArray release];

So, coding part is over. Here comes the designing part. Open the home screen XIB file (homescreen.xib) and add UITableView as shown in the below image

iPhone Application Table View

Now if you run the application, you can able to see the table view in output. But there will be no data in the table view because we have not assigned the data source and delegate. It has to be done as shown in the below image

iPhone Application Table View

Here the datasource is linked to the file’s owner

iPhone Application Table View

Here the delegate is linked to the file’s owner

iPhone Application Table View

Now your table view will look like this.

Now save and run your application. Your output scree will look like this

iPhone Application Table View

iPhone Application Table View

In addition to the table view tutorial, I will show you how to add application icon to your application. 
Click on the root header of your project directory as shown below

iPhone Application Table View

And you will get the project summary screen. Then you have to right click on the app icon to browse the image in file path as shown below

iPhone Application Table View

Now select your desired app icon. Note, your app icon should exactly in size of 57 x 57.

iPhone Application Table View

Select your image and the app icon in summary screen will look like this

iPhone Application Table View

Now run your application. You got your app icon.

iPhone Application Table View

Arun Kumar Munusamy Web Developer

Morbi aliquam fringilla nisl. Pellentesque eleifend condimentum tellus, vel vulputate tortor malesuada sit amet. Aliquam vel vestibulum metus. Aenean ut mi aucto.

No comments:

Post a Comment