Feature highlight
The Feature Highlight component is a way to visually highlight a part of the screen in order to introduce users to new features and functionality.
Design & API documentation
- Class: MDCFeatureHighlightView
- Class: MDCFeatureHighlightViewController
Table of contents
Installation
Installation with CocoaPods
Add the following to your Podfile:
pod 'MaterialComponents/FeatureHighlight'
Then, run the following command:
xxxxxxxxxx
pod install
Importing
To import the component:
Swift
xxxxxxxxxx
import MaterialComponents.MaterialFeatureHighlight
Objective-C
xxxxxxxxxx
Usage
Typical use: highlight a view
Swift
x
let completion = {(accepted: Bool) in
// perform analytics here
// and record whether the highlight was accepted
}
let highlightController = MDCFeatureHighlightViewController(highlightedView: viewToHighlight,
completion: completion)
highlightController.titleText = "Just how you want it"
highlightController.bodyText = "Tap the menu button to switch accounts, change settings & more."
highlightController.outerHighlightColor =
UIColor.blue.withAlphaComponent(kMDCFeatureHighlightOuterHighlightAlpha)
present(highlightController, animated: true, completion:nil)
Objective-C
xxxxxxxxxx
Often when highlighting a view you will want to display a different view to the one you are highlighting. For example, flipping the primary and secondary colors in the presented version.
Swift
xxxxxxxxxx
let displayedButton = UIButton(type: .system)
displayedButton.setTitle(highlightedButton.title(for: .normal), for: .normal)
displayedButton.setTitleColor(highlightedButton.backgroundColor, for: .normal)
displayedButton.backgroundColor = highlightedButton.titleColor(for: .normal)
let highlightController = MDCFeatureHighlightViewController(highlightedView: highlightedButton, andShow: displayedButton, completion: completion)
Objective-C
xxxxxxxxxx
Extensions
Color Theming
You can theme feature highlight with your app's color scheme using the ColorThemer extension.
You must first add the Color Themer extension to your project:
xxxxxxxxxx
pod 'MaterialComponents/FeatureHighlight+ColorThemer'
Swift
xxxxxxxxxx
// Step 1: Import the ColorThemer extension
import MaterialComponents.MaterialFeatureHighlight_ColorThemer
// Step 2: Create or get a color scheme
let colorScheme = MDCSemanticColorScheme()
// Step 3: Apply the color scheme to your component
MDCFeatureHighlightColorThemer.applySemanticColorScheme(colorScheme, to: component)
Objective-C
xxxxxxxxxx
Typography Theming
You can theme feature highlight with your app's typography scheme using the TypographyThemer extension.
You must first add the Typography Themer extension to your project:
xxxxxxxxxx
pod 'MaterialComponents/FeatureHighlight+TypographyThemer'
Swift
xxxxxxxxxx
// Step 1: Import the TypographyThemer extension
import MaterialComponents.MaterialFeatureHighlight_TypographyThemer
// Step 2: Create or get a typography scheme
let typographyScheme = MDCTypographyScheme()
// Step 3: Apply the typography scheme to your component
MDCFeatureHighlightTypographyThemer.applyTypographyScheme(typographyScheme, to: component)
Objective-C
xxxxxxxxxx