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.
- Xcode 7.0 or higher.
- iOS SDK version 7.0 or higher.
To add this component to your Xcode project using CocoaPods, add the following to your Podfile
:
pod 'MaterialComponents/FeatureHighlight'
Then, run the following command:
pod install
Before using Feature Highlight, you'll need to import it:
import MaterialComponents.MaterialFeatureHighlight
#import "MaterialFeatureHighlight.h"
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)
MDCFeatureHighlightCompletion completion = ^(BOOL accepted) {
// perform analytics here
// and record whether the highlight was accepted
};
MDCFeatureHighlightViewController *highlightController =
[[MDCFeatureHighlightViewController alloc] initWithHighlightedView: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 blueColor] colorWithAlphaComponent:kMDCFeatureHighlightOuterHighlightAlpha];
[self presentViewController:highlightController animated:YES completion:nil];
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.
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)
UIButton *displayedButton = [UIButton buttonWithType:UIButtonTypeSystem];
[displayedButton setTitle:[highlightedButton titleForState:UIControlStateNormal]
forState:UIControlStateNormal];
[displayedButton setTitleColor:highlightedButton.backgroundColor forState:UIControlStateNormal];
displayedButton.backgroundColor = [highlightedButton titleColorForState:UIControlStateNormal];
MDCFeatureHighlightViewController *highlightController =
[[MDCFeatureHighlightViewController alloc] initWithHighlightedView:highlightedButton
andShowView:displayedButton
completion:completion];