To add this component to your Xcode project using CocoaPods, add the following to your Podfile
:
pod 'MaterialComponents/Tabs'
Then, run the following command:
pod install
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.
To use the tab bar in your code, import the MaterialTabs umbrella header (Objective-C) or MaterialComponents module (Swift).
import MaterialComponents
#import "MaterialTabs.h"
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.
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.
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.
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.
Implement positionForBar:
and return UIBarPositionBottom
to configure the tab bar as a bottom navigation bar. The bar will automatically update with the appropriate styling.
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)
MDCTabBar *tabBar = [[MDCTabBar alloc] initWitFrame: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];