Banner

A banner displays a prominent message and related optional actions.

Design & API documentation

Table of contents

• Overview
• Installation
  • Installation with CocoaPods
  • Importing
• Usage
  • Appearance
  • Styling
  • LayoutMargins
• Examples
  • Creating a banner view

Overview

MDCBannerView is a view that displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.

MDCBannerView is currently a beta component. Therefore, clients that wish to use MDCBannerView in their app will need to manually clone the repo and add the code to their project.

Installation

Installation with CocoaPods

Add the following to your Podfile:

pod 'MaterialComponentsBeta/Banner'

Then, run the following command:

pod install

Importing

To use the MDCBannerView in your code, import the MaterialBanner umbrella header (Objective-C) or MaterialComponentsBeta module (Swift).

Swift

import MaterialComponentsBeta.MaterialBanner

Objective-C

#import "MaterialBanner.h"

Usage

Appearance

By default, MDCBannerView is configured to display an image view, a text label and two buttons. To hide the image view on MDCBannerView, users can set the hidden property on imageView to be true. Similarly, users can hide a button on the banner view by setting the hidden property on trailingButton to be true.

Styling

By default, MDCBannerView is configured to display items with black text and a white background. To customize the color and style of the text, image view and buttons displayed on MDCBannerView, directly set the relevant properties, such as tintColor, on textView, imageView, leadingButton and trailingButton.

LayoutMargins

MDCBannerView uses layoutMargins to manage the margins for elements on the banner view.

Examples

Creating a banner view

Swift

let bannerView = MDCBannerView()
bannerView.textView.text = "Text on Banner"
bannerView.imageView.image = UIImage(named: "bannerIcon")
bannerView.leadingButton.setTitle("Action", for: .normal)
bannerView.trailingButton.hidden = true

// Optional configuration on layoutMargins
bannerView.layoutMargins = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10);

let bannerViewSize = bannerView.sizeThatFits(view.bounds.size)
bannerView.frame = CGRect(x: 0, y: 0, width: bannerViewSize.width, height: bannerViewSize.height)

view.addSubview(bannerView)

Objective-C

MDCBannerView *bannerView = [[MDCBannerView alloc] init];
bannerView.textView.text = @"Text on Banner";
bannerView.imageView.image = [UIImage imageNamed:@"bannerIcon"];
[bannerView.leadingButton setTitle:@"Action" forState:UIControlStateNormal];
bannerView.trailingButton.hidden = YES;

// Optional configuration on layoutMargins. 
bannerView.layoutMargins = UIEdgeInsetsMake(0, 10, 0, 10);

CGSize bannerViewSize = [bannerView sizeThatFits:self.view.bounds.size];
bannerView.frame = CGRectMake(0, 0, bannerViewSize.width, bannerViewSize.height);

[self.view addSubview:bannerView];