Create a Tab Bar

PDF for offline use
Sample Code:
Related SDKs:

Let us know how you feel about this

Translation Quality


0/250

This recipe shows you how to create a Tab Bar in your Xamarin.iOS application.

Recipe

To add a tab bar to your Xamarin.iOS application:

  1. Create a subclass of UITabBarController:
public class TabBarController : UITabBarController {}
  1. Create class-level fields for each UIViewController that corresponds to a tab.
//Declare string for application temp path and tack on the file extension
UIVIewController tab1, tab2, tab3;
  1. In the ViewDidLoad method, instantiate each UIViewController and ensure that a Title has been set to display on the tab bar. In this example each view is given a different color, but in your code each one will be a specific subclass of UIViewController (or even a UINavigationController) that performs a specific function.
tab1 = new UIViewController();
tab1.Title = "Green";
tab1.View.BackgroundColor = UIColor.Green;
tab2 = new UIViewController();
tab2.Title = "Orange";
tab2.View.BackgroundColor = UIColor.Orange;
tab3 = new UIViewController();
tab3.Title = "Red";
tab3.View.BackgroundColor = UIColor.Red;
  1. Create an array of UIViewControllers and assign that to the ViewControllers property of the UITabBarController. This creates the items in the tab bar.
var tabs = new UIViewController []{
    tab1, tab2, tab3
    };
ViewControllers = tabs;
  1. Set which tab is selected when the tab bar is displayed:
SelectedViewController = tab2;
  1. Instantiate the TabBarController in your AppDelegate and make it the root view controller of your application
window.RootViewController = new TabBarController();

Additional Information

Images

Tabs should also have an image associated with them, which has been omitted from the code above for clarity. The image is assigned by setting the TabBarItem property of each view controller.

Tab bar images are generally 30x30 pixels in size. The alpha (transparency) values in the source image are used to create the final tab image – blue on black when it appears in the tab bar and black on white if it appears in the More list.

You can use a built-in tab image from the UITabBarSystemItem enumeration. This automatically sets the tab’s image and text.

tab1.TabBarItem = new UITabBarItem (UITabBarSystemItem.History, 0);

Custom images can be set using a different UITabBarItem constructor:

tab2.TabBarItem = new UITabBarItem ("l'orange", UIImage.FromFile("Images/first.png"), 1);

The TabBarItem’s properties can also be set directly, like this:

tab3.TabBarItem = new UITabBarItem();
tab3.TabBarItem.Image = UIImage.FromFile ("Images/second.png");
tab3.TabBarItem.Title = "Rouge";

Other Properties

The TabBarItem also exposes other properties, such as BadgeValue (which sets the little red and white number/circle):

tab3.TabBarItem.BadgeValue = "4";

and Enabled, which allows you to disable the tab if required:

tab3.TabBarItem.Enabled = false;

Tab Count

iPhone/iPod devices can only display five tabs in portrait orientation, the iPad can display eight. If you create more tabs than the device can display, the last tab automatically becomes More and the remaining tabs are presented in a list.

While it is common for an iPhone/iPod application to have more than five tabs, Apple discourages more than eight tabs on the iPad. This is because the More list looks very sparse on the larger screen.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.