自上次參加完回音分享會后，我下定決心要洗心革面乖乖打基礎(chǔ)，于是開啟了這個part，爭取兩個月不間斷更新，寫完Material Design與iOS中的組件（順便學學英語），以便今后在使用的時候完全不虛

App bars: bottom

Material Design鏈接：App Bars：bottom

Bottom app bar?在手機屏幕底部展示導航和關(guān)鍵操作。

用法

Bottom app bars?提供對 bottom navigation drawer 的訪問以及最多四個操作（包括 floating action button在內(nèi)）。

原則

·可操作

Bottom app bars 突出顯示重要的屏幕操作并提高用戶對 floating action button?的意識。

·靈活

Bottom app bars 的布局和操作會因為屏幕的需求而改變。

·人體工學

Bottom app bars 很容易從移動設(shè)備上的手持位置到達。

什么時候用

Bottom app bars 應(yīng)該用于：

·僅限移動設(shè)備

·訪問 bottom navigation drawer

·有兩到五個操作的屏幕

Bottom app bars 不該應(yīng)用于：

·帶有 bottom navigation bar?的應(yīng)用程序

·有一個或沒有操作的屏幕

當只有一個或沒有操作（除floating action button）時，不使用bottom app bars

組成

Bottom app bars 可以包含適用于當前屏幕上下文的操作。 Bottom app bars 包括最左側(cè)的?navigation menu control?和floating action button（當存在時）。 如果?overflow menu control?包含在?bottom app bar?中，則會在其他操作后面放置。

位置

Bottom app bars 根據(jù) FAB 的存在及其在 bar 中的位置具有三種不同的布局。 這些布局決定了可以包含在該 bar 中的操作的數(shù)量。

1、FAB 在中間

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

2、FAB 在尾部

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

3、無 FAB

當不需要 FAB 時， bottom app bar 可以容納 navigation menu icon，并且最多可以在另一側(cè)對齊四個操作

橫向

在橫向方向上，操作仍然與屏幕邊緣對齊，便于手持訪問

Floating Action Button

如果存在，F(xiàn)AB 將以兩種方式之一顯示在 bottom app bars 上：

1、重疊：FAB位于比 bottom app bar?更高的位置，并且對 bar 的形狀沒有影響。

2、嵌入：FAB處于與 bottom app bar 相同的高度，并且 bar 的形狀轉(zhuǎn)換為讓 FAB 嵌入在 bottom app bar?中。

使用嵌入的方式可增加 FAB 的視覺突出性或突出定制的元素形狀。?

不要將 FAB 放在 bottom app bar 外面，因為很難夠到

行為

布局

為了支持 app 不同部分的意圖，可以更改?bottom app bar?的布局和操作以適合每個屏幕。

例如，屏幕可以根據(jù)最適合屏幕內(nèi)容顯示更多或更少的操作。

為展示主要操作，此 bottom app bar 在其主屏幕上使用 FAB 居中的布局。 查看消息時，bottom app bar 布局更改為“FAB 在尾部”布局以適應(yīng)其他上下文操作。

滾動

滾動時， bottom app bar 可以出現(xiàn)或消失：

向下滾動隱藏 bottom app bar，?如果有FAB，則它會脫離 bar 并保留在屏幕上。

向上滾動顯示 bottom app bar，如果有FAB，則重新附著 FAB。

Bottom app bar?可以改變其邊緣的形狀，例如凹口以容納FAB。 當 bar 脫離FAB時，會恢復(fù)到默認的形狀。 在返回到屏幕并重新附著 FAB 后，bar 重新獲得了缺口形狀。

海拔

Bottom app bar 的海拔高度為8dp。 當與 FAB 配合時，F(xiàn)AB 的靜止和凸起高度應(yīng)該增加，以便在 bottom app bar?上方保持可見。

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

底部的導航抽屜從底部的應(yīng)用欄打開。 抽屜在底部應(yīng)用程序欄前打開，并顯示頂部應(yīng)用程序欄以在達到完整高度時關(guān)閉抽屜。

Bottom navigation drawer 從 bottom app bar?打開。 Drawer 在 bottom app bar 前面打開，并顯示 top app bar 以在達到完整高度時關(guān)閉抽屜。

覆蓋 bottom app bar?的元素

Bottom app bar 可以被鍵盤和其他臨時表面覆蓋。 如果 app 需要頻繁阻擋 bar，應(yīng)該使用另一個組件。

位置

導航

Bottom app bar 可顯示 navigation menu icon 以打開 bottom navigation drawer，但該 bar 本身不包含任何導航操作（例如向上導航至主屏幕或一個關(guān)閉圖標）。App 導航應(yīng)放置在另一個組件中，例如 top app bar?或嵌入在屏幕中。

不要將導航操作置于bottom app bar中，因為它們可以被臨時表面覆蓋

與 top app bar 同時使用

當與 bottom app bar?一起使用時，top app bars 可以提供向上導航和其他操作。 在整個 app 中，操作應(yīng)該在兩個欄中進行組織和劃分。

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

·將一個 navigation menu control 放置在 bottom app bar（為了可達性）

·放置一個 overflow menu control 作為尾部操作

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

·在 top app bar?中放置破壞性操作，例如“刪除”

在主屏幕上，不要在 top app bar 和 bottom app bar 中放置 navigation menu control 。 只有一個 app bar 應(yīng)該有這個control

Bottom app bar 可以提供對操作（如導航和搜索）的一致訪問，從而允許 top app bar 保留上下文相關(guān)的，屏幕特定的操作

Snackbars

為了避免妨礙，snackbars 和 toasts 應(yīng)該在 bottom app bar?垂直上方進行動畫展示。?