iPhone Tutorial Two — Combining UITabBarControllers, UITableViews and UINavigationControllers using Storyboard

Hey guys, so after the last tutorial I figured I would try and help some people with something that has been troublesome to developers in the past — combining tab bars and table views. Again, I am assuming you know the basics of iPhone development and are trying to use Xcode 4.2 to get a jump on the future of iOS development. If people ask for tutorials, I will create some explaining some things here I graze over. Okay so let’s get started.

First and foremost, I can be a lazy developer at times (i.e. I’d rather use some templates provided by Xcode, just to save 20 minutes). So to start off, let’s create a new project using the Tabbed Application Template.

Of course, make sure the “Use Storyboard” option is checked. We will be presented with the following:

You will see the App Delegate, Storyboard, and View Controllers for both tabs. The template also include icons for us (both for lower resolution iPhones, and the higher iPad, iPad 2 and iPhone 4). Delete the icons here, as some will be added later on, or keep them (If you want to follow this tutorial to the T, we will be adding some I created). I really prefer the layout of this compared to the older Xcodes and their Tab Bar templates. It helps split everything up for you, and I feel it is less crazy when they are spaced out, since it helps you concentrate on one tab’s view at a time. If you wish to follow along, created a new group labeled “Images” and place images uploaded below inside.

http://www.mediafire.com/?vodo13ex33c52x0

Lets focus on the First View first.

Select the bottom part of the Tab Bar, navigate to the Attributes inspector, and change the title to “UIViewController” and the image to “1.png”.

We are done with the first view. Since this tutorial does not really have much to do with UIViewControllers, we can just leave this how it is. Now we are going to get our hands a little dirty.  First, scroll down to the Second View Controller and delete it. Don’t be worried, adding items to the Tab bar is painless. Now, go into your Objects on the bottom right, and drag out a Navigation Controller (the gold spherical one).

You will notice that two windows will appear on the screen. The left one is the screen that actually contains the Navigation Controller, and the right is the Root Controller. The root controller is what you wish to display on the screen alongside the navigation controller. To do some minor tidying up, and to keep my OCDness at bay, I am going to change “Root View Controller” to “Table View”. Now, just because we have the Navigation Controller in the storyboard, does not mean it is connected to any implementation/header files whatsoever. So, let’s get the Navigation Controller all hooked up. First, Ctrl + Drag from the Tab Bar Controller straight down onto the Navigation Controller. You will notice that two options come up, viewControllers and performSegueWithIdentifier. Select viewControllers, and you will notice that you now have another tab added, and and arrow leading from your Tab Bar Controller to your new Navigation Controller. Be sure to also change the text to “UITableView” and the image to “2.png”.

Now we need to have this tab actually display something when this tab is selected. To do this, click on the bottom-rightmost scene, titled “View Controller – Root View” and make sure that the View is selected on the left Scene Panel (You can also do this by just double clicking on the view). Go to your objects and grab a Table View (NOT the controller) and drag it within your selected view. Now, with the View Controller – Table View selected, go to the Identity inspector and change the class to “SecondViewController”, as shown below:

This now means that the table view will be getting it’s data from the SecondViewController.m/.h files. Before we get to programming, make sure you Ctrl + Drag from the Table View to Second View Controller – Table View and select both Delegate and Data Source. Without this, the data we create will not get loaded into the table view. Now, let’s actually start doing some programming! Since the Table View is getting its data from the SecondViewController files, we need to also write the delegate functions. Lets start with the SecondViewController.h file. We will be creating an NSMutableArray of dummy objects, along with using a setupArray function to create the array. I have learned that not much code should be done in ViewDidLoad, and that if you just have function calls it sometimes helps solve some problems later on.

SecondViewController.h:

SecondViewController.m:



To anyone that has done programming with table views, this should all look familiar so I will not be going into it. If you need assistance, I can write a tutorial about it (I probably will anyways). If you run the application in the simulator, you will see something similar to what is shown below:

