組件與常用模式

前面已經(jīng)比較全面的介紹了Material Design相關(guān)的設(shè)計(jì)哲學(xué)、設(shè)計(jì)原理和方法論。這一章開(kāi)始，我們將看看這些原理是如何在安卓系統(tǒng)當(dāng)中得到實(shí)踐的。

一個(gè)應(yīng)用并不是完全從什么都沒(méi)有來(lái)組建的，至少會(huì)有一匹一匹的磚嘛。而在界面設(shè)計(jì)當(dāng)中，這些能夠拿過(guò)來(lái)就使用的磚塊就是控件。

例如，按鈕 滑動(dòng)條 列表等等，都是可以直接拿過(guò)來(lái)用的磚塊。

Material Design最基礎(chǔ)的體現(xiàn)，就是看看這些磚長(zhǎng)成什么樣，以及如何用Material Design的理念將這些磚組合起來(lái)，構(gòu)建成應(yīng)用的界面。

這樣的磚塊很多，Google在Material Design的規(guī)范中給出了詳細(xì)的定義。

因此我不會(huì)一一列舉，只是拿出其中一兩個(gè)最為常見(jiàn)的、最為典型的磚塊和大家討論，看看規(guī)范該如何解讀和使用。知道了這些典型磚塊的實(shí)踐方式以后，大家就能自己根據(jù)設(shè)計(jì)規(guī)范來(lái)查看資料了。

我這里選取了按鈕 列表 應(yīng)用欄 系統(tǒng)欄來(lái)詳細(xì)的討論。

按鈕

Material Design中有3類按鈕：

• Floating action按鈕：前面已經(jīng)大致介紹過(guò)，它是一個(gè)圓形的按鈕，懸浮在界面之上6dp的位置，當(dāng)點(diǎn)擊的時(shí)候，按鈕會(huì)向上浮動(dòng)（顯示出更大的陰影），是界面中吸引用戶的界面元素之一；

• Raised按鈕：擁有背景顏色（Accent color）的按鈕，點(diǎn)擊時(shí)它在z軸的位置會(huì)向上變化；

• Flat按鈕：按鈕文字有顏色（Accent color）的按鈕，點(diǎn)擊時(shí)它在z軸的位置不會(huì)變化；

Flat按鈕

Flat按鈕常常用在toolbar、對(duì)話框以及需要與很多文字配合的地方。通常用來(lái)告訴用戶“我能提供一些輕量級(jí)的功能，這些功能并不是我的特色，你知道我有就行”。

它的設(shè)計(jì)規(guī)范如下，

項(xiàng)目數(shù)值

最小寬度	88dp
高度	36dp
邊角弧度半徑	2dp
左右margin	8dp
左右padding	8dp
字體大小	15sp

當(dāng)使用亮色主題并按下按鈕的時(shí)候，按鈕的背景顏色是#999999，透明度為40%；
當(dāng)使用暗色主題并按下按鈕的時(shí)候，按鈕的背景顏色是#CCCCCC，透明度為25%；

當(dāng)點(diǎn)擊按鈕的時(shí)候，會(huì)出現(xiàn)水波紋一樣的動(dòng)畫(huà)，

Raised按鈕

Raised按鈕比Flat按鈕能更加吸引用戶的注意力。通常用來(lái)告訴用戶“點(diǎn)擊我以后，會(huì)啟動(dòng)我一個(gè)很重要的功能，你要特別注意”。

它的設(shè)計(jì)規(guī)范如下，

項(xiàng)目數(shù)值

最小寬度	88dp
高度	36dp
默認(rèn)z軸位置	2dp
按下時(shí)z軸位置	8dp
邊角弧度半徑	2dp
左右margin	0dp
左右padding	16dp
字體大小	15sp

當(dāng)使用暗色主題時(shí)，背景的顏色如下，

按鈕狀態(tài)數(shù)值

正常	調(diào)色板500類型的顏色
按下	調(diào)色板700類型的顏色

當(dāng)點(diǎn)擊按鈕的時(shí)候，會(huì)出現(xiàn)水波紋一樣的動(dòng)畫(huà)，之后按鈕在Z軸的位置也會(huì)提升，

FloatingAction按鈕

FloatAction按鈕是界面當(dāng)中最引人矚目的按鈕。它代表了這個(gè)界面能提供的最重要、最核心的功能。默認(rèn)情況下它的尺寸是56dp，放在上方會(huì)小一點(diǎn)，是40dp。

按照中心位置會(huì)內(nèi)嵌一個(gè)系統(tǒng)圖標(biāo)，系統(tǒng)圖標(biāo)的大小我們?cè)趫D標(biāo)的章節(jié)講過(guò)，是24dp。

需要注意的是：并不是所有的界面一定要有個(gè)FloatAction按鈕，它的存在完全是由應(yīng)用的邏輯決定的。之所以我們看到那么多界面都有FloatAction按鈕，是因?yàn)檫@是Material Design的典型特征，所以選擇的很多例子都有它。如果某個(gè)界面確實(shí)需要FloatAction按鈕，那么一個(gè)界面上也只能有一個(gè)，表明只有一個(gè)功能是最為重要的。

