自上次參加完回音分享會后誉尖,我下定決心要洗心革面乖乖打基礎烤咧,于是開啟了這個part,爭取兩個月不間斷更新酪耳,寫完Material Design與iOS中的組件(順便學學英語)浓恳,以便今后在使用的時候完全不虛
App bars: top
Material Design鏈接:App bars:top
Top app bar?顯示與當前屏幕相關的信息和操作刹缝。
用法
Top app bar 提供與當前屏幕相關的內(nèi)容和操作。 可用于品牌颈将,屏幕 title梢夯,導航和操作。
Top app bar 可以轉化為一個?contextual?action bar晴圾。
原則
·始終保持
Top app bar 出現(xiàn)在 app 中每個屏幕的頂部颂砸,并且可以在滾動時消失。
·引導
Top app bars 提供了一種可靠的方式來引導用戶瀏覽 app死姚。
·一致
Top app bars 有一個一致的位置和內(nèi)容來增加熟悉度人乓。
類型
Contextual action bars 為選定的項目提供操作。Top app bar可以轉換為?contextual action bar都毒,在采取行動或將其解除前保持活動狀態(tài)色罚。
分解
在 top app bar 中推薦的元素放置順序是(從左到右的語言順序中):
·將導航放置在最左側
·將任何 titles 放在導航的右側
·將 contextual actions 置于導航的右側
·將 overflow menu(如果使用)放在最右側
對于從右向左的語言順序,應該翻轉放置位置账劲。
Bar
Bar 包含 top app bar?的內(nèi)容保屯。 各種 bar 高度可供選擇:
·Regular
·Prominent
·Dense (desktop only)
·Prominent dense (desktop only)
Prominent
Prominent top app bars 可用于更長的?titles,用于存放圖像涤垫,或為 top app bar?提供更強大的存在感姑尺。
Dense (desktop only)
The top app bar may be condensed on desktop to accommodate denser layouts.
Top app bar 可能會在電腦上濃縮以適應更密集的布局。
Prominent dense
電腦上?prominent top app bars on 可以具有密集狀態(tài)以適應更密集的布局蝠猬。
Bars 中的圖像
Bars 可以包含圖像切蟋。 由于 Prominent top app bars 提供了更多的空間,因此推薦在其上使用圖像榆芦。
不要使用讓?top app bar 文字和圖標難以辨認的圖像柄粹。
Navigation icon (optional)
Navigation icon 是可選的。 當它出現(xiàn)在 app bar?中時匆绣,它將對齊欄的左側驻右。
它可以采取以下任何一種形式:
·一個?menu icon,打開一個 navigation drawer
·向上箭頭崎淳,用于導航 app 的層次結構
·后退箭頭堪夭,返回到前一個屏幕
Title (optional)
App bar title 可以用來描述:
·用戶當前所在的屏幕
·用戶當前所在的部分
·正在使用的 app
默認情況下,titles 在電腦桌面上左對齊拣凹。 手機和平板電腦上標題的默認位置取決于平臺森爽。?
Action items and overflow menu (optional)
App?操作位于?app bar?的右側嚣镜,可以是 icon爬迟,也可以是?overflow menu。Overflow menus?在移動平臺上有所不同菊匿。?
Icon 的位置
將最常用的操作放在左側付呕,越往右放置越少用的操作计福。 任何不適合?app bar?的其余操作都可能會進入?overflow menu。
App bar?寬度發(fā)生變化時徽职,操作會進入和退出?overflow menu棒搜,例如設備是從橫向旋轉到縱向。?
行為
滾動
滾動時育韩,e top app bar?可保留原位克蚂,或以下列方式轉換:
·向上滾動隱藏?top app bar
·向下滾動顯示?top app bar
當?top app bar滾動時,其海拔在其他元素之上變得非常明顯筋讨。
當向上滾動時悉罕,使用帶有圖像的?prominent top app bars?可以轉換為正常的?top app bars赤屋。 他們不應該返回到?prominent?模式,直到用戶滾動回頁面的頂部壁袄。
Nesting actions
當屏幕大小調(diào)整時类早,?top app bar?會隨之調(diào)整大小。 操作合并到?overflow menu?中嗜逻。
動作定位
操作從右向左移動到?overflow menu?涩僻,使最常用的操作最后移到?overflow menu。
Contextual action bar?
用法
?top app bar?可以轉換為?contextual action bar?以向選定項目提供上下文操作栈顷。 例如逆日,在用戶從圖庫中選擇照片時,Top app bar?轉換為與選擇的照片相關的動作的?contextual app bar萄凤。
當?top app bar?轉換為?contextual action bar室抽,會發(fā)生以下更改:
·Bar顏色改變
·導航圖標被關閉圖標替換
·Top app bar?標題文本轉換為?contextual action bar?
·Top app bar?動作被替換為?contextual?動作
關閉后,contextual action bar?會轉換回?top app bar靡努。
組成
Bar?
當?top app bar?變換為?contextual action bar?時坪圾,bar?應更改顏色以指示狀態(tài)更改。