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:
iphone programming tutorial steps to follow:
1. Start Xcode and Create a new Xcode Project. Name it, SimpleTable.
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.
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
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’
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
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
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
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: 68% [?]
Hei, I’m doing the tutorial now. I just wanted to let ya know.
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
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
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!
Hey, good tutorial. In the text version, you also forgot to put “” in the @implementation of the tableviewcontroller in the .h file
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
}
ok… seems your site is stripping “illegal” characters, sorry for all these posts…
<blockquote cite=”@interface SimpleTableViewController : UIViewController {
rest of the code here
}”>
on this line
- (void)viewDidLoad {
i keep getting the error “error: expected identifier or “(” before “{” token
now im getting arryData undeclared
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.
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?
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!
@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.
@beedub
I am going to write a tutorial on this today for sure
@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!
I did the cell.text = [arry Data ObjectAtIndex:indexPath.row]; But it only shows the “iPhone” on the simulator. Any idea?
@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
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…
@Chris
You can use,
cell.textLabel.text =[data objectAtIndex:indexPath.row];
Thank you!
Ahaan… I will follow.
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?
@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.
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?
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.
Hi nice tutorial. But I want two tables in the same view.
How this can be achieved.
any advice.
Thanks
amol
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.
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];
}
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.
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.
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?
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
Hi! this is a great tutorial. Great job!!!
I was wondering if there is a way to load the UITable from a flat file.
Thanks for the tutorial Adeem,
can you please tell how to block selection of a specific row in a tableview.
Thnaks
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
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.
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].
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 ?
I did all the steps and I have just my tableview which doesn’t scroll. Anybody to help me ?
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
Hi,
How can i add navigation bar in this iphone application.
Thanks in advance.
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!
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.
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!
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)
Thanks for the tutorial!
It’s clear, easy to follow and it works!
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
cell.text = [arryData objectAtIndex:indexPath.row];
The above mentioned says.
Availablity iOS (2.0 and later)Deprecated: Use the textLabel and detailTextLabel properties instead.
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.