Building A Tabbed Application In Xamarin iOS Application

Introduction

A tabbed application is a kind of app that has a bunch of buttons at the bottom of your iPhone. When you tap any button on the tab, it changes to a different page. All you have to do is take the Unified API tabbed application that will have the facility to provide you the basic structure of the application that will fit for multiple screens as different building blocks of the application.

This article will cover the following.

1. iOS tabbed application.
2. Tabbed button.
3. Multiple View Controllers.

Prerequisites

1. Basic programming knowledge of C#.
2. Basic knowledge of Xamarin.
3. Basic knowledge of ViewController, Views, StoryBoard.

Implementation

Here we go!

Start Visual Studio Community Edition.

Select iOS Tabbed Application and click on "Next".

Give the application a name and click "Next".

You will see the Main.storyboard as follows, or open the file Main.storyboard.

You can see you already have the two screens with their respective controllers namely 'FirstController' and 'SecondController”. Let us add another View Controller, customize its tabbed button, and add some Views to the screen.

Go to Toolbar pad and search for 'view controller'. Add the item to the main screen.

Add the View Controller to the screen with the drag and drop action.

Press Ctrl from the keyboard and click on the Tab bar controller. Then, drag the mouse icon towards Third added View Controller.

 After dragging the mouse with ctrl, you will have the above context menu. Select "Tab" from the given menu.

Now, click on the highlighted part shown above, i.e., the third View Controller and you can change the tabbed icon button from here.

Select top rated from the system item and you can see the third controller tabbed icon changed to the following.

Now, add the controller class to the added View Controller.

Click on the very below icon of the added View and you will have to give the class name from its properties.

Now, add some label to give to the View Controller that we added.

Drag two labels to the added Controller, and set the text as shown on the below screen.

 Your directory structure will be something like this.

Now, build and run the application.

You will have the fist View as -

Click on the second button for the second View.

Click on 'Top Rated' tab for the third View.

In this way, you can create the tabbed application. You can add different Views depending on the functionality containing forms for filling up data, Table of data etc. For a large application that needs different screens with dashboard tabbed, for the navigation on the particular screen, this kind of tabbed application is very useful.