iPhone Programming Tutorial – {Part 1} UITableView using NSArray

Creating iPhone Tutorial Introduction:

I am going to write series of UITableView tutorials (Video Tutorials as well) to help developers and help you make a new applications for Apple store. My target is to make the customized UITableView using UITableViewCell which is requested on “Request Tutorial” page. Following are the list of tutorials, which I will be posting on this blog:

1. Create a Simple UITableView [Populate UITableView With Array]
2. Navigatation in UITableView [Navigatation on UITableView using didSelectRowAtIndexPath]
3. Grouped UITableView [Using Interface builder]
4. Tips for UITableView Design [Change UITableView properties i.e background colour, accessory type, add footer and header]
5. Add, Delete & Re-order UITableView rows
6. Creating UITableView using UITableViewCell
7. Adding Pictures into your UITableView using Interface builder
8. UITableView & UITableViewCell examples and tips

[Note: If you want more tutorials on UITableView or UITableViewCell, then add a comment on "Request Tutorial" Page]

Idea for Application:

So, this tutorial is about creating a Simple UITableView using NSArray (or you can use NSMutableArray). Follow the following steps to create a UITableView which output will look like this:

Picture 11 iPhone Programming Tutorial   {Part 1} UITableView using NSArray

iphone programming tutorial steps to follow:

1. Start Xcode and Create a new Xcode Project. Name it, SimpleTable.
Picture 1 iPhone Programming Tutorial   {Part 1} UITableView using NSArray
Picture 2 iPhone Programming Tutorial   {Part 1} UITableView using NSArray
Picture 3 iPhone Programming Tutorial   {Part 1} UITableView using NSArray

2. Open SimpleTableViewController.h file from “Group & Files” panel in Xcode. Write the following code after import and before @end:

@interface SimpleTableViewController : UIViewController {
IBOutlet UITableView *tblSimpleTable;
}

3. Save SimpleTableViewController.h file and open SimpleTableViewController.xib from Xcode project (Tips, Press cmd + 1 to open ‘Attribute Inspector. Press cmd + shift + l to open Library) .

4. Now In Library, drag the ‘Table View’ in View Window.
Picture 5 iPhone Programming Tutorial   {Part 1} UITableView using NSArray
Picture 6 iPhone Programming Tutorial   {Part 1} UITableView using NSArray

5. Now press cmd + 2 to open ‘Connections Inspector’ and then press your mouse over the circle next to tbleSimpleTable and try to drag it to table

Picture 7 iPhone Programming Tutorial   {Part 1} UITableView using NSArray

6. Now select ‘Table View’ inside View and you will see change in “Connection Inspector”. Again in ‘Connection Inspector’ circle next to ‘dataSource’, drag it to “File’s Owner”. Repeat this for ‘delegate’
Picture 8 iPhone Programming Tutorial   {Part 1} UITableView using NSArray
Picture 9 iPhone Programming Tutorial   {Part 1} UITableView using NSArray

8. Now close Interface builder because you do not need it for now. Open SimpleTableViewController.m file and after dealloc method write following code (it should be before @end)

#pragma mark Table view methods

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}

// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 0;
}

// Customize the appearance of table view cells.
- (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];
}

// Set up the cell...
return cell;
}

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

9. Now if you run the application by pressing cmd + r (or by pressing build and Go button in Xcode). You will see a simple table
Picture 9 iPhone Programming Tutorial   {Part 1} UITableView using NSArray

10. Now change in numberOfRowsInSection method and write the following code

// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 1;
}

11. You need to change in cellForRowAtIndexPath method to show a single line text. You need to add one row to display that (cell.text = @”text”) which should look like this:

// Customize the appearance of table view cells.
- (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];
}

// Set up the cell...
cell.text = @"Text";
return cell;
}

12. Run the application and you will see
Picture 10 iPhone Programming Tutorial   {Part 1} UITableView using NSArray

13. Next step is to create an array and display it to UITableView. For that you have to add ‘NSArray’ in SimpleTableViewController.h file. So your SimpleTableViewController.h should look like this:

#import

@interface SimpleTableViewController : UIViewController {
IBOutlet UITableView *tblSimpleTable;
NSArray *arryData;
}

@end

