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:
Design & API documentation
Table of contents
Navigation Drawer is currently an alpha component. Therefore, clients that wish to use Navigation Drawer in their app will need to manually clone the repo and add the code to their project.
Navigation Drawer currently provides the Bottom Drawer presentation style.
The Navigation Drawer is architected by implementing a custom
UIPresentationController and a
This allows us to use the default API Apple provides for
UIViewController presentation (more on usage below).
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
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 is a
UIViewController that allows you to provide your drawer content via the
contentViewController and your desired header (optional) through the
This component is an alpha component and therefore doesn’t support installation via CocoaPods. To install this component you will need to manually clone the repo and add the code to your project. This is intended.
To import the component:
Typical use: using the
MDCBottomDrawerViewController with/without a header.
let bottomDrawerViewController = MDCBottomDrawerViewController() bottomDrawerViewController.contentViewController = UIViewController() bottomDrawerViewController.headerViewController = UIViewController() # this is optional present(bottomDrawerViewController, animated: true, completion: nil)
MDCBottomDrawerViewController *bottomDrawerViewController = [[MDCBottomDrawerViewController alloc] init]; bottomDrawerViewController.contentViewController = [UIViewController new]; bottomDrawerViewController.headerViewController = [UIViewController new]; [self presentViewController:bottomDrawerViewController animated:YES completion:nil];
Typical use: presenting in a drawer without a header.
let contentViewController = UIViewController() contentViewController.transitioningDelegate = MDCBottomDrawerTransitionController() contentViewController.modalPresentationStyle = .custom present(contentViewController, animated: true, completion: nil)
UIViewController *contentViewController = [UIViewController new]; contentViewController.transitioningDelegate = [MDCBottomDrawerTransitionController new]; contentViewController.modalPresentationStyle = UIModalPresentationCustom; [self presentViewController:contentViewController animated:YES completion:nil];
Typical use: using the
MDCBottomDrawerViewController with a need for performant scrolling.
let contentViewController = UITableViewController() let bottomDrawerViewController = MDCBottomDrawerViewController() bottomDrawerViewController.contentViewController = contentViewController bottomDrawerViewController.headerViewController = UIViewController() # this is optional bottomDrawerViewController.trackingScrollView = contentViewController.view present(bottomDrawerViewController, animated: true, completion: nil)
UITableViewController *contentViewController = [UITableViewController new]; MDCBottomDrawerViewController *bottomDrawerViewController = [[MDCBottomDrawerViewController alloc] init]; bottomDrawerViewController.contentViewController = contentViewController; bottomDrawerViewController.headerViewController = [UIViewController new]; bottomDrawerViewController.trackingScrollView = contentViewController.view; [self presentViewController:bottomDrawerViewController animated:YES completion:nil];