However, you’ll also notice that if you select a cell, nothing gets pushed onto the screen. This is because the didSelectRowAtIndexPath is empty, and I left it like that for a reason. The Apple developers in Cupertino changed the way the delegate function deals with views, since normally you would just pop a view onto the screen using a modal view controller or navigation controllers, there is a slight difference now. So lets go back to the storyboard file. So we will be using a View Controller as our detail view, so grab one out of our objects and place it next to the Table View Controller. Now if you click on the actual View Controller and go to the Attributes Inspector you will see something new: “Identifier”. This is basically a way to init certain views with certain scenes from the storyboard. Let’s just call this “Detail”.

Now lets create some .h/.m files for this new view controller. Go to File > New > New File and select UIViewController subclass. Make sure the “With XIB for user interface” is not checked, and call it “DetailViewController”. Now, go back to the View Controller we added in the storyboard, and change the class to “DetailViewController”. Lets go to the DetailViewController.h file, and add a IBOutlet UILabel.


Also, do not forget to @synthesize the rowNum in the DetailViewController.m, as well as connecting the IBOutlet in the storyboard from Detail View Controller to UILabel. Alright, now to look at some new Xcode 4.2 functions. First, #include “DetailViewController” at the beginning of your SecondViewController.m file, after your initial #include. Lets look at the code I entered below, and I will try to explain it as best as I can. 

So if you begin to look at it, it looks pretty normal until you see the [self.storyboard instantiateViewControllerWithIdentifier:@”Detail”]; Well, I think the self.storyboard is obvious, you are calling this because this is the container for all of your Scenes (or nibs). Now remember when we set the Identifier for our DetailViewController Scene? That was for this. I like to think of it as using an initWithNibName:, in that the Identifier is sort of like the scene’s name, and that is how they are associated within Xcode. Next, we just push the view with the navigation controller, followed by changing the text in each of the detail views to correspond with the row that was selected. And that should be it! I hope this was informative, and I hope you can use this knowledge again in the future. If you have any questions, please feel free to post a comment, and if you want to see the source code for reference, it is below.

Also: I appreciate the amount of views I have been getting lately and it is making me overjoyed. Since I am in college, buying new gadgets to test on is nearly impossible. If you feel like I helped you, please spread the word and if you can, hit the “DONATE” button on the right hand side and donate a few dollars my way. Anything is greatly appreciated. 