FloatAction按鈕還有一些常用的使用模式：

• 當(dāng)擁有FloatAction按鈕的界面退出的時(shí)候，按鈕要用動(dòng)畫(huà)的形式消失；
  當(dāng)擁有FloatAction按鈕的界面顯示的時(shí)候，按鈕要用動(dòng)畫(huà)的形式出現(xiàn)；

  當(dāng)擁有FloatAction按鈕的界面在內(nèi)部進(jìn)行切換的時(shí)候，按鈕要有動(dòng)態(tài)變化的效果；

• 按鈕點(diǎn)擊后可以，展示出更多菜單；

  • 按鈕變化成一個(gè)新的紙片，紙片上展現(xiàn)更多的內(nèi)容；

它的設(shè)計(jì)規(guī)范如下，

項(xiàng)目數(shù)值

標(biāo)準(zhǔn)尺寸	56dp
最小尺寸	40dp
內(nèi)嵌圖標(biāo)尺寸	24dp
默認(rèn)z軸位置	6dp
按下時(shí)z軸位置	12dp
背景顏色	Accent Color

列表

接下來(lái)，我們看看另外一個(gè)會(huì)經(jīng)常用到的組件列表。

列表用來(lái)顯示展示類型相同的數(shù)據(jù)，比如都有頭像、名字、職務(wù)等信息，不同的只是這些信息的具體內(nèi)容。

列表項(xiàng)是列表的一個(gè)顯示單元，列表項(xiàng)的布局不要超過(guò)三行，如果確實(shí)要超過(guò)三行，那么就不應(yīng)該使用列表來(lái)展示內(nèi)容了。

列表項(xiàng)的內(nèi)容根據(jù)位置的不同，體現(xiàn)出的重要性也不同：

靠左邊的內(nèi)容是最重要的，右邊的次之；

靠上邊的內(nèi)容是最重要的，下邊的次之；

常見(jiàn)的列表布局有以下三種，

單行：有一行文字的顯示

雙行：有兩行文字的顯示

三行：有三行文字的顯示

這些布局中各個(gè)元素的位置，都在規(guī)范中有明確的規(guī)定，經(jīng)過(guò)按鈕那一小節(jié)的講述，我想大家一定具備看懂規(guī)范的能力，能夠從中找到設(shè)置位置的關(guān)鍵點(diǎn)。

在查看上面的示例時(shí)，大家應(yīng)該注意到了列表項(xiàng)的分割線。這些分割線將列表區(qū)域按照邏輯區(qū)分開(kāi)來(lái)，都是1dp的寬度。

• 有的分割線貫穿了整個(gè)屏幕；

• 有的只是將文字的部分分開(kāi)；

• 有的沒(méi)有分隔；

to

關(guān)于分割線，在Material Design的規(guī)范當(dāng)中，也有專門的章節(jié)細(xì)致的講述。

應(yīng)用欄與工具欄

工具欄的作用是把很多操作按鈕集中起來(lái)，一起展現(xiàn)給用戶。它可以放在應(yīng)用界面的上部分、中間、底部，

在安卓的設(shè)計(jì)當(dāng)中，有個(gè)ActionBar的概念，它的作用就是展示一個(gè)應(yīng)用的圖標(biāo)、名字，以及菜單、導(dǎo)航欄等內(nèi)容，從安卓3.0開(kāi)始它就被提出，并推廣了起來(lái)。

不過(guò)從安卓5.0開(kāi)始，在ActionBar的基礎(chǔ)上提出了AppBar。AppBar除了擔(dān)當(dāng)ActionBar的功能外，還增加了一些新的特性，例如滑動(dòng)效果。新引入的具體的控件ToolBar接替了ActionBar的具體功能，成為AppBar最為核心的組件。

為了便于理解，我舉一個(gè)例子。Google在2015年進(jìn)行拆分，成立了多家公司，并將它們規(guī)整到Alphabet公司旗下。而以前的Google只保留搜索業(yè)務(wù)，成為了一個(gè)比較單純的公司。

ActionBar就相當(dāng)于以前的Google公司；AppBar相當(dāng)于Alphabet；ToolBar就是Alphabet成立后的Google。AppBar除了ToolBar以外，還可能包含更多組件在其中。

應(yīng)用欄的高度根據(jù)屏幕橫豎狀態(tài)的不同而不同，

屏幕狀態(tài)高度

豎屏	56dp
橫屏	48dp

應(yīng)用欄可以根據(jù)開(kāi)發(fā)者的要求，變成透明的、半透明的、甚至不顯示。

AppBar除了顯示標(biāo)題、菜單等功能外，還有令人炫目的滑動(dòng)效果，這也是安卓系統(tǒng)使用Material Design的重要特色。

