android應用開發-從設計到實現 2-8 組件與常用模式

組件與常用模式

前面已經比較全面的介紹了Material Design相關的設計哲學、設計原理和方法論。這一章開始，我們將看看這些原理是如何在安卓系統當中得到實踐的。

一個應用並不是完全從什麼都沒有來組建的，至少會有一匹一匹的磚嘛。而在界面設計當中，這些能夠拿過來就使用的磚塊就是控件。

例如，按鈕 滑動條 列表等等，都是可以直接拿過來用的磚塊。

Material Design最基礎的體現，就是看看這些磚長成什麼樣，以及如何用Material Design的理念將這些磚組合起來，構建成應用的界面。

這樣的磚塊很多，Google在Material Design的規範中給出了詳細的定義。

因此我不會一一列舉，只是拿出其中一兩個最爲常見的、最爲典型的磚塊和大家討論，看看規範該如何解讀和使用。知道了這些典型磚塊的實踐方式以後，大家就能自己根據設計規範來查看資料了。

我這裏選取了按鈕 列表 應用欄 系統欄來詳細的討論。

按鈕

Material Design中有3類按鈕：

• Floating action按鈕：前面已經大致介紹過，它是一個圓形的按鈕，懸浮在界面之上6dp的位置，當點擊的時候，按鈕會向上浮動（顯示出更大的陰影），是界面中吸引用戶的界面元素之一；

• Raised按鈕：擁有背景顏色（Accent color）的按鈕，點擊時它在z軸的位置會向上變化；

• Flat按鈕：按鈕文字有顏色（Accent color）的按鈕，點擊時它在z軸的位置不會變化；

Flat按鈕

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

它的設計規範如下，

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

當使用亮色主題並按下按鈕的時候，按鈕的背景顏色是#999999，透明度爲40%；
當使用暗色主題並按下按鈕的時候，按鈕的背景顏色是#CCCCCC，透明度爲25%；

當點擊按鈕的時候，會出現水波紋一樣的動畫，

Raised按鈕

Raised按鈕比Flat按鈕能更加吸引用戶的注意力。通常用來告訴用戶“點擊我以後，會啓動我一個很重要的功能，你要特別注意”。

它的設計規範如下，

項目	數值
最小寬度	88dp
高度	36dp
默認z軸位置	2dp
按下時z軸位置	8dp
邊角弧度半徑	2dp
左右margin	0dp
左右padding	16dp
字體大小	15sp

當使用暗色主題時，背景的顏色如下，

按鈕狀態	數值
正常	調色板500類型的顏色
按下	調色板700類型的顏色

當點擊按鈕的時候，會出現水波紋一樣的動畫，之後按鈕在Z軸的位置也會提升，

FloatingAction按鈕

FloatAction按鈕是界面當中最引人矚目的按鈕。它代表了這個界面能提供的最重要、最核心的功能。默認情況下它的尺寸是56dp，放在上方會小一點，是40dp。

按照中心位置會內嵌一個系統圖標，系統圖標的大小我們在圖標的章節講過，是24dp。

需要注意的是：並不是所有的界面一定要有個FloatAction按鈕，它的存在完全是由應用的邏輯決定的。之所以我們看到那麼多界面都有FloatAction按鈕，是因爲這是Material Design的典型特徵，所以選擇的很多例子都有它。如果某個界面確實需要FloatAction按鈕，那麼一個界面上也只能有一個，表明只有一個功能是最爲重要的。

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

• 當擁有FloatAction按鈕的界面退出的時候，按鈕要用動畫的形式消失；
  當擁有FloatAction按鈕的界面顯示的時候，按鈕要用動畫的形式出現；

  當擁有FloatAction按鈕的界面在內部進行切換的時候，按鈕要有動態變化的效果；

• 按鈕點擊後可以，展示出更多菜單；

  • 按鈕變化成一個新的紙片，紙片上展現更多的內容；

它的設計規範如下，

項目	數值
標準尺寸	56dp
最小尺寸	40dp
內嵌圖標尺寸	24dp
默認z軸位置	6dp
按下時z軸位置	12dp
背景顏色	Accent Color

列表

接下來，我們看看另外一個會經常用到的組件列表。

列表用來顯示展示類型相同的數據，比如都有頭像、名字、職務等信息，不同的只是這些信息的具體內容。

列表項是列表的一個顯示單元，列表項的佈局不要超過三行，如果確實要超過三行，那麼就不應該使用列表來展示內容了。

列表項的內容根據位置的不同，體現出的重要性也不同：

1. 靠左邊的內容是最重要的，右邊的次之；
2. 靠上邊的內容是最重要的，下邊的次之；

常見的列表佈局有以下三種，

1. 單行：有一行文字的顯示

2. 雙行：有兩行文字的顯示

3. 三行：有三行文字的顯示

這些佈局中各個元素的位置，都在規範中有明確的規定，經過按鈕那一小節的講述，我想大家一定具備看懂規範的能力，能夠從中找到設置位置的關鍵點。

