material-components_material-components-ios/components/FeatureHighlight

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.

Material Design Specifications

• Feature Discovery

---

Installation

Requirements

• Xcode 7.0 or higher.
• iOS SDK version 7.0 or higher.

Installation with CocoaPods

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

---

Usage

Importing

Before using Feature Highlight, you'll need to import it:

Swift

import MaterialComponents

Objective-C

#import "MaterialFeatureHighlight.h"

Highlighting a view

Swift

let completion = {(accepted) in
  // perform analytics here
  // and record whether the highlight was accepted
}
let highlightController = MDCFeatureHighlightViewController.init(highlightedView: highlightedView
                                                                 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(kMDCFeatureHighlightBackgroundAlpha)
self.present(viewController: highlightController, animated: true)

Objective-C

MDCFeatureHighlightCompletion completion = ^(accepted) {
  // perform analytics here
  // and record whether the highlight was accepted
};

MDCFeatureHighlightViewController *highlightController =
      [[MDCFeatureHighlightViewController alloc] initWithHighlightedView:highlightedView
                                                              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:kMDCFeatureHighlightBackgroundAlpha]
[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.

Swift

let displayedButton = UIButton(type: .system)
displayedButton.setTitle(highlightedButton.titleForState(.normal), for: .normal)
displayedButton.setTitleColor(highlightedButton.backgroundColor, for: .normal)
displayedButton.backgroundColor = highlightedButton.titleColorForState(.normal)

let highlightController =
    MDCFeatureHighlightViewController.init(highlightedView: highlightedButton,
                                           displayedView: displayedButton)

Objective-C

UIButton *displayedButton = [UIButton buttonType: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:displayedView
                                                              completion:completion];