Skip to content
This repository has been archived by the owner on Oct 20, 2022. It is now read-only.

Latest commit

 

History

History

create_a_tab_bar

Folders and files

NameName
Last commit message
Last commit date

parent directory

..

TabBar

TabBar

 
 

README.md

README.md

 
 

TabBar.sln

TabBar.sln

 
 

README.md

id title brief sdk
1C61F57E-E1F5-8287-3356-387067A85247
Create a Tab Bar
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.