在查看上面的示例時，大家應該注意到了列表項的分割線。這些分割線將列表區域按照邏輯區分開來，都是1dp的寬度。

• 有的分割線貫穿了整個屏幕；

• 有的只是將文字的部分分開；

• 有的沒有分隔；

to

關於分割線，在Material Design的規範當中，也有專門的章節細緻的講述。

應用欄與工具欄

工具欄的作用是把很多操作按鈕集中起來，一起展現給用戶。它可以放在應用界面的上部分、中間、底部，

在安卓的設計當中，有個ActionBar的概念，它的作用就是展示一個應用的圖標、名字，以及菜單、導航欄等內容，從安卓3.0開始它就被提出，並推廣了起來。

不過從安卓5.0開始，在ActionBar的基礎上提出了AppBar。AppBar除了擔當ActionBar的功能外，還增加了一些新的特性，例如滑動效果。新引入的具體的控件ToolBar接替了ActionBar的具體功能，成爲AppBar最爲核心的組件。

爲了便於理解，我舉一個例子。Google在2015年進行拆分，成立了多家公司，並將它們規整到Alphabet公司旗下。而以前的Google只保留搜索業務，成爲了一個比較單純的公司。

ActionBar就相當於以前的Google公司；AppBar相當於Alphabet；ToolBar就是Alphabet成立後的Google。AppBar除了ToolBar以外，還可能包含更多組件在其中。

應用欄的高度根據屏幕橫豎狀態的不同而不同，

屏幕狀態	高度
豎屏	56dp
橫屏	48dp

應用欄可以根據開發者的要求，變成透明的、半透明的、甚至不顯示。

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

AppBar除了Toolbar以外，可以包含分頁標籤Tabs 圖片等等內容。圖片佔用的空間叫做可變空間-Flexible space，不一定就是放圖片，也可以放其他的元素，只不過就界面設計來講，顯示圖片的效果要很多。

• AppBar只有Toolbar：內容滾動的過程中，Toolbar可以被頂到消失；也可通過下拉再次出現。

• AppBar有Toolbar和Tab：

  1. 內容滾動的過程中，Toolbar可以被頂到消失，只留下Tab；也可通過下拉再次出現。

  2. 內容滾動的過程中，Toolbar和Tab都被頂到消失；也可通過下拉再次出現。

• AppBar有Toolbar和可變區域：

  1. 內容滾動的過程中，可變區域可以被頂到消失，只留下Toolbar；也可通過下拉再次出現。

  2. 內容滾動的過程中，Toolbar和可變區域都被頂到消失；也可通過下拉再次出現。

狀態欄與導航欄

用過智能手機的同學對狀態欄和導航欄一定不會陌生，

狀態欄貫穿了整個屏幕的寬度，高度是24dp。
導航欄同樣貫穿了整個屏幕的寬度，高度是48dp。不過在很多國內定製的系統當中，因爲手機已經有了實體按鍵，就取消了導航欄。

狀態欄和導航欄的背景顏色是可以各自改變的，透明、半透明、不透明。

爲了配合不同應用的使用場景，狀態欄和導航欄的顯示也有不同的表現，

• 沙發模式（Lean back）：就像在癱坐在沙發上看電影時一樣，屏幕儘可能的呈現視頻內容，把狀態欄和導航欄都藏起來。這個過程中你幾乎不會去接觸到屏幕，當你碰觸屏幕的時候，狀態欄和導航欄纔會出現。

• 沉浸模式（Immersive）：比如當你在使用閱讀軟件看書的時候，屏幕只顯示書本的內容，把狀態欄和導航欄隱藏起來，讓你沉浸在閱讀的快樂當中。但每次翻頁的時候，你還是需要接觸屏幕的。雖然翻頁的過程中接觸了屏幕，狀態欄和導航欄也不會出現，除非你在屏幕的邊緣做了一個滑動的動作，才能將它們再次喚出。

• 關燈模式（Light out）：當你不碰觸屏幕超過一定的時間，狀態欄會自動的隱退；導航欄雖然還在那裏，但是那三個操作的按鈕卻變成了三個小點。這個過程就好像是關閉了照亮屏幕的燈，狀態欄和導航欄似乎還在那裏，只是沒有了燈光，已經看的不真切了。

---

本文是《從設計到實現-手把手教你做android應用開發》系列文檔中的一篇。感謝您的閱讀和反饋，對本文有任何的意見和建議請留言，我都會盡量一一回復。

如果您覺得本文對你有幫助，請推薦給更多的朋友；或者加入我們的QQ羣348702074和更多的小夥伴一起討論；也希望大家能給我出出主意，讓這些文檔能講的更好，能最大化的幫助到希望學習開發的夥伴們。

除了CSDN發佈的文章，本系列最新的文章將會首先發布到我的專屬博客book.anddle.com。大家可以去那裏先睹爲快。