Page navigation in ios app

Use storyboard

Notes: storyboard is the new feature, is not supported by IOS 4 SDK, so if want to build an app which support IOS 4, please use xib.

Step 1:

Create a Single View Application Project; Make sure “Use Storyboard” is clicked.

 Step 2:

Click on the “storyboard” file, and click “Editor” and click “Embed In” and click “Navigation Controller”

Add a label on the view, and change the label to “Page 1”, and then add a button to “Page 1”, name to button to “Page 2”

Then the storyboard will show like this,

Step 3:

Drag and drop a new View Controller in the storyboard, and add a label on it, change the label to “Page 2”

Step 4

Right click the “Page 2” button on the “Page 1” view controller and drag the mouse point to “Page 2” view controller, select “Push” when the “Storyboard Segues” popup.

Then the storyboard will shown like this:

Step 5

Run the app, and press the “Page 2” button, the app will navigate the page from “Page 1” to “Page 2”

For more detail about page navigation and tab bar:

http://maybelost.com/2011/10/tutorial-storyboard-in-xcode-4-2-with-navigation-controller-and-tabbar-controller-part1/

http://maybelost.com/2011/10/tutorial-storyboard-in-xcode-4-2-with-navigation-controller-and-tabbar-controller-part-2/

Use xib 

Step 1

               Create a single view application project; make sure the “Use Storyboard” unclicked. 

          Step 2

         We need to add the navigation controller to the first view.  Click on the “AppDelegate.m”, under the               “didFinishLaunchingWithOptions” function, you will see the code below:

This code is to find the “ViewController” page, and add this page as the first page. 

We start to add a “Navigation Controller” to the view.

In AppDelegate.h,

 We define a “navigationController”, the code as below:

Step 3

 Click on the ViewController.xib , drag and drop a label on it and change the label to “First Page”, drag and drop a button on it and change the text to “Second Page”.

Step 5

Click the “ViewController.h”, we need to add an IBOutlet to connect to button we just created in the view.

Step 6

Click the “ViewController.xib”, right click on the “File own” icon, and drag to the “Second Page” button, select the “secondPageBtn” from the popup. 

Step 7

Now we create the second page, click on “New File”.

Select “Cocoa Touch” and select “UIViewController Subclass”

Name the class “SecondPage_ViewController”

Step 8

Click on the “SecondPage_ViewController.xib”, drag and drop a label on it, and change the label to “Second Page”

Step 9

Click on the “ViewController.m”, first, import the “SecondPage_ViewController.h”, second, and synthesize the “secondPageBtn” we define in “ViewController.h”. Last, we create a method to handle the press action by the button; we name the method to “secondPageBtnPress”.

Step 10

Now we need to connect the press action to the “secondPageBtnPress” method.

Click on the “ViewController.xib”, right click the “Second Page” button, drag to the first responder icon , select “secondPageBtnPress” on the popup

Make sure the “Touch Up Inside” connect to the “secondPageBtnPress” method 

Step 11

Run the app, and press the button, it will navigate to the second page.