Advertise Your App Here

iPhone Programming Tutorial - UITableView Hello World

In this tutorial I will walk to you through creating a simple “Hello World” application using a UITableView for the iPhone. There are many ways that a Hello World program could be made on the iPhone, I am going to show you the simplest. This tutorial assumes you have a basic understanding of Objective-C. Apple has provided a very simple and straight forward tutorial on Objective-C. You can find it here.

You will learn how to:

Create a New Navigation-Based Application
Learn About the Default Files
Update the UITableView Cells to Display “Hello World” Text

This tutorial assumes that you have already installed the iPhone SDK. If you are unsure how to do this, click and follow the steps.

Creating a New Navigation-Based Application

Open Up Xcode

You will be doing all of your development in Xcode. Then close the Welcome window (if it shows up)

Start a new iPhone OS Project
Click Xcode > New Project and a window should pop up like this:

Make sure Application is selected under iPhone OS and then select Navigation-Based Application. Click Choose… It will ask you to name your project. Type in “Hello World” and let’s get started.

Learn About the Default Files

What is all this stuff?
There are quite a few files that get added to your project. At first glance, this looks kind of intimidating. Don’t worry, we only need to edit one of them. Here is a quick explanation of the different files. You don’t have to read this part but having this many files is what confused me the most when I started developing for the iPhone.

CoreGraphics.framework, Foundation.framwork, UIKit.framework - You guessed it, this is a set of library functions provided by Apple that we use in our application. We use these as includes similar to any other language that includes library functions.
HelloWorld.app - This is your app that gets installed on the iPhone. We don’t really need to worry about this right now
Hello_World_Prefix.pch - This is another include file that gets compiled separately from your other files so you don’t need to include it on each file. It contains some code to include the data inside the frameworks.
Hello_WorldAppDelegate.h - This is a header file that contains all of our definitions for variables that we will be using. It’s very similar to a header file in C or C++;
Hello_WorldAppDelegate.m - All of the magic starts here. Consider this file our starting point for execution. The main.m file invokes this object.
Info.plist - This contains various meta information about your program. You won’t really need to edit this until you are ready to start testing on the iPhone
main.m - Like most programming language, this file contains our main function. This is where execution begins. The main function basically instantiates our object and starts the program. You shouldn’t need to edit this file.
MainWindow.xib - This contains the visual information of our main window. If you double click on it, it will open in a program called “Interface Builder”. We will get to this a little later. Just on thing to note is this file does not contain any code.
RootViewController.h, RootViewController.m - These are files for a view controller that gets added to our main window. Basically, Apple has already created a simple interface when you clicked on Navigation-Based Application. Since most navigation-based applications use a Table View, Apple has provided it for us to use.
RootViewController.xib - This is a view that Apple has provided that emulates a table. It has rows and columns. We will be displaying our “Hello World” text inside one of these rows

Now, all of these files together create a basic program. Go ahead and click on the Build and Go button at the top of Xcode. Make sure the drop-down on the top left says Simulator | Debug, this tells Xcode that we are testing on the iPhone simulator.

You will see the iPhone simulator start and your program will launch. It’s not very interesting at the moment. All it shows is the Table View that Apple has added for us. So what we are going to do is add a row to this table view.

Update the UITableView Cells to Display “Hello World” Text

Let’s write some code

Start by opening RootViewController.m. This is the view controller that Apple added to our main view. All of the functions you see already created in here are functions that have been overridden from the Table View super class. Since we are editing a table, all of these functions will be related to editing a table. So find the function called numberOfRowsInSection.

This function tells the application how many rows are in our table. Currently, it returns 0. Let’s change that to return 1. This will tell the application that we want 1 row in our table. Now go down to the function called cellForRowAtIndexPath. This function gets called once for every row. This is where we define what content to display in a given row. In this case we want the row to be a string that says “Hello World”.

What this function is doing is creating a new cell object and returning it. The code between the i(cell==null) block checks to see if we have created a cell before, if not build a new cell, otherwise use the one we created before. This helps in performance so we don’t need to build new cells each time we visit this function. So right before the // Set up the cell comment add the following code:

[cell setText:@"Hello World"];

We are basically calling the setText method of the cell object and pass in the string “Hello World”. As you should know from reading Apples Objective-C overview, strings begin with an “@” symbol.

That’s it! Click the Build and Go button again to launch the iPhone simulator. You should now see a screen like this:

