Understanding the Navigation Pattern for iOS Mobile App Development

Navigation patterns are more important to an application which defines the way the application will works and also how does it provides the information to the user. Every application that’s been created till now should have navigation in them. Understanding the types of navigation helps the developer to choose the right one for their app and also provide the information in a very presentable manner in the application.

iOS has three types of navigation they are Stack, Tabs and Master Detail.

Stack Navigation

The most widely used navigation with in an application which provides the both forward and backward navigation in the app. It layers pages one on top of another and creates a stack like environment based on the page we have visited.

Tabs Navigation

It is very only when we have very few screens to be displayed in the home page. For example, when we have just three icons to be shown in a page then we can use Tabs Navigation.

Master Detail Navigation

The Master Details Navigation has been separated into two sections, one is master section and another is details section. The master section provides the list of selections and the details section provides the content of the details based on the item selected in the master section.

In this section we will see how to use the Stack Navigation in detail.

In IOS the UINavigationController provides the basic stack navigation. This controller stores all the child views in added to them in the form of stack. This UINavigationController provides an NavigationBar which helps the user to go back to the previous screen and also provide a title for the view. Lets see how to add the UINavigationController to our app in code.


public override bool FinishedLaunching(UIApplication app, NSDictionary launchOptions)
{
Window = new UIWindow(UIScreen.MainScreen.Bounds);
var navigationController = new UINavigationController(new FirstPage());
Window.RootViewController = navigationController;
Window.MakeKeyAndVisible();
return true;
}

Using the PushViewController method the pages can be added to the stack and new page gets visible to the user. Using PopViewController method the pages can be removed from the stack and the previous page gets visible.


navigationController.PushViewController(secondViewController, true);

navigationController.PopViewController(true);

The screen shown below is the settings page which is found in every iPhone, where this page uses stack navigation. When the user clicks on the General link then he is navigated to the General Page along with a back button the top left to settings page. Again the user clicked the About link which further navigated him to the About page and a back button to navigate back to the general page.

The following image illustrate how the pages are saved in the navigation stack and when the user click back button how they are removed form the stack.