Tabs
Tabs are bars of buttons used to navigate between groups of content.
Design & API Documentation
Installation
Installation with CocoaPods
To add this component to your Xcode project using CocoaPods, add the
following to your Podfile:
pod 'MaterialComponents/Tabs'
To add this component along with its themer and other related extensions, please add the following instead:
pod 'MaterialComponents/Tabs+Extensions'
Then, run the following command:
pod install
Overview
When a user taps a tab, the content changes to match the selected subject in the tabs.
We provide this functionality through MDCTabBar which communicates via a delegate as well as MDCTabBarViewController which provides a view containment model similar to UITabViewController.
Tabs can also show a badge (usually a number) like UITabBar.
Usage
Importing
To use the tab bar in your code, import the MaterialTabs umbrella header (Objective-C) or MaterialComponents module (Swift).
Swift
import MaterialComponents
Objective-C
#import "MaterialTabs.h"
Delegate
Conform your class to the MDCTabBarDelegate protocol and set it as the tab bar's delegate to handle updating the UI when the user selects a tab.
Selected item
Update the selected tab programmatically by setting selectedItem, optionally with an animation. Delegate methods are not called for programmatic changes, so callers are responsible for updating UI as needed after updating the selected item.
Appearance
Set the itemAppearance property on the tab bar to switch between item display modes. Items can be displayed as titles (the default), icons, or combined.
Styling
By default, the tab bar is configured to display items with white text and icons. To customize the color of the tab bar, set the tintColor, selectedItemTintColor, unselectedItemTintColor, inkColor, and barTintColor properties. If selectedItemTintColor is nil, the tab bar's tintColor will be used automatically for selected items.
Configure where items are placed in the tab bar by setting the alignment property.
Custom selection indicators
The currently-selected tab is indicated visually by a selection indicator. By default this is an
underline, but you can customize its appearance by defining a selection indicator template and
setting the selectionIndicatorTemplate property on the tab bar. Template objects are provided
contextual information about a tab's content and return attributes that describe how that tab's
indicator should appear. The indicator will then automatically display the provided shape and
animate changes as the user selects different tabs.
See MDCTabBarIndicatorTemplate and MDCTabBarIndicatorAttributes for details.
Bottom navigation
Implement positionForBar: and return UIBarPositionBottom to configure the tab bar as a bottom
navigation bar. The bar will automatically update with the appropriate styling.
Example
Creating a tab bar
Swift
let tabBar = MDCTabBar(frame: view.bounds)
tabBar.items = [
UITabBarItem(title: "Recents", image: UIImage(named: "phone"), tag: 0),
UITabBarItem(title: "Favorites", image: UIImage(named: "heart"), tag: 0),
]
tabBar.itemAppearance = .titledImages
tabBar.autoresizingMask = [.flexibleWidth, .flexibleBottomMargin]
tabBar.sizeToFit()
view.addSubview(tabBar)
Objective-C
MDCTabBar *tabBar = [[MDCTabBar alloc] initWithFrame:self.view.bounds];
tabBar.items = @[
[[UITabBarItem alloc] initWithTitle:@"Recents" image:[UIImage imageNamed:@"phone"] tag:0],
[[UITabBarItem alloc] initWithTitle:@"Favorites" image:[UIImage imageNamed:@"heart"] tag:0],
];
tabBar.itemAppearance = MDCTabBarItemAppearanceTitledImages;
tabBar.autoresizingMask =
UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin;
[tabBar sizeToFit];
[self.view addSubview:tabBar];