You can now use this code as a base for creating a Navigation Based application. In a later tutorial, I will detail how to populate this table view with an array of strings to create navigation for a simple program. If you get lost at any time, you can download the sample code for this program here hello-world. I hope you enjoyed the tutorial and if you have any questions, feel free to leave them in the comments. Happy Xcoding!

Posted on 26 Jul 2008 in iPhone Programming Tutorials
Digg |
Del.icio.us |
Stumble |

45 Responses

Ryan Says:

July 27th, 2008 at 12:01 am

Thanks for the tutorial. Looking forward to more of your examples.

Adam Says:

July 27th, 2008 at 1:46 am

Hi, I appreciate your contribution to the iphone developers community. I’m learning how to program using xcode. I’m sure your blog will come in handy.

I will check back regularly. Keep on writing.

Cheers.

iPhone and iTouch Hello World Application : fuXion :: Just learn it! Says:

July 28th, 2008 at 12:53 pm

[...] Update: Here is another step by step that applies to the SDK V. 2.0: http://icodeblog.com/2008/07/26/iphone-programming-tutorial-hello-world/ [...]

Francis Says:

July 29th, 2008 at 3:38 am

Thanks for the tutorial. I learnt something from it. Keep it up!

iPhone Programming Tutorial - Beginner Interface Builder Hello World | iCodeBlog Says:

July 29th, 2008 at 9:29 am

[...] my last tutorial UITableView Hello World I said that there are many ways to write a “Hello World” tutorial for the iPhone. [...]

Jon Says:

July 29th, 2008 at 11:14 am

Thanks SO much!! It is nearly impossible to find tutorials so far, and I am very psyched to have found your excellent site!! Looking forward to more, and more complex lessons!! THANK YOU!!

Brandon Says:

July 29th, 2008 at 11:56 am

Jon,
You’re welcome! I’m happy that I was able to help you out. When I was first learning iPhone development I had the same problem. That is the exact reason that I started this blog. Thanks for reading…

iPhone Programming Tutorial - Connecting Code to An Interface | iCodeBlog Says:

July 31st, 2008 at 8:13 am

[...] Hello World Tutorial Using UITableView [...]

iPhone Programming Tutorial - Transitioning Between Views | iCodeBlog Says:

August 3rd, 2008 at 4:41 pm

[...] We will be utilizing Apple’s UINavigationController. I will be using the code from the “Hello World” tutorial that I previously wrote. So if you have not completed it yet, go ahead and do it [...]

Bob Schoenburg Says:

August 5th, 2008 at 3:33 pm

Great tutorial. I have searched for hours but cannot find a way to determine which row has been selected “touched “in a table.

Can you help?

YnOt Says:

August 7th, 2008 at 12:30 pm

Nice one dude, im a total beginner and your advice is my bible at the moment, i cant emphasize how useful this sort of info is…many thanks and keep them coming!!

iPhone Dev · iPhoneの開発、どこからスタート？ Says:

August 7th, 2008 at 6:11 pm

[...] iPhone Programming Tutorial - UITableView Hello World [...]

iPhone Programming Tutorial - Populating UITableView With An NSArray | iCodeBlog Says:

August 8th, 2008 at 12:29 pm

[...] UITableView Hello World [...]

Ernest Oporto Says:

August 10th, 2008 at 6:09 am

Thanks for another simple example. I wish more tutorials moved at this pace, especially since you’re teaching some Objective-C along with Interface Builder and iPhone programming nuances.

J Says:

August 12th, 2008 at 2:38 pm

Nice to see a site like yours - Thanks.j.

Sarath Joseph Says:

August 15th, 2008 at 5:52 am

Very good for starting out with explanations to all the main questions. I look forward to reading all your other tutorials. Thanks

Brook Says:

August 24th, 2008 at 11:36 am

Thank You very much….. I’m a total beginner never programmed anything before…. I got so excited when “Hello World” appeared!

Tom Says:

August 26th, 2008 at 6:25 am

Well-explained, simple, and succinct. At last a good tutorial for the iPhone.
Congratulations on a job well done.
I look forward to seeing more of these!

Sam Wilson Says:

August 26th, 2008 at 7:49 am

Short, smart, and sweet. You, sir, are the man. Apple should hire you.

Ankit Thakur Says:

August 26th, 2008 at 8:18 am

Thanks for such a nice tutorial.

Sir, I am trying to display image and Text both in my UITableViewcell
where I am able to display both, but able to make the size of cell equals to the size of the image, as image size is large enough.
Here is my code, please check it.

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

