iOS Tutorials / The old ways

UITableView tutorial with pushing new view on tap

iOS Tutorials / The old ways IMG_0568.JPG

This tutorial will show you how to populate a table using UITableView, NSMutableArray and Navigation-Based application for iPhone and how to create detail view. Tutorial includes example code, sample project and pictures from Interface Builder.

First thing we need to do is to create a new project, Navigation-based Application and call it for example “MyUITableView”.

Open RootViewController.h and create new variable NSMutableArray called myList

Open the RootViewController.m and uncomment and edit the viewDidLoad function. First you need to initialize the mutable array and than add few objects in it. In this example we’ll create a list of different programming languages.

Now we need to edit the tableView, numberOfRowsInSection function to return number of rows in the array instead of just “0”. It will look like that:

And we can’t forget to release the array from memory once we are done. Just edit the dealloc function and add [myList release];.

Last thing we need to do to make the basic TableView working is to configure the cell in tableView, cellForRowAtIndexPath function. You will do that by replacing the “// Configure the cell.” Comment with:

The entire function will look like that:

Just be careful if you were following some older tutorials, you can find the cell.text = cellValue; instead of cell.textLabel.text = cellValue; which is deprecated in SDK 3.0.

You can now run your application and see the table filled with those different programming languages, but to e honest this is not very useful, we want to do some interaction with the table … am I right? ? … ok, let’s do that …

Part two, creating the detail view for every single language.

Now rightclick on the classes folder (Group) and add new file “Add -> New file …”, select “Cocoa Touch Class” and “UIViewController subclass”. Make sure that the “With XIB for user interface” checkbox is ticked.

Adding DetailViewController files

Call this file for example DetailViewController.m and click finish. This created three new files .m, .h and .xib file. To keep everything organized, move the .xib file into the Resources folder (Group).

Open the DetailViewController.h file and add IBOutlet for label, one NSString and their properties. This file wil than look like that:

Open the DetailViewController.m file and synthesize those two variables. Synthesizing will create all set and get functionality for you that you don’t need to do that manually. Start of the file will look like that:

Now uncomment the viewDidLoad function and set that the text of the label will equal your myProgLang variable, function will look like that:

And the last thing (which we need to always do) is to release all used variables from the memory in the “dealloc” function.

Now we are going to build the actual interface for our detail view. Double click the DetailViewController.xib file, this will start your Interface Builder. Add to labels on to the view. Something like that:

Interface Builder

Once you have your labels on the stage, we need to connect “There will be my lang” label to the IBOutlet UILabel variable we’ve created in XCode. Just right-click the label.

Right-click on the label you want to connect

Drag the small circle from “New Referencing Outlet” and drop it on the “File’s owner” element in .xib’s tree view.

Connecting the label to the File's owner

Select the myLabel and we are connected :).

Selecting the IBOutlet for the variable

Save the file, go back to the XCode because now we need to create the “on click functionality” to show the detail view.

Open the RootViewController.m file and uncomment the tableView, didSelectRowAtIndexPath function.

Oh yes, I’ve tried to run the application and it did not work :) … Do the same thing and think why?! …

It didn’t work because we forgot to include the DetailViewController.h file on the top of the file. You can do it like that:

And what can we do next?! … Run the application and start working on your CV because you are now the iPhone developer :)

Start following us on Twitter, get our RSS feed and stay tuned, another tutorial will follow soon :)

You can download the tutorial files here: UITableView tutorial files

OndrejFinal application, table view

Final application, detail view

Ondrej Rafaj

Ondrej is a developer, director in several startups and manages XPROGRESS just like that, just for fun!

More Posts - Website - Twitter

Categories: iOS Tutorials, The old ways
Read more:

Post a new comment