淺談 Material Design iCourt技術
什麼是Material Design?
Android一開始充滿著舊Google時代的風格：自由、放任。開發者可以任意上傳自己的應用，而不必通過審核；開發者可以隨意按照自己的想法設計應用，Google方面不予任何限制。可以說，Android一開始就是一片Google開闢的荒地，他允許每個人都可以隨意使用，結果是所有人都各行其是，讓這塊荒地亂糟糟的。
直到Android 4.0，從Palm跳槽到Google擔任Android用戶體驗副總裁的馬蒂亞斯·杜瓦迪（Matias Duarte）上任後，才真正提出設計指導。
在Google I/O 2014大會上，Google非常高調的宣布了Material Design(原質化設計)這一設計語言。杜瓦迪說，「不應該為不同的屏幕規格創建不同的產品，而是使用一種統一的設計方法開發一款可以跨多種屏幕的產品：桌面、智能手機、車載解決方案、智能手錶。
當人們整天都在所有這些不同的屏幕之間切換時，他們應該能夠繼續使用一個特定的程序。這點不僅適用於產品的視覺外觀，也適用於其功能集。如果一個人開發了一個打車應用程序，而它能在7英寸的屏幕上運行，但不能在2英寸的屏幕上運行，這是不行的。」
目標
希望創造一種新的視覺設計語言，能夠遵循優秀設計的經典定則，同時還伴有創新理念和新的科技。
希望創造一種獨一無二的底層系統，在這個系統的基礎之上，構建跨平台和超越設備尺寸的統一體驗。遵循基本的移動設計定則，同時支持觸摸、語音、滑鼠、鍵盤等輸入方式。
設計原則
實體感
Material Design不再讓像素處於同一個平面，而是讓它們按照規則處於空間當中，具備不同的維度。按照Wired的話來說，那就是讓像素具備海拔高度，這樣子的話，系統的不同層面的元素，都是有原則、可預測的，不讓用戶感到無所適從，也避免開發者擔心因為不同的視覺風格而產生衝突。
鮮明、形象、深思熟慮
對於現實世界中的隱喻，Material Design更加傾向於用色彩來提示。我們按下屏幕當中的按鈕時，可以看到按鈕顏色迅速發生變化，向石頭投入湖面一樣，產生了一波漣漪。杜瓦迪這樣設計是因為Material Design中的按鈕都處於一個平面，不再突起，因此它必須採用和以往不同的表示方法，以表明自己已經被按下。
有意義的動畫效果
動效應當在獨立的場景呈現。通過動效，讓物體的變化以更連續、更平滑的方式呈現給用戶，讓用戶能夠充分知曉所發生的變化。
Material Design規範了Android的運動元素，讓按鈕的彈入彈出，卡片的滑入滑出以及從一個界面變化成另一個界面的方法（比如從介紹一首歌的界面到控制播放的界面），都是秩序的、深思熟慮過的。Material Design中只有在高亮動作以及改變交互狀態時，才會使用運動元素來表示。
Material Design在Android上的應用
通過上面的簡單介紹，可以知道Material Design是一套設計語言，這套設計語言可以應用在手機、PC、穿戴設備等等上面。當然也可以在IOS上面使用這種設計方案，當然IOS有他自己的一套設計方案，所以現在Materail Design最大的應用場景就是Android系統。
所以在Android5.0系統的發布的同時，Android也更新了一個support庫：
裡面提供了一些搭配Material Design設計方案來使用的控制項，我們可以打開一下擴展包來看看提供了哪些控制項：
可以看到design擴展包為我們提供了一些搭配Material Design模式使用的控制項，當然這些控制項也不是強制要求符合Material Design設計模式，也可根據特定的需求自己搭配，下面將會介紹這些控制項的使用方式和效果。
1.CoordinatorLayout
官方描述
CoordinatorLayout is a super-poweredFrameLayout.
CoordinatorLayout is intended for two primary use cases:
As a top-level application decor or chrome layout
As a container for a specific interaction with one or more child views
從這裡我們可以知道：CoordinatorLayout是一個增強版的FrameLayout，它可以協調一個或多個子View的交互，控制手勢的滾動技巧，通常作為頂級View來使用。
這個控制項非常強大，可以配合design擴展庫的很多控制項實現聯動效果：比如配合AppbarLayout實現標題欄的收縮；配合SnackBar實現Snackbar的滾動消除；Snackbar和FloatingActionButton的聯動效果；自定義behavior實現自定義的聯動效果等等。
來看一下頂級布局是FrameLayout的效果：
再看看頂級布局是CoordinatorLayout的效果：
2.FloatingActionButton
顧名思義，FloatingActionButton就是一個浮動的按鈕，它是一個帶有陰影效果的圓形按鈕，下面介紹一下它的一些屬性：
app:backgroundTint： 默認FloatingActionButton 的背景色是應用主題的 colorAccent，通過這個屬性可以改變FloatingActionButton的背景顏色。
app:fabSize：用來改變FloatingActionButton的大小。
android:src：用來改變drawable。
app:rippleColor：點擊FloatingActionButton的時候，FloatingActionButton的變換效果。
app:borderWidth：FloatingActionButton的變寬寬度。
app:elevation：普通狀態FloatingActionButton的陰影深度。
app:pressedTranslationZ：點擊狀態FloatingActionButton的陰影深度。
3.Snackbar
Snackbar是通過在屏幕底部展示的簡潔信息（有些Android手機屏蔽了Toast，可以通過Snackbar來替代Toast的提示）。
Snackbar是的對象是通過兩個靜態方法來生成的：
通過它的生成方法，可以看到Snackbar的生成必須依賴一個View，這個View是該布局內的任何一個View，因為它會通過findSuitableParent(View view)方法來找到該界面的CoordinatorLayout，如果沒有找到CoordinatorLayout，則會找到id為android.R.id.content（這個View也就是頂級DecorView -> LinearLayout -> content）。
Snackbar在界面上只能存在一個，如果出現新的Snackbar，則會將上一個Snackbar頂掉，不會同時存在兩個或兩個以上的Snackbar。
Snackbar有個消失的回調監聽Snackbar.Callback，在該監聽的onDismissed( )方法中有個event參數，它對應Snackbar五種消失狀態：
4.AppbarLayout
AppbarLayout繼承自LinearLayout，使用AppbarLayout可以讓包含在其中的子控制項能夠響應被標記了ScrollingViewBehavior的View的滾動事件（需要配合CoordinatorLayout來實現效果）。
AppbarLayout提供了5種滾動標識給子View使用（子View使用app:layout_scrollFlags對應的屬性參數）。
scroll：將此布局和滾動事件關聯（注意：這個標識要在其他標識之前，沒有這個標識則布局不會滾動，並且其他標識設置無效）；
enterAlways：這個標識通常被稱為"快速返回"模式，其實就是向下滾動時Scrolling View和Child View之間滾動優先順序問題 （對比scroll和scroll|enterAlways設置 - 向下滾動時：前者Scrolling View優先於Child View滾動；後者Child View優先於Scrolling View滾動）；
enterAlwaysCollapsed：enterAlways的附加值。這裡涉及到Child View的高度和最小高度，向下滾動時，Child View先向下滾動最小高度值，然後Scrolling View開始滾動，當Scrolling View滾動到界時，Child View再向下滾動，直至顯示完全。
exitUntilCollapsed：這裡也涉及到最小高度。向上發生滾動事件的時候，Child View向上滾動退出直至最小高度，然後Scrolling View開始滾動。也就是說，Child View不會完全退出屏幕；
snap：簡單理解，就是Child View滾動比例的一個吸附效果。也就是說，Child View不會存在局部顯示的情況，要麼完全顯示，要麼完全隱藏。
參考以下布局結構
來看一下5中模式都有什麼樣的效果
1. scroll
2. enterAlways
3. enterAlwaysCollapsed
4. exitUntilCollapsed
5. snap
通過以上的gif圖可以看出來AppBarLayout的5模式態分別有對應的效果，所以你可以根據具體要實現什麼樣的效果選擇對應的模式。
總結
Material Design是Google為了統一不同設備的交互效果，提高用戶體驗的所推出的一套設計語言，它對於界面的設計有非常嚴格的要求，但是目前國內還沒有多少款App嚴格按照Material Design的設計規範，甚至有很多模仿的不倫不類。所以這篇文章僅僅為大家提供一些參考。當然design庫所提供的控制項在Android工程師的日常工作中使用的概率還是非常大的，以上暫且介紹了design擴展庫的一部分常用控制項以及各種效果，希望能為你提供一些靈感和幫助。
參考資料
Material Design 中文版
iCourt
技術團隊
想要更多了解我們或投稿，聯繫小編 :
TAG:iCourt技術團隊 |