static NSString *MyIdentifier = @”MyIdentifier”;

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier] autorelease];
cell.accessoryType=UITableViewCellAccessoryDetailDisclosureButton;
}
/**************************************************/
NSMutableArray *array = [NSMutableArray arrayWithObjects: @"Aquarius", @"Aries", @"Cancer", @"Taurus",@"Capricorn",@"Gemini", nil];
//index path is definately required
int x=indexPath.row;

NSString* imag1=[[NSBundle mainBundle] pathForResource:[array objectAtIndex:x] ofType:@”png”];
UIImage* myImg=[[UIImage alloc] initWithContentsOfFile:imag1];
CGRect imageRect=CGRectMake(0.0, 0.0, 100.0 , 100.0);
cell = [[[UITableViewCell alloc] initWithFrame:imageRect reuseIdentifier:MyIdentifier] autorelease];
cell.accessoryType=UITableViewCellAccessoryDetailDisclosureButton;
cell.text=[array objectAtIndex:x];
cell.image=myImg;

/***************************************************/

// Set up the cell
return cell;
}

Please help.

Brandon Says:

August 26th, 2008 at 9:10 am

LOL, thanks man. When I apply, I’ll be sure to put you as a reference.

demuro1 Says:

August 31st, 2008 at 12:03 pm

WOW this was awesome. I’ve been trying to make something like this work for a few days now based off of a tutorial from another site and it just keeps crashing the simulator. Thanks a million

George Everitt Says:

September 1st, 2008 at 11:46 am

I have 20+ years hard-core programming experience - none of it with Objective-C or Cocoa. I’m on week 2 of heavy-duty cramming to write an iPhone app, rewiring my 40+ year-old synapses to deal with Apple’s flavor of MVC. Last time I spent this much time with a new language was 1996 when I learned Perl. Wish me luck.

Thank you for this site - it is the best resource that I’ve found so far. If Apple doesn’t hire you, give me a shout.

Pat Says:

September 2nd, 2008 at 6:13 pm

Awesome!
I’m in the process of learning how to program on the iPhone, and this is the first tutorial that ive ever seen that delivers what it promises!
My only suggestion would be for a seperate tutorial that go into even more detail about the individual files that are created when you first make an app. (this is more for a sense of completion, as your brief descriptions are fine, as is)

Otherwise, an awesome tutorial! This site is bookmarked, and sure to become one of my “morning checking spree” websites, up there with tuaw.com, kotaku.com.au, and engadget.com!

well done!

Harry Wang Says:

September 3rd, 2008 at 9:07 pm

Nice blog. I wish I had found this a few weeks back. I have read something like 700+ pages of SDK PDF documentation pages from Apple’s iPhone Dev section of the Apple web site. You could have shaved some time off my learning!

I thought I would share some comments on your “beginning” tutorial that will hopefully alleve newbie fears for the commonly held belief that iPhone application development has a steep learning curve. It does feel steep if you are unfamiliar with the language and the tightly coupled SDK. Newness on two “fronts”.

This is mainly meant for folks not completely new to programming.

First, read a good Objective-C overview or tutorial that is not on the Apple website. One I found useful was:

http://cocoadevcentral.com/d/learn_objectivec/

The Apple overview on Interface Builder (IB) for iPhone development is not too confusing but may be a bit too much. You may want to browse it a little or find some third-party tutorial out there. Brandon does delve into it here but thus far he mainly has you complete steps within it but does not really explain what those steps are actually doing. Although, to be fair, I have not gone through every single tutorial here yet.

Then go straight to good iPhone application tutorials such as on this site. Just jump in and get your feet wet.

Delve deeper into some Apple Objective-C documentation to clarify a few language things (such as memory management).

Finally, refer to the Apple SDK documentation to clarify SDK properties and methods/messages you see in the tutorials (although Brandon is covering the ones he uses pretty well). Also good to discover some you don’t see mentioned but could come in handy.

Keep this in mind when reading Apple documents:

The Apple iPhone SDK documentation, as well as their documentation on Objective-C and such, are written very concisely and almost in a circular reference fashion. This is necessary in programming docs but seems to be quite excessive in this case due to the writers being pretty thorough. Forward references, so to speak, abound in these docs (or I read the documents in the wrong order!).

To read, no, to understand them, you must read a doc, understand part of it, scratch your head on the rest of it, and then go read more docs on similar topics. With the new docs read, you will have a few “a-ha” moments but you will have bigger “a-ha” moments when you go back to the previous doc and re-read parts of it.

Be sure to read in a calm, quiet atmosphere when reading Apple docs. I can read ASP.NET or Ruby stuff at a party and almost understand it perfectly but for some reason, this Objective-C/Cocoa hybrid takes concentration. I think it is the dang doc writing style.