AppBar除了Toolbar以外，可以包含分頁(yè)標(biāo)簽Tabs 圖片等等內(nèi)容。圖片占用的空間叫做可變空間-Flexible space，不一定就是放圖片，也可以放其他的元素，只不過(guò)就界面設(shè)計(jì)來(lái)講，顯示圖片的效果要很多。

• AppBar只有Toolbar：內(nèi)容滾動(dòng)的過(guò)程中，Toolbar可以被頂?shù)较?#xff1b;也可通過(guò)下拉再次出現(xiàn)。

• AppBar有Toolbar和Tab：

• 內(nèi)容滾動(dòng)的過(guò)程中，Toolbar可以被頂?shù)较?#xff0c;只留下Tab；也可通過(guò)下拉再次出現(xiàn)。

• 內(nèi)容滾動(dòng)的過(guò)程中，Toolbar和Tab都被頂?shù)较?#xff1b;也可通過(guò)下拉再次出現(xiàn)。

• AppBar有Toolbar和可變區(qū)域：

• 內(nèi)容滾動(dòng)的過(guò)程中，可變區(qū)域可以被頂?shù)较?#xff0c;只留下Toolbar；也可通過(guò)下拉再次出現(xiàn)。

• 內(nèi)容滾動(dòng)的過(guò)程中，Toolbar和可變區(qū)域都被頂?shù)较?#xff1b;也可通過(guò)下拉再次出現(xiàn)。

狀態(tài)欄與導(dǎo)航欄

用過(guò)智能手機(jī)的同學(xué)對(duì)狀態(tài)欄和導(dǎo)航欄一定不會(huì)陌生，

狀態(tài)欄貫穿了整個(gè)屏幕的寬度，高度是24dp。
導(dǎo)航欄同樣貫穿了整個(gè)屏幕的寬度，高度是48dp。不過(guò)在很多國(guó)內(nèi)定制的系統(tǒng)當(dāng)中，因?yàn)槭謾C(jī)已經(jīng)有了實(shí)體按鍵，就取消了導(dǎo)航欄。

狀態(tài)欄和導(dǎo)航欄的背景顏色是可以各自改變的，透明、半透明、不透明。

為了配合不同應(yīng)用的使用場(chǎng)景，狀態(tài)欄和導(dǎo)航欄的顯示也有不同的表現(xiàn)，

• 沙發(fā)模式（Lean back）：就像在癱坐在沙發(fā)上看電影時(shí)一樣，屏幕盡可能的呈現(xiàn)視頻內(nèi)容，把狀態(tài)欄和導(dǎo)航欄都藏起來(lái)。這個(gè)過(guò)程中你幾乎不會(huì)去接觸到屏幕，當(dāng)你碰觸屏幕的時(shí)候，狀態(tài)欄和導(dǎo)航欄才會(huì)出現(xiàn)。

• 沉浸模式（Immersive）：比如當(dāng)你在使用閱讀軟件看書(shū)的時(shí)候，屏幕只顯示書(shū)本的內(nèi)容，把狀態(tài)欄和導(dǎo)航欄隱藏起來(lái)，讓你沉浸在閱讀的快樂(lè)當(dāng)中。但每次翻頁(yè)的時(shí)候，你還是需要接觸屏幕的。雖然翻頁(yè)的過(guò)程中接觸了屏幕，狀態(tài)欄和導(dǎo)航欄也不會(huì)出現(xiàn)，除非你在屏幕的邊緣做了一個(gè)滑動(dòng)的動(dòng)作，才能將它們?cè)俅螁境觥?/p>

• 關(guān)燈模式（Light out）：當(dāng)你不碰觸屏幕超過(guò)一定的時(shí)間，狀態(tài)欄會(huì)自動(dòng)的隱退；導(dǎo)航欄雖然還在那里，但是那三個(gè)操作的按鈕卻變成了三個(gè)小點(diǎn)。這個(gè)過(guò)程就好像是關(guān)閉了照亮屏幕的燈，狀態(tài)欄和導(dǎo)航欄似乎還在那里，只是沒(méi)有了燈光，已經(jīng)看的不真切了。

---

本文是《從設(shè)計(jì)到實(shí)現(xiàn)-手把手教你做android應(yīng)用開(kāi)發(fā)》系列文檔中的一篇。感謝您的閱讀和反饋，對(duì)本文有任何的意見(jiàn)和建議請(qǐng)留言，我都會(huì)盡量一一回復(fù)。

如果您覺(jué)得本文對(duì)你有幫助，請(qǐng)推薦給更多的朋友；或者加入我們的QQ群348702074和更多的小伙伴一起討論；也希望大家能給我出出主意，讓這些文檔能講的更好，能最大化的幫助到希望學(xué)習(xí)開(kāi)發(fā)的伙伴們。

除了CSDN發(fā)布的文章，本系列最新的文章將會(huì)首先發(fā)布到我的專屬博客book.anddle.com。大家可以去那里先睹為快。

總結(jié)

以上是生活随笔為你收集整理的android应用开发-从设计到实现 2-8 组件与常用模式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。