http://www.mediafire.com/?5aphfxx8q42hlgx

  1. Thanks for taking the time to write these out. I’m waiting for apple to approve my developer account so I can start looking through the new functions in the Xcode beta. Storyboards look amazing. These will definitely give me a good headstart.

    • If you have any suggestions for future tutorials feel free to let me know.

        • David Dong
        • February 6th, 2012

        Thank you for your tutorial
        Thats what I am looking for.
        Is is possible that you can also add search function to the second viewcontroller?

        Thank you

    • Derek
    • June 18th, 2011

    Thanks for the fantastic tutorial… One question though. When I run the app for the first time (after adding the code to populate the table) I get the following exception … “[SecondViewController tableView:numberOfRowsInSection:]: unrecognized selector sent to instance”.

    I’ve done the usual Google search, and the various results seem to suggest that I’ve wired up the DataSource / Delegates improperly, but I can’t seem to pinpoint the exact problem. Do you have suggestions on where to look?

    • Make sure when you are hooking it up that you Ctrl + Drag from the Table View onto the Second View Controller (Yellow Icon), not the actual view. Also, if that does not help try looking at the source code I provided at the bottom, and comparing your numberOfRowsInSection with mine. You should only have “return [dummyArray count];” for returning the amount of objects in your array. If this does not work, try and upload either a picture, or send me the file and I will try to help you out.

  2. Really enjoyed the article and I’m excited to start using Storyboards more. I’ve been curious about some of the segue stuff (UIStoryboardSegue, prepareForSegue, etc..), however. Are these supposed to replace or enhance ‘didSelectRowAtIndexPath’ in any way? I’m wondering if they are supposed to be used as a ‘better’ way to pass data between controllers — also I like the idea of showing some sort of linkage between views in the the actual storyboard file; something that would basically say, “hey, your FriendListNavigationController is going to pass the name of your friend to the FriendDetailController.” Does that make sense? Thanks again!

    • I am pretty sure that the prepareForSegue is something like setting up the view to push onto screen. I guess you call that delegate function and then you pass all your data there. That would be my guess, I would need to go look into it.

  3. How would I go about pushing a new view from my storyboard without using a navigation controller along with it?

    • Look at the “Introduction to Storyboarding”. Pretty much you have a button on your first view, and you Ctrl+Drag from that button to your new view, and use the function “performSequeWithIdentifier:sender:”.

      • Sorry, I should have been a bit more specific. I understand the Segue (awesome btw!), in this specific instance I was simply trying to load another view in my storyboard after clicking a button that performs an action, in this case logging into a site.

        This was what I was looking for :

        testStory *screen = [self.storyboard instantiateViewControllerWithIdentifier:@”test”];
        [self presentModalViewController:screen animated:TRUE];

        Works a treat!

    • Roy
    • June 20th, 2011

    Hello asm09fsu,
    would be great to see a tutorial about the simple Master-Detail application.
    Is it possible?

    Thanks a lot!

    • This is the same thing as in this tutorial. You create the array, and push the view onto the screen when the row is selected.

        • Roy
        • June 21st, 2011

        Since 2 weeks I’m trying to create a simple Master-Detail application. Unfortunaly without success 🙂
        I made (nearly) the same steps as you described here.
        Would be great if you can create a Master-Detail application on your own and provide me some hints.

        Thanks a lot!

    • Roy
    • June 21st, 2011

    I got it:)
    I deleted the Table View in the “Root View Controller – Master” and created it manually again. The stricture of my Root View Controller:

    Root View Controller – Master
    Table View
    Table View Cell
    Navigation Item – Title

    • You’ll also notice that if you choose to not include table view cell, it does do a default

    • Roy
    • July 1st, 2011

    Hi asm09fsu,

    I have one more question: I have the simple Master Detai application.
    How can I pass the data from RootViewController (Table fruits) to the DetailViewController?

    Should I use this?:
    DetailViewController *ieditor = [self.storyboard instantiateViewControllerWithIdentifier:@”detail”];
    ieditor.detailItem = [fruits objectAtIndex:indexPath.row];

    Thanks a lot!

    • Roy
    • July 3rd, 2011

    unfortunately not

  4. Is it possible to add XIB files to Storyboard ? As in, if I have existing XIB files, ported from previous xcode project, and I want to integrate with new Storyboard ?

    Is that possible under InterfaceBuilder ? Or is that even possible programmatically ?

    • Bobthebuilder24
    • July 8th, 2011

    Tutorial was great, thanks for posting it. I’m working on an app, and it really helped me out. I do have one question, i changed secondviewcontroller to a UITableViewController instead of a UIView controller and it causes the app to crash when i select the second view. Why is this?

    • Todd
    • July 12th, 2011

    Could you please explain further what you mean by ‘…as well as connecting the IBOutlet in the storyboard from Detail View Controller to UILabel.’ ???

    • create a connection from the file’s owner to the UILabel, since we added a IBOutlet UILabel in the .h file.

  5. How can I create static table view cell in storyboarding. I need to display 3 label on the cell. Thanks!

  6. Thanks for these tutorials. I’m new to iOS (and starting with xcode 4.2) and your storyboard tutorials have been perfect to get me started.

    I have encountered a problem – How do you use a storyboard and Table View Controller to create a custom cell layout. I can create a custom cell in the storyboard and get it to display in the table, but I cannot work out how to set the text on labels, etc that I added to the cell.

    Any guidance would be appreciated.

    Thanks
    Gary.

  7. hi, could you explain how to change the initial view controller. say, if created a navigation controller first, which is an initial viewcontroller in the storyboard, then add a tab controller, how to change the initial view controller to tab contoller, not th navigation one? Thanks.

    • kalaivanivelusamy
    • July 24th, 2011

    Hi,
    I have tried this and stucked with the weird one though.After did delegate and datasource connection to SecondViewController, in my SecondViewController.m i could not see many auto generating methods such as numberOfRowsInSection etc.,What might be the problem?

    • Just because they aren’t “auto-generated” for you doesn’t mean you can’t add them yourself.

    • You have a standard UIView controller, those methods only come standard for TableViewController. You should set your class as a UITableViewDelegate and a UITableViewDataSOurce, if you need help with that message me.

    • Doug
    • October 15th, 2011

    Yeah one thing to help people out if you want auto generated methods for the tableview delegate and datasource is to add the protocol after declaring it as a subclass of UIViewController.

    I’m not sure why someone would not want to do this as those method declarations are pretty long 🙂 Gotta love objective c!

    • ngonza
    • October 19th, 2011

    Great tutorial, tnx a lot.

    • Mike G
    • October 19th, 2011

    Hey. I tried your 2nd Tutorial. All is well, but i keep getting this error. The build succeeds, but will not let me preview the table.

    !Unsupported Configuration
    Prototype table cells must have reuse identifiers

    Any suggestions?

    • In your code, what is the reuse identifier called? If you look in the Interface Builder under Attribute Inspector for the cell, the value for Identifier should be that same as reuse identifier.

        • Mike G
        • October 20th, 2011

        Nice. That worked to clear that up. Now I have a SIGABRT error when I hit the UITableView Tab Item. See below.

        BTW I will get you a donation by this weekend. Great tutorials.

        #import

        #import “AppDelegate.h”

        int main(int argc, char *argv[])
        {
        @autoreleasepool {
        return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
        }
        }

      • This is more than 80% of what you will always get when you get a SIG error. I would need to see other code to help.

        And thanks, I really appreciate it. I’m hoping to get some development devices with these donations one day, so every penny helps 🙂

        • Mike G
        • October 21st, 2011

        Here is essentially my root view controller————–

        #import

        @interface Settings : UIViewController

        @property (nonatomic, strong) NSMutableArray *settingsList;
        -(void) setupArray;

        @end

        Here is the .m————————————————-

        #import “Settings.h”

        @implementation Settings
        @synthesize settingsList;

        – (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
        {
        self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
        if (self) {
        // Custom initialization
        }
        return self;
        }

        – (void)didReceiveMemoryWarning
        {
        // Releases the view if it doesn’t have a superview.
        [super didReceiveMemoryWarning];

        // Release any cached data, images, etc that aren’t in use.
        }

        #pragma mark – View lifecycle

        /*
        // Implement loadView to create a view hierarchy programmatically, without using a nib.
        – (void)loadView
        {
        }
        */

        // Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
        – (void)viewDidLoad
        {
        [self setupArray];
        [super viewDidLoad];
        }
        //**************************************
        – (void) setupArray {
        settingsList = [[NSMutableArray alloc] init];
        [settingsList addObject:@”Name”];
        [settingsList addObject:@”Height”];
        [settingsList addObject:@”Weight”];
        [settingsList addObject:@”Length”];
        [settingsList addObject:@”APGAR”];
        }

        – (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
        return 1;
        }
        – (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
        return [settingsList count];
        }

        – (UITableViewCell *)tableview:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
        static NSString *CellIdentifier = @”Cell”;

        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
        }
        cell.textLabel.text = [settingsList objectAtIndex:indexPath.row];
        return cell;
        }

        – (void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *__strong)indexPath {

        }
        ///**************************************
        – (void)viewDidUnload
        {
        [super viewDidUnload];
        // Release any retained subviews of the main view.
        // e.g. self.myOutlet = nil;
        }

        – (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
        {
        // Return YES for supported orientations
        return (interfaceOrientation == UIInterfaceOrientationPortrait);
        }

        @end

        If you can help in any way, that would be great.

      • Did you set the delegate and datasource up in the interface builder?

        Also, check your identifier in the attributes inspector for your cell in the table. Try changing that in Interface Builder and see what happens.

    • George
    • October 20th, 2011

    Thank you for a great set of tutorials. I am new to Cocoa, IOS, and Xcode. Very helpful and well presented!

    Cheers

    • k~M
    • October 22nd, 2011

    Hello!

    Thank you so much for taking the time out of your busy school schedule to post these tutorials. I was doing quite well until the end. Everything was working precisely according to your instructions, however I wish there’d was a little bit more detail or a photo at the end of the Table View tutorial, as I’m not certain I did it right. Basically, I selected the object on view 2 and it doesn’t review the detail. I tried connecting the segue view to the navagation controller and view controller, to no avail.

    Also, it would be great to see the transition from 4.0 to 4.2 for custom views/rows, adding and deleting rows.
    k~M

    • I’m glad you enjoy them. If you look at the bottom of the post, you will see a video that has the app running around the last 30 seconds, and also there is a source code download that might help. If not, post a problem here and I will do my best. Happy coding!

    • Maxine Bodine
    • October 24th, 2011

    Hi,
    I appreciate you tutorials, little out there on the 4.2. I read through your code, I don’t even need to add a tableview. I am a java programmer and just got a mac and very new to Xcode 4.2, two days 🙂

    I am trying to get two tabs working with my text fields and buttons inside. I don’t know if you can help me.

    I used the tabbed template. Didn’t delete the second view. I think I am ok with the setting up of the text fields, buttons and such.

    When I run it I am still seeing the demo, not my tabbed views. I am missing something.

    //I added this in my .h file interface
    IBOutlet UITabBarController *tabBarController;

    @property (strong, nonatomic) UIWindow *window;

    //I also added after }
    @property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;
    _____________________________

    //I added this in my .m file
    @synthesize tabBarController;

    – (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {

    // I am adding this
    [window addSubview:tabBarController.view];
    [window makeKeyAndVisible];

    // Override point for customization after application launch.
    return YES;
    }

    Thanking you in advance for any help!

  8. I’m stuck on “Before we get to programming, make sure you Ctrl + Drag from the Table View to Second View Controller – Table View and select both Delegate and Data Source.”

    What am I dragging Table View to?

  9. I started over from scratch and dragging from the table view (blue rectangle) to the View Controller – Table View (yellow sphere in the dock) worked first time. I must have fumbled something before.

    Great tutorial. I sent you $40. =)

      • Max
      • October 25th, 2011

      Is anyone else having this problem: Yesterday I posted code I couldn’t get to work. I followed 5 different tutorials. I closed Xcode… simulator several times hoping to clear it out. No changes.

      Today I sit down never rebooted. Follow your tutorial to the tee. It worked. Then I thought I know I did the same thing yesterday. All 5 worked today. This morining I was adding a bit to it.

      The same thing is happening. Not one of the 6 apps run. They show the original dragged in tab bar controller. I have rebooted it, still don’t work.

      Is it a bug in the new Xcode?

    • CocoaNewBee
    • October 26th, 2011

    Thank you for the solution !!! It took me about an entire day to find your video and 5 seconds to solve it !! LOVE IT!!!

    Much appreciated… you should consider adding the sample project here for giggles!! 🙂

    • The source code is at the bottom of the post.

      • CocoaNewBee
      • October 26th, 2011

      Sorry… just saw the source!!! BUT I dont understand usageof the strong in the didSelectRowAtIndexPath:(NSIndexPath *__strong)indexPath

      • it is how the new Delegate functions are in Xcode 4.2

    • Joe
    • October 27th, 2011

    Hey, I’m trying to test run your program and it’s coming up with “Program Received Signal SIGABRT” in the main.m file. I’m running your code exactly as copied from the source file but with different file names.

    Here’s the code from the file.

    #import “SJUNumbersFirstViewController.h”

    @implementation SJUNumbersFirstViewController
    @synthesize dummyArray;

    – (void)didReceiveMemoryWarning
    {
    [super didReceiveMemoryWarning];
    // Release any cached data, images, etc that aren’t in use.
    }

    #pragma mark – View lifecycle

    – (void)viewDidLoad
    {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    }

    – (void)setupArray {
    dummyArray = [[NSMutableArray alloc] init];
    [dummyArray addObject:@”Object 1″];
    [dummyArray addObject:@”Object 2″];
    [dummyArray addObject:@”Object 3″];
    [dummyArray addObject:@”Object 4″];
    [dummyArray addObject:@”Object 5″];
    [dummyArray addObject:@”Object 6″];
    [dummyArray addObject:@”Object 7″];
    [dummyArray addObject:@”Object 8″];
    [dummyArray addObject:@”Object 9″];
    [dummyArray addObject:@”Object 10″];
    [dummyArray addObject:@”Object 11″];
    [dummyArray addObject:@”Object 12″];
    [dummyArray addObject:@”Object 13″];
    }

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

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

    – (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @”Cell”;

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }

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

    return cell;
    }

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

    }

    – (void)viewDidUnload
    {
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
    }

    – (void)viewWillAppear:(BOOL)animated
    {
    [super viewWillAppear:animated];
    }

    – (void)viewDidAppear:(BOOL)animated
    {
    [super viewDidAppear:animated];
    }

    – (void)viewWillDisappear:(BOOL)animated
    {
    [super viewWillDisappear:animated];
    }

    – (void)viewDidDisappear:(BOOL)animated
    {
    [super viewDidDisappear:animated];
    }

    – (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
    {
    // Return YES for supported orientations
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
    }

    @end

    • you are trying to access an array that is in a setup function that is never called.

  10. can you provide the source code for downloading please?

    • Rron
    • November 12th, 2011

    It is saying build failed because of “Use of undeclared identifier ‘detail'” i did everything that is written but i think i can’t understand the part:

    ” Also, do not forget to @synthesize the rowNum in the DetailViewController.m, as well as connecting the IBOutlet in the storyboard from Detail View Controller to UILabel. Alright, now to look at some new Xcode 4.2 functions. First, #include “DetailViewController” at the beginning of your SecondViewController.m file, after your initial #include. Lets look at the code I entered below, and I will try to explain it as best as I can. ”

    Can you please help me. I’m new to coding.

    • Rron
    • November 13th, 2011

    Found it!Thanks Anyway!

    • Rron
    • November 13th, 2011

    I’m trying to make in every row something different i did this in SecondViewController.m :

    – (void)viewDidLoad
    {
    [self setupArray];
    [super viewDidLoad];
    }

    – (void)setupArray {
    dummyArray = [[NSMutableArray alloc] init];
    [dummyArray addObject:@”Object 1″];
    [dummyArray addObject:@”Object 2″];
    [dummyArray addObject:@”Object 3″];
    [dummyArray addObject:@”Object 4″];
    [dummyArray addObject:@”Object 5″];
    [dummyArray addObject:@”Object 6″];
    [dummyArray addObject:@”Object 7″];
    [dummyArray addObject:@”Object 8″];
    [dummyArray addObject:@”Object 9″];
    [dummyArray addObject:@”Object 10″];
    [dummyArray addObject:@”Object 11″];
    [dummyArray addObject:@”Object 12″];
    [dummyArray addObject:@”Object 13″];
    }

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

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

    – (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @”Cell”;

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }

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

    return cell;
    }

    – (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *__strong)indexPath {
    DetailViewController *detail = [self.storyboard instantiateViewControllerWithIdentifier:@”Detail”];
    [self.navigationController pushViewController:detail animated:YES];

    detail.rowNum1.text = [NSString stringWithFormat:@”This is row hello1″, (indexPath.row + 1)];
    detail.rowNum2.text = [NSString stringWithFormat:@”This is row hello2″, (indexPath.row + 2)];
    detail.rowNum3.text = [NSString stringWithFormat:@”This is row hello3″, (indexPath.row + 3)];
    detail.rowNum4.text = [NSString stringWithFormat:@”This is row hello4″, (indexPath.row + 4)];
    detail.rowNum5.text = [NSString stringWithFormat:@”This is row hello5″, (indexPath.row + 5)];
    detail.rowNum6.text = [NSString stringWithFormat:@”This is row hello6″, (indexPath.row + 6)];
    detail.rowNum7.text = [NSString stringWithFormat:@”This is row hello7″, (indexPath.row + 7)];
    detail.rowNum8.text = [NSString stringWithFormat:@”This is row hello8″, (indexPath.row + 8)];
    detail.rowNum9.text = [NSString stringWithFormat:@”This is row hello9″, (indexPath.row + 9)];
    detail.rowNum10.text = [NSString stringWithFormat:@”This is row hello10″, (indexPath.row + 10)];
    detail.rowNum11.text = [NSString stringWithFormat:@”This is row hello11″, (indexPath.row + 11)];
    detail.rowNum12.text = [NSString stringWithFormat:@”This is row hello12″, (indexPath.row + 12)];
    detail.rowNum13.text = [NSString stringWithFormat:@”This is row hello13″, (indexPath.row + 13)];
    }

    and this in DetailViewController.h:

    @interface DetailViewController : UIViewController

    @property (nonatomic, strong) IBOutlet UILabel *rowNum1;
    @property (nonatomic, strong) IBOutlet UILabel *rowNum2;
    @property (nonatomic, strong) IBOutlet UILabel *rowNum3;
    @property (nonatomic, strong) IBOutlet UILabel *rowNum4;
    @property (nonatomic, strong) IBOutlet UILabel *rowNum5;
    @property (nonatomic, strong) IBOutlet UILabel *rowNum6;
    @property (nonatomic, strong) IBOutlet UILabel *rowNum7;
    @property (nonatomic, strong) IBOutlet UILabel *rowNum8;
    @property (nonatomic, strong) IBOutlet UILabel *rowNum9;
    @property (nonatomic, strong) IBOutlet UILabel *rowNum10;
    @property (nonatomic, strong) IBOutlet UILabel *rowNum11;
    @property (nonatomic, strong) IBOutlet UILabel *rowNum12;
    @property (nonatomic, strong) IBOutlet UILabel *rowNum13;
    @end

    i also did synthezize them in DetailViewController.m :

    @implementation DetailViewController
    @synthesize rowNum1;
    @synthesize rowNum2;
    @synthesize rowNum3;
    @synthesize rowNum4;
    @synthesize rowNum5;
    @synthesize rowNum6;
    @synthesize rowNum7;
    @synthesize rowNum8;
    @synthesize rowNum9;
    @synthesize rowNum10;
    @synthesize rowNum11;
    @synthesize rowNum12;
    @synthesize rowNum13;

    When i try to run i says build succeed , and if i go UITableView 2 and click on one of Object 1,2,3,4,5,6,7,8,9,10,11,12 or 13 it doesn’t open. It says Thread 1: Program received signal: “SIGABRT”.
    Can you please help me!I want to do this like a project school.Also I’m new to xcoding.Thank you very much!

    • CoCo
    • November 13th, 2011

    Thank you for your teaching! This is very useful!
    I have a small problem. I do followed your method too, but on turning says ” Thread 1: Program received signal: “SIGABRT”. ”
    What is the reason? Thank you!!

    • CoCo
    • November 15th, 2011

    I use Xocde 4.2.
    This is my file:
    http://www.megaupload.com/?d=OWBINW7S

    Content is the same with you, but on turning says ” Thread 1: Program received signal: “SIGABRT”. ” I guess the problems on main.m, but I do not know how to solve.

  11. Strange, in the SecondViewController.m, if you switch the animated to NO for the details view, you loose the label value. I don t understand why

    [self.navigationController pushViewController:detail animated:NO];

  12. Nice tutorial, at this time i tried to do the same app without using Storyboard & i was not able to make it works. Now, thank to your’s job, i made it! Also i was able to make two view having inside tableview & implemented iAd banner right above tabbaritems. Do you think it’s possible to do the same app universal & using masterdetail template? If yes i will try & make the tutorial for you & other developers

    • JF
    • November 21st, 2011

    Dude, I just want to tell you that this post is what made my app a reality. You’re awesome!

    • JF
    • November 21st, 2011

    (In my post above I meant my next app, not my iMass app. ) Thanks again!

  13. Thanks for the great tutorial.

    It would be helpful if you can come up with a core data tutorial. Basically I am looking at ways to save the data user enters in a form.

    Also, a UITableView tutorial on how to add a section and then cells using buttons on screen. Like for example a to-do application where the user can click a “Add Day” button and it creates a new section with one entry row and inside the section a + button to add a new to-do item.

    W

  14. Nevermind, got it to work, somehow..!

    Great tutorials man!

  15. hi , i am beginner, i want to do something like , i have a plist data, using this Plist data i would like to create TableView ,detailView of each row . i want to do it in only “STORYBOARDS” ,i tried and tried i failed to find the way . Please Help Me .

    ThankYou

    • Robert Garcia
    • December 12th, 2011

    Dude, I could kiss you right now, I’ve been going all over trying to do exactly what you’ve been talking about and because of this tutorial it all came together for me. THANK YOU SOOOOOO MUCH!!!!

    RJ

    • Zef
    • December 19th, 2011

    Hey great tutorial man, i was wondering though how would you go about pushing to numerous view controllers instead of just the one. Plz respond really need help!!!

    • Cyrilleib
    • December 26th, 2011

    Thanks a lot for this tutorial ! It helped me doing a 3 tables views simple view (don’t if it’s clear but it works 😉

    Anyway, i’m still trying to open a bunch of pdf on my detail view, and since it’s quite a bitch, i’m still on it…

    If you’re my christmas angel you can tell me if you have an idea to change your rowNum into a file name…

    This works in the master.h :
    detail.rowNum.text =
    [NSString stringWithFormat:@”%@”,[listcours objectAtIndex:indexPath.row]];

    And this is the detail.h
    NSString *path = [[NSBundle mainBundle] pathForResource:@”T_ST2S_C1″ ofType:@”pdf” inDirectory:@””];
    NSURL *url = [NSURL fileURLWithPath:path];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [lecturepdf loadRequest:request];

    I just need to find a way to change @”T_ST2S_C1″ into the filename send by rowNum…

    Anyway, have a nice day and thanks a million !

    • josh
    • December 31st, 2011

    can you be my teacher?

  16. Thanks so much for this tutorial – really helped me out!

    • GT
    • January 12th, 2012

    Fantastic tutorial, worked “out of the box” and clarified a lot about how storyboards work on Xcode 4. Well done!

    • Snehn Kuruvilla
    • February 1st, 2012

    Graet Tut…Thanks.

    • trolleyboi
    • March 12th, 2012

    Amazing tutorial, and exactly what I want for my app!

    Cosmetic issue tho, how do I change it so that when the back button is pressed, and it’s back to the table view, the previously selected row is not still highlighted?

    Thanks for your time and effort!

Leave a reply to Davide Cancel reply