Once you are comfortable, there are a whole slew of sample applications on the Apple iPhone dev web site. The “TheElements” one was pretty straightforward as are a few others.

This was more of a “pat on the back” to those who may start feeling helpless or lost at some point (prior to discovering awesome tutorial sites like this one). If you came to this site but are about to give up, don’t. Follow my advice above and rest easier.

Harry “no, I don’t know Brandon” Wang

lennie gordo Says:

September 13th, 2008 at 5:10 pm

simple direct and helpfull

Chip McAllister Says:

September 19th, 2008 at 10:47 am

Hey Brandon . . . THANK YOU!!! Man, I was SOOOOO overwhelmed before finding this site. I was ready to give up learning to program for the iPhone all together. I was a programmer about 8 years ago (Dynamic Database Application Developer using .ASP’s mostly with SQL Server and even Oracle sometimes). However, now that I am getting back into it, I am going to bite the bullet and familiarize myself with OOP, specifically C, C++ and everything pertaining to building iPhone apps. I have finished all of your tutorials and am STILL extremely fuzzy on most things . . . HOWEVER, your tutorials give me tremendous glimpses of hope that I will become proficient at developing iPhone Apps soon. If you know other (NON-CRYPTIC-APPLE DOCUMENTATION) sources for me to come up to speed like websites, books, online training courses or even training courses in Southern California, please let me know. In parting, I must say again THANK YOU, BRANDON . . . You have been a great help to me.

donnykbs Says:

September 22nd, 2008 at 2:55 am

Great tutorial for newbie like me, It’s simple, nice and most important, it works, thanks

Fred Says:

October 1st, 2008 at 3:19 am

Thx…very helpful

gonso75 Says:

October 4th, 2008 at 12:03 pm

Thanks for the tutorial!

Rene Says:

October 4th, 2008 at 12:44 pm

My first iPhone app…

mha Says:

October 8th, 2008 at 5:49 am

One question: testing application in simulator is great during development process, but is there a way how to upload it to the real device and test it on real iPhone/iPod touch? Or is the AppStore the only way to do it?

Surane Says:

October 9th, 2008 at 1:17 am

Thanks,

Juste for fun :

replace

[cell setText:@"cell"];

with

[cell setText:[[NSString alloc] initWithFormat:@”Cell : %d”,indexPath.row]];

Hardik Thakkar Says:

October 15th, 2008 at 5:28 am

Thanks a ton!

You’re doing a wonderful job.

This one is way too simple than Apple’s Hello World which made me nervous about Objective-C!

Deus.! Says:

October 30th, 2008 at 1:48 am

Thankyou!!!

Wonderful tutorial, really the best I have seen. I like how you explain the code. This is the best hello World I have seen out of about 8 that I have already seen.

Archetoy Says:

November 4th, 2008 at 5:45 am

Brandon, thanks so much for sharing your ideas and tutes with the world.
I am just starting into dev, and coming from a design/ideas only background, this is all new to me. luckily, your tutes have opened up my eyes. I still suck, but @ least i know what needs to be done.

Msg me if you need any graphics to support any apps mate, i may have a few ideas if you have spare time to develop =)

Shawn Says:

November 8th, 2008 at 2:45 pm

Thanks!

alexwhittemore.com » Blog Archive » iPhone development 101 Says:

November 29th, 2008 at 12:55 am

[...] specifically this post (coral). This is another blog to keep in your bookmarks folder, but the specific post above also [...]

iPhone Programming Tutorial - UITableView Hello World | iPhone Apps Dev Says:

December 2nd, 2008 at 12:18 pm

[...] Create a New Navigation-Based Application [...]

Rob Says:

December 16th, 2008 at 6:40 pm

I would like to be able to do the exact results of this app. But instead of using a tableview, I would like to have my own view with a UIButton. When i push the UIButton I want to go to the View2. how would I accomplish that?
Thanks,
Rob

Ghulam Mustasfa Says:

December 17th, 2008 at 5:48 am

Very nice, for absolute beginners.

links for 2008-12-18 « doug - off the record Says:

December 18th, 2008 at 11:07 pm

[...] 18, 2008Manymoon - Online To Do List, Task and Project Management with Google Docs December 18, 2008iPhone Programming Tutorial - UITableView Hello World | iCodeBlog December 18, 2008CAREER TOOLBOX: 100+ Places to Find Jobs December 17, 2008Official Gmail Blog: New [...]