Material Design — App bars: bottom

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

App bars: bottom

Material Design链接：App Bars：bottom

Bottom app bar 在手机屏幕底部展示导航和关键操作。

---

用法

Bottom app bars 提供对 bottom navigation drawer 的访问以及最多四个操作（包括 floating action button在内）。

原则

·可操作

Bottom app bars 突出显示重要的屏幕操作并提高用户对 floating action button 的意识。

·灵活

Bottom app bars 的布局和操作会因为屏幕的需求而改变。

·人体工学

Bottom app bars 很容易从移动设备上的手持位置到达。

什么时候用

Bottom app bars 应该用于：

·仅限移动设备

·访问 bottom navigation drawer

·有两到五个操作的屏幕

Bottom app bars 不该应用于：

·带有 bottom navigation bar 的应用程序

·有一个或没有操作的屏幕

当只有一个或没有操作（除floating action button）时，不使用bottom app bars

---

组成

Bottom app bars 可以包含适用于当前屏幕上下文的操作。 Bottom app bars 包括最左侧的 navigation menu control 和floating action button（当存在时）。 如果 overflow menu control 包含在 bottom app bar 中，则会在其他操作后面放置。

位置

Bottom app bars 根据 FAB 的存在及其在 bar 中的位置具有三种不同的布局。 这些布局决定了可以包含在该 bar 中的操作的数量。

1、FAB 在中间

在主屏幕上使用 bottom app bars ，其中包含 navigation menu control 和突出的操作（如FAB）。 在 bar 的另一侧至少可以放置一个，最多两个操作。

2、FAB 在尾部

在需要 FAB 和三到四个附加操作的手机屏幕上使用FAB

3、无 FAB

当不需要 FAB 时， bottom app bar 可以容纳 navigation menu icon，并且最多可以在另一侧对齐四个操作

横向

在横向方向上，操作仍然与屏幕边缘对齐，便于手持访问

Floating Action Button

如果存在，FAB 将以两种方式之一显示在 bottom app bars 上：

1、重叠：FAB位于比 bottom app bar 更高的位置，并且对 bar 的形状没有影响。

2、嵌入：FAB处于与 bottom app bar 相同的高度，并且 bar 的形状转换为让 FAB 嵌入在 bottom app bar 中。

使用嵌入的方式可增加 FAB 的视觉突出性或突出定制的元素形状。 

不要将 FAB 放在 bottom app bar 外面，因为很难够到

---

行为

布局

为了支持 app 不同部分的意图，可以更改 bottom app bar 的布局和操作以适合每个屏幕。

例如，屏幕可以根据最适合屏幕内容显示更多或更少的操作。

为展示主要操作，此 bottom app bar 在其主屏幕上使用 FAB 居中的布局。 查看消息时，bottom app bar 布局更改为“FAB 在尾部”布局以适应其他上下文操作。

滚动

滚动时， bottom app bar 可以出现或消失：

向下滚动隐藏 bottom app bar， 如果有FAB，则它会脱离 bar 并保留在屏幕上。

向上滚动显示 bottom app bar，如果有FAB，则重新附着 FAB。

Bottom app bar 可以改变其边缘的形状，例如凹口以容纳FAB。 当 bar 脱离FAB时，会恢复到默认的形状。 在返回到屏幕并重新附着 FAB 后，bar 重新获得了缺口形状。

---

海拔

Bottom app bar 的海拔高度为8dp。 当与 FAB 配合时，FAB 的静止和凸起高度应该增加，以便在 bottom app bar 上方保持可见。

由 bottom app bar 生成的 menus（例如 bottom navigation drawer 或 overflow menu）与 bottom sheets 一样都高于 bar 的高度。

底部的导航抽屉从底部的应用栏打开。 抽屉在底部应用程序栏前打开，并显示顶部应用程序栏以在达到完整高度时关闭抽屉。

Bottom navigation drawer 从 bottom app bar 打开。 Drawer 在 bottom app bar 前面打开，并显示 top app bar 以在达到完整高度时关闭抽屉。

覆盖 bottom app bar 的元素

Bottom app bar 可以被键盘和其他临时表面覆盖。 如果 app 需要频繁阻挡 bar，应该使用另一个组件。

---

位置

导航

Bottom app bar 可显示 navigation menu icon 以打开 bottom navigation drawer，但该 bar 本身不包含任何导航操作（例如向上导航至主屏幕或一个关闭图标）。App 导航应放置在另一个组件中，例如 top app bar 或嵌入在屏幕中。

不要将导航操作置于bottom app bar中，因为它们可以被临时表面覆盖

与 top app bar 同时使用

当与 bottom app bar 一起使用时，top app bars 可以提供向上导航和其他操作。 在整个 app 中，操作应该在两个栏中进行组织和划分。

以下项目受益于特定的展示位置：

·将一个 navigation menu control 放置在 bottom app bar（为了可达性）

·放置一个 overflow menu control 作为尾部操作

·将操作（如搜索）置于整个 app 的一致位置

·在 top app bar 中放置破坏性操作，例如“删除”

在主屏幕上，不要在 top app bar 和 bottom app bar 中放置 navigation menu control 。 只有一个 app bar 应该有这个control

Bottom app bar 可以提供对操作（如导航和搜索）的一致访问，从而允许 top app bar 保留上下文相关的，屏幕特定的操作

Snackbars

为了避免妨碍，snackbars 和 toasts 应该在 bottom app bar 垂直上方进行动画展示。