TabBarController with NavigationController and TableView in iPhone

Screen-shot

This is the TabBarController Application. In this application we will see how to implement NavigationController and TableView together in the TabBarController application. Let see will it will be worked.

Step 1: Create a new application using Window base template. Give the application name  “WindowTabBar”.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: We need to add three UIViewController class to the project. Choose New file -> Select cocoa touch classes group and then select UIViewController and corresponding .xib file . Give the project names “FirstView”, “SecondView”, and ”TableViewDetailViewController”.

Step 4: In the AppDelegate.h file we have added UITabBarController for the displaying tabbar in the application . So make the following changes in the file:

 

 

 

Step 5: Double click the MainWindow.xib file and open it to the Interface Builder. First drag the TabBarController from the library and place it to the MainWindow. Select the UIViewController from the TabBarController and bring up Connection Inspector change UIViewController to the NavigationController. You can see into the Selected Navigation Controller there is one UIViewController, select the UIViewController and bring up Identity Inspector change the class name into the FirstView and bring up Attribute Inspector and load the FirstView NIB file(See figure 1). Select the Second tab from the TabBar Controller and bring up Identity Inspector and change the class name into SecondView and bring up Attribute Inspector, load the SecondView NIB file. Now save the MainWindow.xib file, close it and go back to the Xcode.

Step 6: Open the AppDelegate.m file and make the following changes:

 

 

 

Step 7: In the FirstView.h, we are doing here is conforming our class to the two protocols that are needed for it to act as the delegate and datasource for the tableview and declare the array. Make the following changes in the file:

 

 

 

Step 8: Now open the FirstView.m file and include the TableViewDetailViewController.h file  and make the following changes:

 

 

 

Step 9: Double click the SeconView.xib file and open it to the Interface Builder. Open the View window and select the view window and bring up Attribute Inspector and change the background color (See the figure 2). Save the SeconView.xib file, close it and go back to Xcode.

Step 10: Now open the TableViewDetailViewController.h file,added UILabel for display message and NSString and make the following changes:

 

 

 

Step 11: Double click TableViewdetailViewController.xib file and open it to the Interface Builder. Drag label from the library and place it to the view window, select the label and change the name into “Selected Row:”. Once again drag label from the library and place it to the view window and connect File’s Owner icon to the label and select the displayText. Now save the .xib file , close it and go back to the Xcode.

Step 12: Open the TableViewDetailViewController.m file and make the following changes:

 

 

 

Step 13: Now compile and run the application in the Simulator.

You can Download SourceCode from here WindowTabBar 2

Comments 7

  1. MANY THANKS for this tutorial. I have been trying to accomplish this for sometime now but without success. You’ve made it so easy to follow!

    Two questions, if I may?

    I see you create the uitableview programmatically. How would I restrict the size of this uitableview? How can I set the height and width of the uitableview?

    Finally, it this tutorial an example of the content of Edumobile’s training courses?

  2. how to implement searchbar to this program and in first view u specifed a label but the firstview is not loading but table is displayed i don’t know how plz help me

  3. I tried this using XCode 4.3.2 and iOS 5.x and it doesn’t work. Could you produce an updated example of this using iOS 5.x?

  4. Thanks for this tutorial! Couldn’t find on the internet some example on how to use tab bar with table view. Very helpful!!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">