組件與經常使用模式

前面已經比較全面的介紹了Material Design相關的設計哲學、設計原理和方法論。

這一章開始，我們將看看這些原理是怎樣在安卓系統其中得到實踐的。

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

比如，button 滑動條 列表等等，都是能夠直接拿過來用的磚塊。

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

這種磚塊非常多。Google在Material Design的規范中給出了詳細的定義。

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

我這里選取了button 列表 應用欄 系統欄來詳細的討論。

button

Material Design中有3類button：

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

• Raisedbutton：擁有背景顏色（Accent color）的button。點擊時它在z軸的位置會向上變化。

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

Flatbutton

Flatbutton經常常使用在toolbar、對話框以及須要與非常多文字配合的地方。

通經常使用來告訴用戶“我能提供一些輕量級的功能，這些功能并非我的特色。你知道我有即可”。

它的設計規范例如以下，

項目數值

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

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

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

Raisedbutton

Raisedbutton比Flatbutton能更加吸引用戶的注意力。通經常使用來告訴用戶“點擊我以后，會啟動我一個非常重要的功能，你要特別注意”。

它的設計規范例如以下，

項目數值

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

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

button狀態數值

正常	調色板500類型的顏色
按下	調色板700類型的顏色

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

FloatingActionbutton

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

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

須要注意的是：并非全部的界面一定要有個FloatActionbutton。它的存在全然是由應用的邏輯決定的。

之所以我們看到那么多界面都有FloatActionbutton，是由于這是Material Design的典型特征，所以選擇的非常多樣例都有它。假設某個界面確實須要FloatActionbutton。那么一個界面上也僅僅能有一個，表明僅僅有一個功能是最為重要的。

FloatActionbutton另一些經常使用的使用模式：

• 當擁有FloatActionbutton的界面退出的時候，button要用動畫的形式消失。
  當擁有FloatActionbutton的界面顯示的時候。button要用動畫的形式出現。

  當擁有FloatActionbutton的界面在內部進行切換的時候。button要有動態變化的效果；

• button點擊后能夠，展示出很多其它菜單；

  • button變化成一個新的紙片，紙片上展現很多其它的內容。

它的設計規范例如以下，

項目數值

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

列表

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

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

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

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

靠左邊的內容是最重要的。右邊的次之；

靠上邊的內容是最重要的。下邊的次之；

常見的列表布局有下面三種，

單行：有一行文字的顯示

雙行：有兩行文字的顯示

三行：有三行文字的顯示

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

在查看上面的演示樣例時。大家應該注意到了列表項的切割線。

這些切割線將列表區域依照邏輯區分開來，都是1dp的寬度。

• 有的切割線貫穿了整個屏幕。

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

• 有的沒有分隔。

to

關于切割線，在Material Design的規范其中，也有專門的章節仔細的講述。

應用欄與工具欄

工具欄的作用是把非常多操作button集中起來，一起展現給用戶。它能夠放在應用界面的上部分、中間、底部，

在安卓的設計其中，有個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：

• 內容滾動的過程中，Toolbar能夠被頂到消失，僅僅留下Tab。也可通過下拉再次出現。

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

• AppBar有Toolbar和可變區域：

• 內容滾動的過程中，可變區域能夠被頂到消失，僅僅留下Toolbar；也可通過下拉再次出現。

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

狀態欄與導航欄

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

狀態欄貫穿了整個屏幕的寬度，高度是24dp。
導航欄相同貫穿了整個屏幕的寬度。高度是48dp。

只是在非常多國內定制的系統其中，由于手機已經有了實體按鍵。就取消了導航欄。

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

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

• 沙發模式（Lean back）：就像在癱坐在沙發上看電影時一樣，屏幕盡可能的呈現視頻內容，把狀態欄和導航欄都藏起來。

  這個過程中你差點兒不會去接觸到屏幕，當你碰觸屏幕的時候，狀態欄和導航欄才會出現。

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

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

---

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

假設您認為本文對你有幫助。請推薦給很多其它的朋友；或者添加我們的QQ群348702074和很多其它的小伙伴一起討論。也希望大家能給我出出主意，讓這些文檔能講的更好，能最大化的幫助到希望學習開發的伙伴們。

除了CSDN公布的文章，本系列最新的文章將會首先公布到我的專屬博客book.anddle.com。

大家能夠去那里先睹為快。

轉載于:https://www.cnblogs.com/zhchoutai/p/8724467.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。