If my tutorial help you then please donate, so that i continue writing free tutorials for every developer/programmer/freelancer
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: 72% [?]
Related posts:
- iPhone Programming Tutorial: {Part 3} Grouped UITableView I am going to write series of UITableView tutorials (Video...
- iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView] This tutorial will help you to create custom rows in...
- iPhone SDK Tutorial – {Part 5}: Add, Delete & Reorder UITableView Rows This tutorial will explain, how you can change the UITableView...
- iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder Creating iPhone Application: Introduction: I am going to write series...
- iPhone Programming Tutorial: Complete List of UITableView Tutorials + Videos Complete List of UITableView tutorials plus few video tutorials as...
[...] SDK Tutorial – {Part 2} Navigatation in UITableViewiPhone SDK Tutorial – {Part 1} UITableView using NSArrayiPhone SDK Tutorial – Complete List of UITableView Tutorials + VideosVideo Tutorial: Bypassing Code [...]
[...] SDK Tutorial – {Part 2} Navigatation in UITableViewiPhone SDK Tutorial – {Part 1} UITableView using NSArrayiPhone SDK Tutorial – Complete List of UITableView Tutorials + VideosVideo Tutorial: Bypassing Code [...]
[...] Create a Simple UITableView [Populate UITableView With Array] 2. Navigatation in UITableView [Navigatation on UITableView using didSelectRowAtIndexPath] 3. [...]
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
[...] Create a Simple UITableView [Populate UITableView With Array] 2. Navigatation in UITableView [Navigatation on UITableView using didSelectRowAtIndexPath] 3. [...]
[...] Create a Simple UITableView [Populate UITableView With Array] 2. Navigatation in UITableView [Navigatation on UITableView using didSelectRowAtIndexPath] 3. [...]
[...] Create a Simple UITableView [Populate UITableView With Array] 2. Navigatation in UITableView [Navigatation on UITableView using didSelectRowAtIndexPath] 3. [...]
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
}”>
[...] Tutorial -Table View- Part 1: Create a Simple UITableView [Populate UITableView With Array] iPhone Tutorial -UITable View- Part 2: Navigatation in UITableView [Navigatation on UITableView [...]
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.