14. Now open SimpleTableViewController.m file and uncomment the ‘viewDidLoad’ method and create a simple array:

- (void)viewDidLoad {
arryData = [[NSArray alloc] initWithObjects:@"iPhone",@"iPod",@"MacBook",@"MacBook Pro",nil];
[super viewDidLoad];
}

15. Last step is to change in cellForRowAtIndexPath method, so that it get the objects from arrayData and simply display it on UITableView. So code for that method should look like this:

- (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];
}

// Set up the cell...
cell.text = [arryData objectAtIndex:indexPath.row];
return cell;
}

Final output will look like this
Picture 11 iPhone Programming Tutorial   {Part 1} UITableView using NSArray
Picture 12 iPhone Programming Tutorial   {Part 1} UITableView using NSArray

Code for iPhone Application:

Click here for the code Project code.

Follow iphone programming tutorial video here:

You can watch the screen cast here. or Watch in on YouTube (url http://www.youtube.com/watch?v=pCcZDrNCQzU) and subscribe to my videos.

Popularity: 66% [?]

My name is Adeem M Basraa. I am a software engineer from Lahore, PK. I’ve been involved in software development for nearly 4 years, with the last 1 year focused on application development for mobile devices (iPhone & Android).

57 Comments on "iPhone Programming Tutorial – {Part 1} UITableView using NSArray"

  1. Andi Stancu says:

    Hei, I’m doing the tutorial now. I just wanted to let ya know.

  2. Andi Stancu says:

    Great and simple tutorial. I’d just like to add, that in the text version of the tutorial you forgot the step where you say how many rows the table should have.

    Really looking forward for more of your training. I would love to see how to customize rows (like adding an icon), how to add and edit rows, and how to save it in a database.

    Anyway, I added you to my reader and I’m fallowing you on Twitter, anxious to see more of your tutorials.

    Thank you very much,
    Andi

  3. Adeem Basraa says:

    Thax Andi for your comments, can you please check my other 2 tutorials, give you details for UITableView. I am going to add another tutorial today regarding Editing table. So stay tune :)

  4. Brad Carson says:

    Great tutorial, exactly what we need more of.
    As Andi said, you’re missing the small step where the numberOfRowsInSection method should return arryData.count. Great job, please keep up the good work!

  5. Vlad says:

    Hey, good tutorial. In the text version, you also forgot to put “” in the @implementation of the tableviewcontroller in the .h file

  6. Vlad says:

    Seems my last post was stripped of the code inside the quotation marks, here’s what it’s supposed to be:

    @interface SimpleTableViewController : UIViewController {
    rest of the code here
    }

  7. Vlad says:

    ok… seems your site is stripping “illegal” characters, sorry for all these posts…

    <blockquote cite=”@interface SimpleTableViewController : UIViewController {
    rest of the code here
    }”>

  8. beedub says:

    on this line
    - (void)viewDidLoad {

    i keep getting the error “error: expected identifier or “(” before “{” token

  9. beedub says:

    now im getting arryData undeclared

  10. Adeem Basraa says:

    Can you please do not copy this text from website, it might not be copied to Xcode in right format. So either write it by your self or you can download the code which is already posted. Also if you didnt able to solve the issue please send me your xcode project and I will check it out.

  11. beedub says:

    Nvm i got it to work

    is there a way to put a button on the Next View one so that it can go to a third view?

  12. Mark says:

    Excellent tutorial! However, I can only get one value in the array…the first one…to display in my table. I’ve gone over all the code, and believe I have everything written correctly. Any ideas on what I may have missed? Thanks!

  13. Adeem Basraa says:

    @Mark,
    Can you please go back and write the code by yourself. If you copied it then sometimes it didnt work. Also you can check the code which I attached with this tutorial or you can send me the code by yourself.

  14. Adeem Basraa says:

    @beedub
    I am going to write a tutorial on this today for sure :)

  15. Mark says:

    @Adeem

    The problem is that the code above doesn’t initialize the number of rows as such:

    return [arryData count];

    That last reference to this in the tutorial (not the downloaded code) was:

    return 1;

    Once I downloaded the code and reviewed it, I quickly found the error. Thanks!

  16. Sing says:

    I did the cell.text = [arry Data ObjectAtIndex:indexPath.row]; But it only shows the “iPhone” on the simulator. Any idea?

  17. Adeem Basraa says:

    @Sing,
    Issue might be with the copy paste, can you download the code which is attached to this post? And then copy from there.
    Hope it will fix the issue :)

  18. Chris says:

    I’m running SDK 3.0 and am getting an error message below:

    cell.text = [data objectAtIndex:indexPath.row];

    The message says that ‘setText:’ is deprecated…

  19. Adeem Basraa says:

    @Chris
    You can use,
    cell.textLabel.text =[data objectAtIndex:indexPath.row];

  20. Chris says:

    Thank you!

  21. Debty says:

    Ahaan… I will follow.

  22. eddy says:

    I tried to follow the instructions but at step 5 i got stuck.
    There you need to drag the connect text to tbleSimpleTable

    But i did the same as the tutorial but i dont have that option. I downloaded this week the most recent SDK.
    Why dont i get the same as the screenshots?

  23. Adeem Basraa says:

    @Eddy
    Why not you looked at the video below? just make sure you have selected the “File’s Owner” and then you have pressed the cmd+2. If you are still not able to see that after watching the video, Please let me know, I will help you in details then.

  24. eddy says:

    Thnx Adeem

    But the text does not match the video. The text that i should insert contains in the video some more after UIViewController and u type it between

    so i guess the text explain is missing some code, right?

  25. Romka says:

    Great tutorial, my first experience! Struggled a while though:
    numberOfRowsInSection should return 4 at most in this case (this wasn’t mentioned, otherwise only one row will show), 5 and more would make the code stumble on the nil at the end of the array, so array.length or something similar should be used there. Also …ViewController.h defines the array as arryData when you copy it off the tutorial, same thing with arry in the viewDidLoad method.

    Hopefully this helps someone else struggling and keep them from being discouraged. Remember, every good programmer’s strength is in the debugging.

  26. amol says:

    Hi nice tutorial. But I want two tables in the same view.
    How this can be achieved.
    any advice.

    Thanks
    amol

  27. Andy says:

    I am posting here because the new tutorial has no area to add, but can you explain how to extract info from a plist file. My plist looks something like this:

    root Dictionary 32 Items
    Apple Array 3 Items
    Item0 String Red
    Item1 Number 1
    Item2 String Produce

    I am looking to populate a NSNumber and NSStrings when they choose Apple. I hope I made sense, but there is not a lot out there on the file structure of plists and how to extract that data into my app.

  28. ben says:

    i think you missed this from the .m

    Change

    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 1;
    }

    to

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

  29. Al says:

    You have been very thorough in your treatment of the TableView, however a TableView by itself is not of much use. It must eventually lead to something, I am assuming usually a DetailView.

    Could you possibly add a tutorial on how to get your TableViews to Open DetailViews and how to populate those DetailViews with data, say for instance, an image of that item, a text box with text about that particular Item, and a Label of that item.

    Cheers.

  30. Myke says:

    Hi,
    having an issue, followed everything correctly, but when I run the Application on the simulator it crashes and then tells me I have EXC_BAD_ACCESS, no errors, just that message.

    I’ve checked all auto releases etc, but can’t find anything, help would be great.

  31. Calumk says:

    Yes, @Ben is right,
    this fixes the problem that @Sling was having,
    Also, just incase anyone knows.. why are we calling it arryData not arrayData?

  32. Martijn says:

    Thanx for the tutorial Adeem!

    I’ve got one question, what means the ‘static’ for the cell identifier? If I remove ‘static’ it does not seem to make any difference.

    Keep up the good work

  33. Annie says:

    Hi! this is a great tutorial. Great job!!!

    I was wondering if there is a way to load the UITable from a flat file.

  34. jayant says:

    Thanks for the tutorial Adeem,

    can you please tell how to block selection of a specific row in a tableview.

    Thnaks

  35. jayant says:

    hi Adeem

    i am new to i-phone development.
    can u please help me to get all information’s for all contacts stored in i-phone

  36. yogo says:

    Thanks for your posting. I’m impress with your generousity!
    Please guide me on how to connect from one page design to another.
    As your sample HelloWord, if we click on Submit…where should the application will bring us?
    Once again thanks for your help.

  37. Brent says:

    For step 15, the function – (NSInteger)tableView:(UITableView *)table numberOfRowsInSection:(NSInteger)section also needs to be updated since it was statically set to 1 in step 10. It should now return [arryData count].

  38. Hugo says:

    Hello, I did exactly the same thing but I have just the table view which doesn’t scroll, it’s very strange. Anyone to help me ?

  39. Hugo says:

    I did all the steps and I have just my tableview which doesn’t scroll. Anybody to help me ?

  40. cyda says:

    hi,

    great tutorial. Thank you very much.

    one thing you’ve forgot to describe;

    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    needs a change from return 1; to return [arrayData count]

    i figured it out from the source

    grettings

  41. Vikas Saini says:

    Hi,

    How can i add navigation bar in this iphone application.

    Thanks in advance.

  42. Pidudiduu says:

    Thanks for sharing this great tutorial!

    I’m using XCode 3.

    I made two modifications to work the tutorial successfully.

    1) Must change the number of rows in the table. From 1, i changed it to 4.
    // Customize the number of rows in the table view.
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 4;
    }

    2) Changed the cell.text because of deprecation warning. Although it still works though. I just don’t like seeing the warning.
    Original:
    cell.text = arryData objectAtIndex:indexPath.row];

    Modified:
    cell.textLabel.text = [arryData objectAtIndex:indexPath.row];

    Cheers!

  43. thehehtre says:

    Hi, thanks for greate tutorial series.

    In this article, simulator screen just display 1 row because you set return to 1 row at step 10. Modify it to count of arryData and see full data list.

  44. Carles says:

    Very nice!

    But some updates:
    - cell.text is deprecated, use cell.textLabel.text
    - in numberOfRowsInSection you have to return [arrData count] instead of 1

    Thank you!

  45. om says:

    Hi, many thanks for creating these tutorials for newbie like me : ) .

    However, I found 2 issues when following the “Part 1 – UITableview”

    1. I found that I can only display the first row of the array “iPhone”, after checking with the Video and the step 10 , is it due to missing the “return [arryData count]” ?

    2. Actually, I can compile and run the SimpleTable but I found a warning for the cell.text =@”text”;” warning – ‘setText’:is deprecated, do you have any idea why I get this warning ?

    Thanks
    OM
    (I am using Xcode : V3.2.6)

  46. M. says:

    Thanks for the tutorial!

    It’s clear, easy to follow and it works!

  47. Stefan says:

    Hi,

    thank’s for your tutorial. You’ve missed to mention:

    // Customize the number of rows in the table view.
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [arryData count];
    }

    Stefan

  48. kumar Anil says:

    cell.text = [arryData objectAtIndex:indexPath.row];
    The above mentioned says.
    Availablity iOS (2.0 and later)Deprecated: Use the textLabel and detailTextLabel properties instead.

  49. Cory says:

    This is an excellent tutorial.

    You did miss one thing though. There is a piece of code that needs to be changed. You need to remember to change this:

    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return 1;
    }

    to this:

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

    Otherwise it just returns the first item.

Trackbacks for this post

  1. Complete List of UITableView UITableViewCell Tutorials + Video Tutorials | iPhone Diary
  2. iPhone SDK Tutorial + Video Tutorial - {Part 2} Navigation in UITableView | iPhone Diary
  3. iPhone SDK Tutorial + Video Tutorial - {Part 3} Grouped UITableView | iPhone Diary | Tutorial
  4. iPhone SDK Tutorial or Video Tutorial - {Part 4} Tips for UITableView Design [Add Header, Footer, background images & change design] | iPhone Diary | Tips
  5. iPhone SDK Tutorial - {Part 6}: Creating custom UITableViewCell Using Interface Builder [UITableView] | iPhone Diary | Tutorial
  6. iPhone SDK Tutorial or Video Tutorial - {Part 5}: Add, Delete & Reorder UITableView Rows | iPhone Diary | Cydia
  7. iPhone Tutorial – {Part 7}: Adding Pictures into your table’s using Interface builder | iPhone SDK Tutorial for Beginners | Tips
  8. A Collection of iPhone SDK Tutorials for Beginners « Damien Hogan

Got something to say? Go for it!