自上次參加完回音分享會(huì)后撰豺，我下定決心要洗心革面乖乖打基礎(chǔ)，于是開(kāi)啟了這個(gè)part，爭(zhēng)取兩個(gè)月不間斷更新昌跌，寫(xiě)完Material Design與iOS中的組件（順便學(xué)學(xué)英語(yǔ)），以便今后在使用的時(shí)候完全不虛

App bars: bottom

Material Design鏈接：App Bars：bottom

Bottom app bar?在手機(jī)屏幕底部展示導(dǎo)航和關(guān)鍵操作照雁。

用法

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

原則

·可操作

Bottom app bars 突出顯示重要的屏幕操作并提高用戶(hù)對(duì) floating action button?的意識(shí)。

·靈活

Bottom app bars 的布局和操作會(huì)因?yàn)槠聊坏男枨蠖淖儭?/p>

·人體工學(xué)

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

什么時(shí)候用

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

·僅限移動(dòng)設(shè)備

·訪問(wèn) bottom navigation drawer

·有兩到五個(gè)操作的屏幕

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

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

·有一個(gè)或沒(méi)有操作的屏幕

當(dāng)只有一個(gè)或沒(méi)有操作（除floating action button）時(shí)萍诱，不使用bottom app bars

組成

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

位置

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

1、FAB 在中間

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

2苹享、FAB 在尾部

在需要 FAB 和三到四個(gè)附加操作的手機(jī)屏幕上使用FAB

3、無(wú) FAB

當(dāng)不需要 FAB 時(shí)， bottom app bar 可以容納 navigation menu icon得问，并且最多可以在另一側(cè)對(duì)齊四個(gè)操作

橫向

在橫向方向上囤攀，操作仍然與屏幕邊緣對(duì)齊，便于手持訪問(wèn)

Floating Action Button

如果存在宫纬，F(xiàn)AB 將以?xún)煞N方式之一顯示在 bottom app bars 上：

1焚挠、重疊：FAB位于比 bottom app bar?更高的位置，并且對(duì) bar 的形狀沒(méi)有影響漓骚。

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

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

不要將 FAB 放在 bottom app bar 外面，因?yàn)楹茈y夠到

行為

布局

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

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

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

滾動(dòng)

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

向下滾動(dòng)隱藏 bottom app bar淆九，?如果有FAB统锤，則它會(huì)脫離 bar 并保留在屏幕上。

向上滾動(dòng)顯示 bottom app bar吩屹，如果有FAB跪另，則重新附著 FAB拧抖。

Bottom app bar?可以改變其邊緣的形狀煤搜，例如凹口以容納FAB。 當(dāng) bar 脫離FAB時(shí)唧席，會(huì)恢復(fù)到默認(rèn)的形狀擦盾。 在返回到屏幕并重新附著 FAB 后，bar 重新獲得了缺口形狀淌哟。

海拔

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

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

底部的導(dǎo)航抽屜從底部的應(yīng)用欄打開(kāi)。 抽屜在底部應(yīng)用程序欄前打開(kāi)症见，并顯示頂部應(yīng)用程序欄以在達(dá)到完整高度時(shí)關(guān)閉抽屜喂走。

Bottom navigation drawer 從 bottom app bar?打開(kāi)。 Drawer 在 bottom app bar 前面打開(kāi)谋作，并顯示 top app bar 以在達(dá)到完整高度時(shí)關(guān)閉抽屜芋肠。

覆蓋 bottom app bar?的元素

Bottom app bar 可以被鍵盤(pán)和其他臨時(shí)表面覆蓋。 如果 app 需要頻繁阻擋 bar遵蚜，應(yīng)該使用另一個(gè)組件帖池。

位置

導(dǎo)航

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

不要將導(dǎo)航操作置于bottom app bar中寂殉，因?yàn)樗鼈兛梢员慌R時(shí)表面覆蓋

與 top app bar 同時(shí)使用

當(dāng)與 bottom app bar?一起使用時(shí)帮孔，top app bars 可以提供向上導(dǎo)航和其他操作。 在整個(gè) app 中不撑，操作應(yīng)該在兩個(gè)欄中進(jìn)行組織和劃分文兢。

以下項(xiàng)目受益于特定的展示位置：

·將一個(gè) navigation menu control 放置在 bottom app bar（為了可達(dá)性）

·放置一個(gè) overflow menu control 作為尾部操作

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

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

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

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

Snackbars

為了避免妨礙兼呵，snackbars 和 toasts 應(yīng)該在 bottom app bar?垂直上方進(jìn)行動(dòng)畫(huà)展示。?