Navigation-Based Project, Using Interface Builder

If you have decided to make Navigation-Based Projects through coding, refer to this tutorial: http://iosmadesimple.blogspot.com/2012/08/navigation-based-project-doing-it.html

Create an Empty Application Project.

1. Make MainWindow.xib file, make all the necessary steps and connections --> you already know how to do that! 

If not, refer to this tutorial: http://iosmadesimple.blogspot.com/2012/08/creating-our-own-mainwindowxib-for.html

2. In our AppDelegate.h, add "IBOutlet" to our UIWindow property.

@property (strong, nonatomic)IBOutlet UIWindow *window;

3. Comment out the codes in AppDelegate.m, application:didFinishLaunchingWithOptions: function

    //self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    // Override point for customization after application launch.

    //self.window.backgroundColor = [UIColor whiteColor];

4. Go to MainWindow.xib, check the connections between your File's Owner, Object and Window.

 

5. Drag Navigation Controller from Objects Library, put it in the Placeholder/Object Panel with the File's Owner, Object, and UIWindow. 

6. Add a UINavigationController object in AppDelegate.h and connect navController variable to our NavigationController object in .xib

7. Right-click Window object in .xib, you'll see a "rootViewController" outlet. Connect it to the navigationController object. //this action corresponds to this line of code self.window.rootViewController = navController_; 

8. Expand the "Placeholder/Objects Panel" in Interface Builder.

9. Click the Navigation Controller Button on the left side. You should see objects like Navigation Bar, UIViewController, and under UIViewController, Navigation Item.

Let's create our first view!

Make a new file, subclass of UIViewController, let's name it FirstViewController. Play around with its xib file, add some labels and buttons. I added a label and a button to FirstVC's xib file.

10. Select UIViewController, change its class to "FirstViewController." You know where the Identity Inspector is! //Don't forget to import FirstViewController Class!

11. Hit Run!

Let's create a new ViewController Class, name it SecondViewController. Put some labels and buttons for its UI.

1. In FirstViewController.m, let's add an IBAction function. We can show the SecondViewController by:

-(IBAction)goToSecondVC:(id)sender {

    SecondViewController *secondVC = [[SecondViewController alloc] init];

    [self.navigationController pushViewController:secondVC animated:YES];

}

Make sure you imported the SecondViewController class in FirstViewController.

2. Connect the IBAction to your UIButton in InterfaceBuilder. TouchUpInside.

3. Done! Hit run!

When you click the button in the SampleViewController, you should be navigated to the SecondViewController.
/*Optional*/

If you want to add a Navigation Title to your SecondView, put this in SecondVC's viewDidLoad function. 

self.title = @"Second VC";

4. Without adding a code for a back button, UINavigationController automatically makes it for you. As you can see in your SecondViewController, there's a backbutton titled "Root View Controller"  <-- the Navigation Title of the previously showed ViewController.

UINavigationController keeps track of the ViewControllers opened by the user. It's a STACK of ViewControllers. The very firstVC or the rootVC is the first one in the stack, when you click the button to go to the next VC, it will push the second VC to the stack. And when you tap the "back button," it pops the second VC, thus, showing the previous VC.