ButtonBar

Button bar

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

Design & API documentation

• Material Design guidelines: App bars: top

Related components

• NavigationBar

Table of contents

• Overview
• Installation
  • Installation with CocoaPods
  • Importing
• Usage
  • Typical use
  • Supported UIBarButtonItem properties
• Extensions
  • 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

Theming

MDCButtonBar is intended to be themed through the AppBar component's theming extension. More information can be found at https://github.com/material-components/material-components-ios/tree/develop/components/AppBar#theming.