Button bar

The Button Bar is a view that represents a list of UIBarButtonItems as horizontally aligned buttons.

Design & API documentation

Related components

Table of contents

• Overview
• Installation
  • Installation with CocoaPods
  • Importing
• Usage
  • Typical use
  • Supported UIBarButtonItem properties
• Extensions
  • Color Theming
  • Typography Theming

Overview

A Button Bar is similar in concept to a UIToolbar, but Button Bars are not a drop-in API replacement for UIToolbar. Button Bars are slightly more versatile in that one might use a Button Bar to create a Toolbar or a Navigation Bar (left/right button bars).

Button Bar supports a subset of UIBarButtonItem's properties. Learn more by reading the section on UIBarButtonItem properties.

Installation

Installation with CocoaPods

Add the following to your Podfile:

pod 'MaterialComponents/ButtonBar'

Then, run the following command:

pod install

Importing

To import the component:

Swift

import MaterialComponents.MaterialButtonBar

Objective-C

#import "MaterialButtonBar.h"

Usage

Typical use

Swift

let buttonBar = MDCButtonBar()

let actionItem = UIBarButtonItem(
  title: "<# title #>",
  style: .done, // ignored
  target: self,
  action: "<# selector #>"
)

buttonBar.items = [actionItem]

let size = buttonBar.sizeThatFits(self.view.bounds.size)
buttonBar.frame = CGRect(x: <# x #>, y: <# y #>, width: size.width, height: size.height)
self.view.addSubview(buttonBar)

Objective-C

MDCButtonBar *buttonBar = [[MDCButtonBar alloc] init];

UIBarButtonItem *actionItem =
    [[UIBarButtonItem alloc] initWithTitle:@"<# title #>"
                                     style:UIBarButtonItemStyleDone // ignored
                                    target:self
                                    action:@selector(<# selector #>)];

buttonBar.items = @[ actionItem ];

CGSize size = [buttonBar sizeThatFits:self.view.bounds.size];
CGPoint origin = CGPointZero;
buttonBar.frame = CGRectMake(origin.x, origin.y, size.width, size.height);
[self.view addSubview:buttonBar];

Supported UIBarButtonItem properties

The following properties are taken into consideration when items is set and the corresponding buttons are created.

Changes made to properties marked (observed) will be reflected in the corresponding buttons.

• title (observed)
• image (observed)
• enabled (observed)
• width
• target
• action
• titleTextAttributesForState:

TODO(featherless): File bugs to observe the rest of the properties.

Note: in order to make Button Bar reflect changes to not-observed properties you must clear the MDCButtonBar instance's items property and reset it, like so:

Swift

actionItem.target = <some other target>

let items = buttonBar.items
buttonBar.items = nil
buttonBar.items = items

Objective-C

actionItem.target = <some other target>;

NSArray *items = buttonBar.items;
buttonBar.items = nil;
buttonBar.items = items;

Extensions

Color Theming

You can theme a button bar with your app's color scheme using the ColorThemer extension.

You must first add the Color Themer extension to your project:

pod 'MaterialComponents/ButtonBar+ColorThemer'

Swift

// Step 1: Import the ColorThemer extension
import MaterialComponents.MaterialButtonBar_ColorThemer

// Step 2: Create or get a color scheme
let colorScheme = MDCSemanticColorScheme()

// Step 3: Apply the color scheme to your component
MDCButtonBarColorThemer.applySemanticColorScheme(colorScheme, to:buttonBar)

Objective-C

// Step 1: Import the ColorThemer extension
#import "MaterialButtonBar+ColorThemer.h"

// Step 2: Create or get a color scheme
id<MDCColorScheming> colorScheme = [[MDCSemanticColorScheme alloc] initWithDefaults:MDCColorSchemeDefaultsMaterial201804];

// Step 3: Apply the color scheme to your component
[MDCButtonBarColorThemer applySemanticColorScheme:colorScheme
     toButtonBar:buttonBar];

Typography Theming

You can theme a button bar with your app's typography scheme using the TypographyThemer extension.

You must first add the Typography Themer extension to your project:

pod 'MaterialComponents/ButtonBar+TypographyThemer'

Swift

// Step 1: Import the TypographyThemer extension
import MaterialComponents.MaterialButtonBar_TypographyThemer

// Step 2: Create or get a typography scheme
let typographyScheme = MDCTypographyScheme()

// Step 3: Apply the typography scheme to your component
MDCButtonBarTypographyThemer.applyTypographyScheme(typographyScheme, to: buttonBar)

Objective-C

// Step 1: Import the TypographyThemer extension
#import "MaterialButtonBar+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
[MDCButtonBarTypographyThemer applyTypographyScheme:colorScheme
     toButtonBar:buttonBar];