9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Wednesday, February 27, 2013

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



Download Project

Author
Arun Kumar Munuswamy
Arun Kumar Munusamy

Mobile Application Developer
Chennai, INDIA

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;

@end

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
reuseIdentifier:cellIdentifier];
}

// 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]
delegate:self
cancelButtonTitle:@"OK"
otherButtonTitles:nil];
[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
Comments
{ 17 comments }
Sagar Thesia said...

Nice Example...

Yanker said...

thank you

Jamal Pittman said...

The iPhone has to be the most popular tech gadget that has been released in the past few years. As a telephone a messaging tool or a multimedia device the iPhone serves a purpose for everyone. iPhone wallpapers allows users to bring customization to another level.

shekhar said...

nice

lyndawass said...

I really like your post. I was also really enjoying your post information which is much interesting.....Thanks for sharing it....

sugarcrm integration said...

Outstanding read, I just passed this onto a colleague who was doing a little analysis on that. And he really bought me lunch because I found it for him smile So let me rephrase.

VIVEK KUMAR said...

Nice Tutorial...

Alexander said...

Great tutorial!

alicem28 said...

This was really very helpful for me..
Thank you

akshath n said...

thank you

Anonymous said...

thank you

Quốc Dũng Blog said...

thank you

ThanhTrung said...

Your view controller can implement UITableViewController instead, so you do not need XIB file and :)

rizal said...

Awesoomeeee great tutorial ...

Shreyo said...

Is it true that an iPhone app has to be developed on mac computer?

Arun Kumar Munusamy said...

@Shreyo: Yes. If you are planing to develop native iPhone application means, you need mac.

Linkites said...

Very nice post for developers to learn here. node js development company working on iPhone app tool PhoneGap for most of the App to create.

Post a Comment