blob: d6dd033b69111126dfe5a74b43862c45d2eeaece [file] [log] [blame] [view] [edit]
# Navigation Drawer
<!-- badges -->
Navigation drawers provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.
Navigation drawers are recommended for:
* Apps with five or more top-level destinations.
* Apps with two or more levels of navigation hierarchy.
* Quick navigation between unrelated destinations.
<!-- design-and-api -->
<!-- toc -->
- - -
## Overview
Navigation Drawer currently provides the [Bottom Drawer](https://developer.apple.com/documentation/uikit/uiaccessibilityelement/1619577-accessibilitylabel) presentation style.
The Navigation Drawer is architected by implementing a custom `UIPresentationController` and a `UIViewControllerTransitioningDelegate` named `MDCBottomDrawerPresentationController` and `MDCBottomDrawerTransitionController` respectively.
This allows us to use the default API Apple provides for `UIViewController` presentation (more on usage [below](#usage)).
Through the `MDCBottomDrawerViewController` class, the Navigation Drawer allows you to pass a `contentViewController` to act as the content of the drawer, and also a `headerViewController` which will stick to the top once the drawer is in full screen.
`MDCBottomDrawerViewController` also provides a settable `trackingScrollView` property that should be set to the `UITableView` or `UICollectionView` inside your content, if and only if that view fills the entire bounds, and if you are seeking for a more performant solution of having the algorithm only load your view as you scroll and not all at once.
Lastly, your headerViewController conforms to the `MDCBottomDrawerHeader` protocol, which implements the method `updateDrawerHeaderTransitionRatio:(CGFloat)transitionToTopRatio`. This method provides `transitionToTopRatio`, which moves between 0 to 1 as the transition of the header view
transforms from being above the content to becoming sticky on the top. It is 0 when the drawer is above the content and starts changing as the header view expands to cover the status bar and safe area based on the completion rate. It is 1 once the header finishes its transition to become sticky on the top and it's height is at the size of its preferredContentSize + the safe area.
### Navigation Drawer Classes
#### MDCBottomDrawerViewController
`MDCBottomDrawerViewController` is a `UIViewController` that allows you to provide your drawer content via the `contentViewController` and your desired header (optional) through the `headerViewController` property.
## Installation
- [Typical installation](../../../docs/component-installation.md)
## Usage
- [Typical use: using the `MDCBottomDrawerViewController` with/without a header.](typical-use-drawer.md)
- [Typical use: presenting in a drawer without a header.](typical-use-drawer-no-header.md)
- [Typical use: using the `MDCBottomDrawerViewController` with a need for performant scrolling.](typical-use-performant-drawer.md)