Bottom app bars display navigation and key actions at the bottom of the screen.
Contents
In order to use MDCBottomAppBarView
, first add the component to your Podfile
:
pod MaterialComponents/BottomAppBar
Then, run the installer:
pod install
After that, import the relevant target or file.
import MaterialComponents.MaterialBottomAppBar
#import "MaterialBottomAppBar.h"
From there, initialize an MDCBottomAppBarView
like you would any UIView
.
The following recommendations will ensure that the bottom app bar is accessible to as many users as possible:
Set an appropriate
accessibilityLabel
to all buttons within the bottom app bar.
bottomAppBar.floatingButton.accessibilityLabel = "Compose"
let trailingButton = UIBarButtonItem()
trailingButton.accessibilityLabel = "Buy"
bottomAppBar.trailingBarButtonItems = [ trailingButton ]
bottomAppBar.floatingButton.accessibilityLabel = @"Compose";
UIBarButtonItem *trailingButton =
[[UIBarButtonItem alloc] initWithTitle:nil
style:UIBarButtonItemStylePlain
target:self
action:@selector(didTapTrailing:)];
trailingButton.accessibilityLabel = @"Buy";
[bottomAppBar setTrailingBarButtonItems:@[ trailingButton ]];
Set an appropriate
accessibilityHint
to all buttons within the bottom app bar.
bottomAppBar.floatingButton.accessibilityHint = "Create new email"
let trailingButton = UIBarButtonItem()
trailingButton.accessibilityHint = "Purchase the item"
bottomAppBar.trailingBarButtonItems = [ trailingButton ]
bottomAppBar.floatingButton.accessibilityHint = @"Create new email";
UIBarButtonItem *trailingButton =
[[UIBarButtonItem alloc] initWithTitle:nil
style:UIBarButtonItemStylePlain
target:self
action:@selector(didTapTrailing:)];
trailingButton.accessibilityHint = @"Purchase the item";
[bottomAppBar setTrailingBarButtonItems:@[ trailingButton ]];
Bottom app bars group primary and secondary actions at the bottom of the screen, where they are easily reachable by the user's thumb.
Use the UIView
subclass MDCBottomAppBarView
to add a bottom app bar to your app. MDCBottomAppBarView
contains a horizontally centered floating action button for primary actions and a customizable navigation bar for secondary actions. The MDCBottomAppBarView
API includes properties that allow changes in elevation, position, and visibility of the embedded floating action button.
Instances of UIBarButtonItem
can be added to a MDCBottomAppBarView
's navigation bar. Leading and trailing navigation items will be shown and hidden based on the position of the floating action button.
Transitions involving floating action button position, elevation, and visibility are animated by default, but animation can be disabled if desired.
let bottomAppBar = MDCBottomAppBarView()
addSubview(bottomAppBar)
view.leftAnchor.constraint(equalTo: bottomAppBarView.leftAnchor).isActive = true
view.rightAnchor.constraint(equalTo: bottomAppBarView.rightAnchor).isActive = true
view.bottomAnchor.constraint(equalTo: bottomAppBarView.bottomAnchor).isActive = true
MDCBottomAppBarView *bottomAppBar = [[MDCBottomAppBarView alloc] init];
[self addSubview:bottomAppBar];
[self.view.leftAnchor constraintEqualToAnchor:bottomAppBarView.leftAnchor].active = YES;
[self.view.rightAnchor constraintEqualToAnchor:bottomAppBarView.rightAnchor].active = YES;
[self.view.bottomAnchor constraintEqualToAnchor:self.textField.bottomAnchor].active = YES;
A bottom app bar has a container and an optional navigation icon, anchored floating action button (FAB), action item(s) and an overflow menu.
- Container
- Navigation icon (optional)
- Floating action button (FAB) (optional)
- Action item(s) (optional)
- Overflow menu (optional)
Attribute | Related method(s) | Default value | |
---|---|---|---|
Color | barTintColor |
-setBarTintColor: -barTintColor |
White |
Elevation | elevation |
-setElevation: -elevation |
8 |
Attribute | Related method(s) | Default value | |
---|---|---|---|
Icon | leadingBarButtonItems trailingBarButtonItems |
-setLeadingBarButtonItems: -leadingBarButtonItems -setTrailingBarButtonItems: -trailingBarButtonItems |
nil |
Attribute | Related method(s) | Default value | |
---|---|---|---|
Alignment mode | floatingButtonPosition |
-setFloatingButtonPosition: -floatingButtonPosition |
.center |
Elevation | floatingButtonElevation |
-setFloatingButtonElevation: -floatingButtonElevation |
0 |
MDCBottomAppBarView
does not currently have a Material Design theming extension or otherwise support theming. Please indicate interest in adding theming support by commenting on issue #7172.