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.

Tabbed Application in Xamarin IOS application

Select iOS Tabbed Application and click on "Next".

Tabbed Application in Xamarin IOS application

Give the application a name and click "Next".

Tabbed Application in Xamarin IOS application

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

Tabbed Application in Xamarin IOS application

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.

Tabbed Application in Xamarin IOS application

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

Tabbed Application in Xamarin IOS application

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

Tabbed Application in Xamarin IOS application

 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.

Tabbed Application in Xamarin IOS application

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

Tabbed Application in Xamarin IOS application

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.

Tabbed Application in Xamarin IOS application

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

Tabbed Application in Xamarin IOS application

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

Tabbed Application in Xamarin IOS application

 Your directory structure will be something like this.

Tabbed Application in Xamarin IOS application

Now, build and run the application.

You will have the fist View as -

Tabbed Application in Xamarin IOS application

Click on the second button for the second View.

Tabbed Application in Xamarin IOS application

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

Tabbed Application in Xamarin IOS application

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.

Up Next
    Ebook Download
    View all
    Learn
    View all