Navigation bar
A navigation bar is a view composed of leading and trailing buttons and either a title label or a custom title view.
Design & API documentation
- Material Design guidelines: App bars: top
- Class: MDCNavigationBar
- Class: MDCNavigationBarTextColorAccessibilityMutator
- Protocol: MDCUINavigationItemObservables
- Enumeration: MDCNavigationBarTitleAlignment
- Enumeration: MDCNavigationBarTitleViewLayoutBehavior
Related components
Table of contents
Color Theming
Typography Theming
Overview
Navigation bar is a drop-in replacement for UINavigationBar with a few notable exceptions:
- No navigationItem stack. Instances of MDCNavigationBar must be explicitly provided with a back
button. TODO(featherless): Explain how to create a back button with navigation bar once
https://github.com/material-components/material-components-ios/issues/340 lands.
The MDCNavigationBar class is a composition of two button bars and a title label or title view. The left and right Button Bars are provided with the navigation item's corresponding bar button items.
Read the button bar section on
Note: The UIBarButtonItem instances set on MDCNavigationBar cannot be used to specify the popover's anchor point on UIPopoverPresentationController. The sourceView and sourceRect on UIPopoverPresentationController should be used instead.
// Set a view controller to be popped over at the center of a target view.
aViewContoller.popoverPresentationController.sourceView = targetView;
aViewContoller.popoverPresentationController.sourceRect = CGRectMake(CGRectGetMidX(targetView.bounds)),CGRectGetMidY(targetView.bounds), 0, 0);
Installation
Installation with CocoaPods
Add the following to your Podfile:
xxxxxxxxxx
pod 'MaterialComponents/NavigationBar'
Then, run the following command:
xxxxxxxxxx
pod install
Importing
To import the component:
Swift
xxxxxxxxxx
import MaterialComponents.MaterialNavigationBar
Objective-C
xxxxxxxxxx
Usage
Observing UINavigationItem instances
MDCNavigationBar can observe changes made to a navigation item property much like how a UINavigationBar does. This feature is the recommended way to populate the navigation bar's properties because it allows your view controllers to continue using navigationItem as expected, with a few exceptions outlined below.
If you intend to use UINavigationItem observation it is recommended that you do not directly set the navigation bar properties outlined in MDCUINavigationItemObservables. Instead, treat the observed navigationItem object as the single source of truth for your navigationBar's state.
Starting observation
To begin observing a UINavigationItem instance you must call observeNavigationItem:.
Swift
xxxxxxxxxx
navigationBar.observe(navigationItem)
Objective-C
xxxxxxxxxx
Stopping observation
Swift
xxxxxxxxxx
navigationBar.unobserveNavigationItem()
Objective-C
xxxxxxxxxx
Exceptions
All of the typical properties including UIViewController's title property will affect the navigation bar as you'd expect, with the following exceptions:
- None of the animated: method varients are supported because they do not implement KVO events. Use of these methods will result in the navigation bar becoming out of sync with the navigationItem properties.
- prompt is not presently supported.
https://github.com/material-components/material-components-ios/issues/230 .
Extensions
Color Theming
You can theme a navigation bar with your app's color scheme using the ColorThemer extension.
You must first add the Color Themer extension to your project:
xxxxxxxxxx
pod 'MaterialComponents/NavigationBar+ColorThemer'
Swift
// Step 1: Import the ColorThemer extension
import MaterialComponents.MaterialNavigationBar_ColorThemer
// Step 2: Create or get a color scheme
let colorScheme = MDCSemanticColorScheme()
// Step 3: Apply the color scheme to your component
MDCNavigationBarColorThemer.applySemanticColorScheme(colorScheme, to: component)
Objective-C
xxxxxxxxxx
Typography Theming
You can theme a navigation bar with your app's typography scheme using the TypographyThemer extension.
You must first add the Typography Themer extension to your project:
xxxxxxxxxx
pod 'MaterialComponents/NavigationBar+TypographyThemer'
Swift
xxxxxxxxxx
// Step 1: Import the TypographyThemer extension
import MaterialComponents.MaterialNavigationBar_TypographyThemer
// Step 2: Create or get a typography scheme
let typographyScheme = MDCTypographyScheme()
// Step 3: Apply the typography scheme to your component
MDCNavigationBarTypographyThemer.applyTypographyScheme(typographyScheme, to: component)
Objective-C
xxxxxxxxxx