Dialogs
Dialogs provides both a presentation controller for displaying a modal dialog and an alert controller that will display a simple modal alert.
Design & API documentation
Table of contents
Overview
To display a modal using MaterialDialogs you set two properties on the view controller to be presented. Set modalPresentationStyle to UIModalPresentationCustom and set transitioningDelegate to and instance of MDCDialogTransitionController. Then you present the view controller from the root controller to display it as a modal dialog.
Presentation and transition controller
Presenting dialogs utilizes two classes: MDCDialogPresentationController and MDCDialogTransitionController. These allow the presentation of view controllers in a material specificed manner. MDCDialogPresentationController is a subclass of UIPresentationController that observes the presented view controller for preferred content size. MDCDialogTransitionController implements UIViewControllerAnimatedTransitioning and UIViewControllerTransitioningDelegate to vend the presentation controller during the transition.
Alert controller
MDCAlertController provides a simple interface for developers to present a modal dialog according to the Material spec.
Installation
Installation with CocoaPods
Add the following to your Podfile:
pod 'MaterialComponents/Dialogs'
Then, run the following command:
pod install
Importing
To import the component:
Swift
import MaterialComponents.MaterialDialogs
Objective-C
#import "MaterialDialogs.h"
Usage
Typical use: modal dialog
Swift
// The following is called from the presenting view controller and has the
// following variable defined to keep a reference to the transition
// controller.
strong var dialogTransitionController: MDCDialogTransitionController
// To present the dialog myDialogViewController
dialogTransitionController = MDCDialogTransitionController()
myDialogViewController.modalPresentationStyle = .custom
myDialogViewController.transitioningDelegate = dialogTransitionController
present(myDialogViewController, animated: true, completion:...)
Objective-C
// self is the presenting view controller and which has the following property
// defined to keep a reference to the transition controller.
@property(nonatomic) MDCDialogTransitionController *dialogTransitionController;
// To present the dialog myDialogViewController
self.dialogTransitionController = [[MDCDialogTransitionController alloc] init];
myDialogViewController.modalPresentationStyle = UIModalPresentationCustom;
myDialogViewController.transitioningDelegate = self.dialogTransitionController;
[self presentViewController:myDialogViewController animated:YES completion:...];
Typical use: alert
Swift
// Present a modal alert
let alertController = MDCAlertController(title: titleString, message: messageString)
let action = MDCAlertAction(title:"OK") { (action) in print("OK") }
alertController.addAction(action)
present(alertController, animated:true, completion:...)
Objective-C
// Present a modal alert
MDCAlertController *alertController =
[MDCAlertController alertControllerWithTitle:titleString
message:messageString];
MDCAlertAction *alertAction =
[MDCAlertAction actionWithTitle:@"OK"
handler:^(MDCAlertAction *action) {
NSLog(@"OK");
}];
[alertController addAction:alertAction];
[self presentViewController:alertController animated:YES completion:...];
Extensions
Color Theming
You can theme a dialog with your app's color scheme using the ColorThemer extension.
You must first add the Color Themer extension to your project:
pod 'MaterialComponents/Dialogs+Extensions/ColorThemer'
Swift
// Step 1: Import the ColorThemer extension
import MaterialComponents.MaterialDialogs_ColorThemer
// Step 2: Create or get a color scheme
let colorScheme = MDCSemanticColorScheme()
// Step 3: Apply the color scheme to your component
MDCAlertColorThemer.applySemanticColorScheme(colorScheme, to: component)
Objective-C
// Step 1: Import the ColorThemer extension
#import "MaterialDialogs+ColorThemer.h"
// Step 2: Create or get a color scheme
id<MDCColorScheming> colorScheme = [[MDCSemanticColorScheme alloc] init];
// Step 3: Apply the color scheme to your component
[MDCAlertColorThemer applySemanticColorScheme:colorScheme
toAlertController:component];
Typography Theming
You can theme a dialog with your app's typography scheme using the TypographyThemer extension.
You must first add the Typography Themer extension to your project:
pod 'MaterialComponents/Dialogs+Extensions/TypographyThemer'
Swift
// Step 1: Import the TypographyThemer extension
import MaterialComponents.MaterialDialogs_TypographyThemer
// Step 2: Create or get a typography scheme
let typographyScheme = MDCTypographyScheme()
// Step 3: Apply the typography scheme to your component
MDCAlertTypographyThemer.applyTypographyScheme(typographyScheme, to: component)
Objective-C
// Step 1: Import the TypographyThemer extension
#import "MaterialDialogs+TypographyThemer.h"
// Step 2: Create or get a typography scheme
id<MDCTypographyScheming> typographyScheme = [[MDCTypographyScheme alloc] init];
// Step 3: Apply the typography scheme to your component
[MDCAlertTypographyThemer applyTypographyScheme:colorScheme
toAlertController:component];