【Android】进入Material Design时代
由于本文引用了大量官方文檔、圖片資源，以及開源社區(qū)的Lib和相關(guān)圖片資源，因此在轉(zhuǎn)載的時候，務(wù)必注明來源，如果使用資源請注明資源的出處，尊重版權(quán)，尊重別人的勞動成果，謝謝！
Material Design
官方Material Design詳細(xì)介紹文檔：http://www.google.com/design/spec/material-design/introduction.html
?
Material Design是Android 5.0系統(tǒng)的重頭戲，并在以后App中將成為一種設(shè)計標(biāo)準(zhǔn)，而且隨著已支持Android 5.0?Lollipop的Nexus 6的開售，Google希望開發(fā)者更快的支持Material Design，連續(xù)發(fā)了3篇文章，來幫助開發(fā)者如何在自己的App 中實現(xiàn)Material?Design。并表示：expect Winter 2014 to be a big quarter for design on Android.
目前使用過的Material Design 的Google App有 Google Play，Inbox（相當(dāng)?shù)目犰?#xff0c;大家可以申請Invite，當(dāng)然也可以通過已經(jīng)拿到Invite的朋友幫忙激活），顯然Material Design是必然的趨勢，Google Play上越來越多的應(yīng)用開始支持Material Design，因此我覺得寫這樣一篇文章也變得迫不及待。
?官方Blog關(guān)于Material Design的專題文章一共有三篇：
AppCompat v21 — Material Design for Pre-Lollipop Devices!
Implementing material design in your Android app
Material Design on Android Checklist
?
因為第一篇已經(jīng)在剛發(fā)出的時候翻譯過了：AppCompat V21：將 Materia Design 兼容到5.0之前的設(shè)備?，現(xiàn)在我們要介紹的是后兩篇文章，后兩篇主要從整體設(shè)計介紹了一個標(biāo)準(zhǔn)的Material Design的App應(yīng)該遵循哪些設(shè)計標(biāo)準(zhǔn)，并告訴你如何在你的代碼中實現(xiàn)，并介紹了如何向前兼容。其實后兩篇在整體結(jié)構(gòu)上是差不多的，只是在Implementing material design in your Android app中，側(cè)重的是Material Design的設(shè)計標(biāo)準(zhǔn)，而Material Design on Android Checklist則側(cè)重的是實現(xiàn)細(xì)節(jié)和注意事項，重點(diǎn)強(qiáng)調(diào)的部分為Signature element，實現(xiàn)部分為InCode。
盡管每一篇文章經(jīng)過了仔細(xì)的斟酌和措辭，但還是覺得有一些設(shè)計方面的專業(yè)詞匯表達(dá)的不是很好。針對文章翻譯，如果有更好的建議，歡迎提出。除了翻譯外，該篇文章還有一部分重要的內(nèi)容，就是收集 了關(guān)于Material Design的資源和GitHub上一些關(guān)于Material Design的開源庫，讓大家更快更好的在自己的App中，應(yīng)用Material Design。廢話不多說，上正文。
?
在你的App中實現(xiàn)Material Design?
Material design 是一種達(dá)到可視化，交互性，動效以及多屏幕適應(yīng)的全面設(shè)計。Android 5.0 Lollipop和已經(jīng)更新的support libraries將會幫助你構(gòu)建Material UI。這里提供了一些API和Widget幫助你實現(xiàn)MaterialDesign設(shè)計。
一、Tangible Surfaces 有型的外觀
UI由數(shù)字化的紙墨構(gòu)成。表層和它帶有的陰影為應(yīng)用提供了可視化的效果。你可以觸摸并觀察他的運(yùn)動，這個數(shù)字化的設(shè)計具有移動，擴(kuò)張，或者轉(zhuǎn)換的能力，幫助你創(chuàng)建靈活的UI。
1.1 Shadows
表面的位置和深度導(dǎo)致了在亮度和陰影方面的微弱變化。新的elevation 屬性允許你在Z軸上指定View的位置，然后框架會為該View底部的items加上實時的動態(tài)陰影。你可以在布局中明確的以dp為單位設(shè)置它的高度。
<ImageView … android:elevation="8dp" />你也可以在代碼中通過getElevation()/setElevation()設(shè)置。陰影是添加到輪廓上的，默認(rèn)來自背景。比如，你可以設(shè)置一個圓形的drawable作為floating action button的?背景。它會自動轉(zhuǎn)化成適當(dāng)?shù)年幱啊Ｈ绻阈枰种溉タ刂埔粋€View的陰影，可以設(shè)置一個ViewOutlineProvider，它允許你在getOutline()中提供一個自定義的Outline.
1.2 Cards
對于創(chuàng)建帶有不同信息內(nèi)容的碎片，Cards是一種常見的模式。supportV7下的CardView可以幫助你方便的實現(xiàn)，并提供了輪廓和陰影。
CardView繼承自FrameLayout并提供了默認(rèn)的elevation 和 圓角，使得cards在不同的平臺間保持一致。你也可以通過cardElevation和cardCornerRadius屬性自定義它們的值。注意，Cards不是唯一實現(xiàn)維度效果的方式，你應(yīng)該警惕過度的使用Cards:http://www.google.com/design/spec/components/cards.html#cards-usage
二、Print-like Design 打印式風(fēng)格
Material利用了經(jīng)典的打印設(shè)計，使內(nèi)容前部和中心的布局變得整潔和簡約。刻意大膽的顏色選擇，刻意的空白，美觀的印刷風(fēng)格和強(qiáng)烈的格子線條為你創(chuàng)建一種有層次有意義有焦點(diǎn)的效果。
2.1 Typography 活字印刷
Android 5.0更新了Roboto樣式，不論多大的text，展示起來都會美觀和簡潔。添加了一種新的中等高度屬性(android:fontFamily=”sans-serif-medium”) 和新的AppAppearance樣式為了平衡內(nèi)容密度和閱讀的舒適感,實現(xiàn)了推薦的打印式縮放的。比如你可以簡單的通過 android:textAppearance=”@android:style/TextAppearance.Material.Title”?設(shè)置 ?“Title"風(fēng)格。在舊的版本中可以使用AppCompat support library的樣式： “@style/TextAppearance.AppCompat.Title”.?
2.2 Color
調(diào)色板為你的應(yīng)用帶來了品牌營銷和個性化，通過以下屬性可以方便的控制UI的著色：
?
?
主調(diào)色彩：主調(diào)色彩是用于應(yīng)用品牌推廣的色彩。作為action bar的背景色最近的任務(wù)title和其它邊緣效果。
強(qiáng)調(diào)色彩：鮮明的擴(kuò)展了主調(diào)色彩。應(yīng)用于框架的控制。比如EditText，Switch
主調(diào)的暗色： Darker作為主調(diào)色彩的加深，應(yīng)用于狀態(tài)欄 status bar.
更多用于控制色彩的屬性，可以參考：colorControlNormal.colorControlActivated.colorControlHighlight, colorButtonNormal, colorSwitchThumbNormal,?colorEdgeEffect, statusBarColor and navigationBarColor.
AppCompat 為以上功能提供了大量的子集，允許你為Lollipop之前的系統(tǒng)控制色彩。
2.3 Dynamic color 動態(tài)的色彩
Material Design 鼓勵動態(tài)色彩的使用，特別是當(dāng)你擁有豐富的iamge的時候。新的Palette的support library 支持從圖片中抽取一小部分的色彩去設(shè)計你的UI。創(chuàng)造出一種更逼真的體驗。你也可以添加動靜的結(jié)合效果，比如前部的text color的變化，如下兩種TextView部分色彩的切換：
?
三、Authentic Motion 真實的動效
有型的表面不應(yīng)該像電影中的跳躍式的切換，它們的移動應(yīng)該幫助引導(dǎo)用戶的焦點(diǎn)，建立控件關(guān)系以及保持連貫性。Meterial 響應(yīng)觸摸事件去確認(rèn)你的交互，所有的變化會從你的Touch點(diǎn)輻射開來。所有的運(yùn)動都是有意義并且友好的，有助于用戶更好的理解。
3.1 Activity + Fragment切換
通過聲明“shared elements" ，在兩種狀態(tài)之間你可以創(chuàng)建一個平滑的切換，
album_grid.xml
album_details.xml
… <ImageView … android:transitionName="@string/transition_album_cover" />AlbumActivity.java
Intent intent = new Intent(); String transitionName = getString(R.string.transition_album_cover); … ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(activity, albumCoverImageView, // The view which starts the transition transitionName // The transitionName of the view we’re transitioning to ); ActivityCompat.startActivity(activity, intent, options.toBundle());?這里我們在兩個不同的屏幕間定義了相同的transitionName 。當(dāng)你啟動一個新的Activity，它的切換將會自動的動畫起來。對于進(jìn)入和退出的元素，你可以自由編排。
3.2 Ripples（漣漪）
?
Materials以一種潑墨的漣漪的方式響應(yīng)用戶的觸摸事件。你可以通過使用或者繼承Theme.Material主題，即可達(dá)到這種默認(rèn)的效果。你可以通過簡單的封裝將這種ripple效果添加到自己的drawables上。自定義View應(yīng)該使用 ?View#drawableHotspotChanged 回調(diào)方法把touch的位置傳播到它們的drawables上，以便ripple可以知道起始點(diǎn)。
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/accent_dark"> <item> <shape android:shape="oval"> <solid android:color="?android:colorAccent" /> </shape> </item> </ripple>3.3 StateListAnimator
Materials 也響應(yīng)了用戶抬起手指的操作。類似磁鐵吸引的效果。你可以通過tranlationZ屬性實現(xiàn)。它類似于elevation屬性，但主要是用于時間較短，轉(zhuǎn)瞬即逝的效果，比如 Z = elevation + translationZ。這個新的stateListAnimator 屬性允許你在用戶touch的時候簡單的在translationZ上動畫。button默認(rèn)會有這種效果。
layout/your_layout.xml
<ImageButton … android:stateListAnimator="@anim/raise" /> anim/raise.xml <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="true" android:state_pressed="true"> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="@dimen/touch_raise" android:valueType="floatType" /> </item> <item> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="0dp" android:valueType="floatType" /> </item> </selector>3.4 Reveal
material 過渡效果中的一個標(biāo)志是通過延伸一個圓形的面板來展示新的內(nèi)容。增強(qiáng)了作為所有轉(zhuǎn)換起點(diǎn)的觸摸點(diǎn), 它是迅速向外擴(kuò)散的.?你可以使用下面的Animator來實現(xiàn)：
3.4 Interpolators 插值器
?
運(yùn)動應(yīng)該是慎重的，平滑且精確的。而不是簡單的漸入漸出。在 Material Design中，對象更傾向于快速的并舒適的啟動。通過下面的示例可以看到，在將要到達(dá)終點(diǎn)前的那段位置花費(fèi)了更少的時間。總的來說，用戶不會等待較長時間，運(yùn)動的負(fù)面效果就變得最小化了。有一種新的插值器，可以達(dá)到這種效果https://developer.android.com/reference/android/R.interpolator.html?utm_campaign=L-Developer-launch#fast_out_slow_in
對于進(jìn)入和退出屏幕效果，請分別參考： ?linear-out-slow-in 和 fast-out-linear-in interpolators respectively.
四、Adaptive Design (and UI Patterns)
?
material 最終的核心概念是創(chuàng)建一種自適應(yīng)于不同大小形狀設(shè)備的設(shè)計，從手表到TV。自適應(yīng)設(shè)計技術(shù)幫助我們實現(xiàn)了不同的設(shè)備但相同的底層系統(tǒng)體現(xiàn)為不同的View。每個View對那個設(shè)備來說，都是量身定做的。色彩，圖片，層次，空間的相對關(guān)系都保持不變。material design 系統(tǒng)提供了便利的組件和模式幫你構(gòu)建一個如此有擴(kuò)展性的設(shè)計
?
Toolbar
?與Actionbar很類似，但是更加方便，不同于標(biāo)準(zhǔn)的Action bar，toolBar就像View層級中的任何一個東西。因此你可以在任何地方進(jìn)行放置，與其它的View交錯，移動，對滑動事件的響應(yīng)等等。你可以通過調(diào)用Activity,setActionBar()方法把ToolBar作為你的Activity的ActionBar.
?
在這個例子中，藍(lán)色的toolbar是一個可擴(kuò)展高度，覆蓋在屏幕內(nèi)容上側(cè)并且提供了導(dǎo)航按鈕。注意：在這個列表和細(xì)節(jié)中，使用的ToolBar超過了2個。
Material Design 讓你的應(yīng)用具有可理解，美觀，逼真的動效及自適應(yīng)的能力。希望你可以遵從這些設(shè)計原則并通過上述提供的new API和一些兼容庫幫助你的App實現(xiàn)Material Design。
----------------------------------------------------------------------------------------------------------------------------------------
?
第二篇：Material Design Check List
主要從細(xì)節(jié)實現(xiàn)方面提醒你應(yīng)該如何更好的實現(xiàn)Material Design，標(biāo)注Signature element為強(qiáng)調(diào)部分，標(biāo)注InCode的為實現(xiàn)方式。
?
因為用戶將很快使用Android5.0系統(tǒng)了，而且也會慢慢習(xí)慣Material Design的app，比如Gmail的未來替代者inbox，Google Play Tumblr等，因此Google為了開發(fā)者能夠更快的支持Material Design的app以及Android 5.0，連續(xù)推出了3篇文章。在下面這篇文章中，Google為我們提供了一個表單，這個表單列出了Material Design應(yīng)該具備的一些風(fēng)格。你在實現(xiàn)Material Design的時候，可以參照下面的表單。整個表單根據(jù)Material Design的4個關(guān)鍵方面分為4個部分。下面我們就介紹一下整個表單內(nèi)容。如果你使用了以下中的幾個模塊，特別是標(biāo)注為signature elements的元素，并遵循傳統(tǒng)的Android設(shè)計最佳實踐，那么你已經(jīng)朝著迷人的Material Design設(shè)計邁進(jìn)了。
Tangible Surfaces 有形的外觀
UI由不同層次的表層組成，每層的下面附有陰影。
Signature element: 陰影
陰影用于和前部的元素交互，幫助聚焦和建立層級效果。
In Code:在5.0系統(tǒng)里，這樣的陰影效果直接由屬性：android:elevation 和 android:translationZ 提供，而在之前的版本，陰影通常由PNG圖片資源來實現(xiàn)。
?
Surfaces and layering.
?
陰影和表層被用于連貫和結(jié)構(gòu)性的情景中。每一個陰影標(biāo)示著一個新的表層，這些表層的構(gòu)建需要細(xì)心和深思熟慮。一個屏幕中通常擁有2到10個表層，避免太多的內(nèi)嵌層。可滑動的內(nèi)容滑動到屏幕的邊界或者另一個表層后面的時候鑄造了一層覆蓋在另一個表層上的陰影。永遠(yuǎn)不要剪裁一個可見邊界的元素這樣會導(dǎo)致一種沒有邊界的感覺。換句話說，你應(yīng)該很少滑動表層上的內(nèi)容，而是滑動整個表層。
?
In Code: 在使用ListView和ScrollView的時候，使用 android:clipToPadding=false 來避免邊界的剪裁。
表層應(yīng)該是簡單，而且是純色的背景。
A Bold、Print-Like Aesthetic 一種加粗，打印風(fēng)格的審美
你所展示的內(nèi)容來自于一種經(jīng)典的打印模式，重點(diǎn)在于色彩的使用，有語境的圖片和結(jié)構(gòu)性的空白區(qū)域。
Primary and accent colors.
?
Signature element: 主調(diào)色彩和強(qiáng)調(diào)色彩
在顏色層面背景和關(guān)鍵的組件上，使用了一種主調(diào)色彩和一種強(qiáng)調(diào)色彩，比如text和checkbox。這種強(qiáng)調(diào)色彩和基調(diào)色彩形成了鮮明的對比，比如一個app可以使用一種深藍(lán)色作為基調(diào)顏色，而把霓虹色作為強(qiáng)調(diào)的顏色。
這種強(qiáng)調(diào)的色彩是極其鮮明的，通常用于關(guān)鍵的組件上，引起用戶的注意，比如一個floating button，selected tab 或表格區(qū)域。
In code:?通過在你的主題中設(shè)置 android:colorPrimary and android:colorAccent屬性（如果使用appCompat，不用再去設(shè)置“android”前綴了），AppCompat將會自動的為那些text，checkbox和一些在L之前的組件著色。
Signature element:透明的狀態(tài)欄
在5.0系統(tǒng)上，status bar會被填充匹配app的基調(diào)，或者當(dāng)前屏幕的內(nèi)容的色彩。對于全屏填充的Image效果，status bar可以是透明的。
可以通過在你的主題中設(shè)置android:colorPrimaryDark 或者 android:statusBarColor或者調(diào)用Window.setStatusBarColor來實現(xiàn)。
icon/photos/images和其它前部元素的表層會被“墨水”著色。它們不需要陰影也不用使用梯度效果。
顏色可以從圖片中抽取用于適配在表層的UI元素。
InCode: 通過Palette support library來實現(xiàn)。
Signature element: 使用material design的icon
icons 的使用請遵從 system icon guidelines，標(biāo)準(zhǔn)的icons請使用material design的icon，（這個已經(jīng)在GitHub中開源）
向?qū)?#xff1a;http://www.google.com/design/spec/style/icons.html#icons-system-icons
資源：http://www.google.com/design/spec/resources/sticker-sheets.html#sticker-sheets-components
照片通常是沉浸并且是全屏的，比如，對于詳情的界面，使用一種邊緣到邊緣的模式，甚至可以出現(xiàn)在app bar或者 status bar的底部。
In code: 新的 Toolbar widget 可以是透明的并且直接放在你的布局中，對于status bar的問題,看以參考在Stack Overflow 上的相關(guān)問題：
http://stackoverflow.com/questions/26440879/how-do-i-use-drawerlayout-to-display-over-the-actionbar-toolbar-and-under-the-st/26440880
?
Signature element: 適當(dāng)?shù)某叽?/strong>
合適的地方，text內(nèi)容，app titles,應(yīng)該對齊3個keylines：
http://www.google.com/design/spec/layout/metrics-and-keylines.html#metrics-and-keylines-keylines-and-spacing
在手機(jī)上，那些 keylines 距離左邊是16dp和72dp，距離屏幕右邊緣是16dp。在平板上是24dp和80dp。
UI元素的對齊方式和大小應(yīng)該根據(jù)一個8dp的網(wǎng)格。比如，app bar在手機(jī)上為56dp，在平板上是64dp。Padding和Margins可以使用像：8dp,16dp,24dp的值等等，更精確的text位置是使用一個4dp的網(wǎng)格
Keylines
Authentic Motion 真實的動效
在不同的app上下文和狀態(tài)下，動效可以提供一種可視化和連貫的體驗。通過小規(guī)模的使用切換動畫可以增加一些情趣。而不是為了動效而動效。總的來說，UI和內(nèi)容元素不會簡單的消失或者出現(xiàn)，它們會以動畫的方式移動入到一個單元或者單獨(dú)的出現(xiàn)。
?
Signature element: "hero"切換動畫
當(dāng)你按下一個條目去看詳情的時候。這里有個叫“hero”的切換動畫，它會移動并且縮放它所在的位置和詳情屏幕之間的條目。
InCode：在SDK中它被叫做 “shared element transitions” ，support版本的FragmentTransaction也支持了shared element support。
"Hero" Transiton
?
?
Signature element: Ripple effects?
Ripple effects 為你按下條目的增加了反饋效果。
InCode：默認(rèn)的 android:selectableItemBackground 和 android:selectableItemBackgroundBorderless 擁有這種效果，或者你可以使用RippleDrawable (<ripple>)?去自定義效果。在5.0之前的設(shè)備上，ripples沒有這種預(yù)期的效果，因此，遵從默認(rèn)的android:selectableItemBackground 行為。
Signature element: ?circular “reveal” animation.
UI元素可以通過一個圓形的”reveal"動畫出現(xiàn)。
InCode：查看文檔或者ViewAnimationUtils類。
Signature element:Vector動畫圖標(biāo)
在更微妙更賞心悅目的情況下使用動畫，比如去轉(zhuǎn)換icon 的狀態(tài)和text的狀態(tài)。比如，一個“+”圖標(biāo)可以變形為一個“x”標(biāo)識，或者一個概述的圖標(biāo)可以變成一個柵欄效果。
InCode：icon的變化可以通過AnimatedStateListDrawable 和相應(yīng)的XML文件來實現(xiàn)，你可以在Google I/O app源碼中找到。它支持了動畫的vector圖標(biāo)。
動畫和切換通常在300ms內(nèi)。
交叉淡入淡出通常被平移和滑動切換代替：豎直的滑動產(chǎn)生的底部導(dǎo)航，水平滑動產(chǎn)生的側(cè)面導(dǎo)航。對于滑動的轉(zhuǎn)換，加速和微小的減速要好于簡單的線性移動。
可以參考：http://www.google.com/design/spec/animation/authentic-motion.html#
Adaptive Design（UI Patterns）
有型的外表，大膽的圖形設(shè)計，加上有意義的動畫效果帶來了一種連貫跨設(shè)備的體驗，無論在手機(jī)，平板，筆記本，TV，可穿戴設(shè)備，汽車上，等都有同樣的體驗效果。另外，下面的關(guān)鍵的UI 設(shè)計模式有助于在不同設(shè)備之間建立一種連貫的體驗。
app使用了響應(yīng)式設(shè)計，確保了在不同尺寸的屏幕和不同的方向上能夠適當(dāng)?shù)牟季帧？梢詤⒖计桨錋pp樣式的清單表去優(yōu)化那些面向平板的App.http://developer.android.com/distribute/essentials/quality/tablets.html
在material design中，詳情界面的切換通常都是“Hero"動畫的。在多面板布局中，app可以使用多個toobar去代替一些下一步的相關(guān)操作。
Signature element: FAB
如果合適的話，App推薦floating action button作為一個屏幕上的關(guān)鍵操作。FAB是一個圓形外表，附帶有陰影，表面色彩采用亮色，強(qiáng)調(diào)色。它可以用于執(zhí)行一些主要的操作，比如，發(fā)送，撰寫，創(chuàng)建，添加，或者搜索，大約8dp的elevation。通常懸浮在屏幕的右下角，或者邊界的中心位置。
The floating action button
?
App Bar
Signature element:
App使用了標(biāo)準(zhǔn)的Android App bar，這個App Bar沒有使用app圖標(biāo)。顏色和印刷效果替代了品牌的推廣。這個App Bar帶有陰影，或者擁有一個帶有陰影的表層。通常App Bar 4dp elevation。
InCode：在5.0中使用新的ToolBar Widget引入到View層級視圖中。AppCompat提供了兼容的android.support.v7.widget.Toolbar來實現(xiàn)它。
app bar可能是標(biāo)準(zhǔn)高度的2到3倍，在滑動的時候，app bar可以恢復(fù)到正常高度。
app bar在有些情況下可以完全透明，可以在一個圖片之上附有text和操作，比如Google Play Newsstand 應(yīng)用。http://www.google.com/design/spec/style/imagery.html#imagery-principles
App bar title 應(yīng)該和第二條keyline對齊。
InCode：在使用Toobar widge的時候，請使用 android:contentInsetStart屬性。
在適當(dāng)?shù)臅r候，往下滑的時候，app bar可以滑出屏幕，為內(nèi)容留下更多垂直方向的空間。往上滑動的時候，app bar可以恢復(fù)顯示。（這個式樣：quickReturn）
?
Tabs
Signature element:Tabs應(yīng)該遵從最新的 material design 設(shè)計風(fēng)格。在垂直方向沒有分割線，如果app使用了top-level的話，tab可以作為app bar的一部分。http://www.google.com/design/spec/components/tabs.html#tabs-usage
InCode: 可以參考在SDK中的示例 SlidingTabsBasic 或者Google I/O app source（My Schedule 部分）另外加上 前兩天分享的 SlidingTabStrip
Tabs應(yīng)該支持手勢滑動
InCode: 所有的Tabs應(yīng)該使用support lib中的ViewPager 控件
在選中Tabs時，應(yīng)該有一個前部顏色的變化或者使用強(qiáng)調(diào)色彩的顏色條。在tabs滑動的時候，這個線條應(yīng)該平滑的響應(yīng)。
?
抽屜導(dǎo)航
Signature element:
如果你的app使用了導(dǎo)航的Drawer，它也應(yīng)該遵從最新的material design風(fēng)格。drawer應(yīng)該出現(xiàn)在app bar上面，也應(yīng)該以半透明的方式出現(xiàn)在status bar后面。
InCode：使用support lib 中的DrawerLayout控件和上述談到的ToolBar 控件實現(xiàn)抽屜效果。在stack over flow中有相關(guān)的問題參考：
http://stackoverflow.com/questions/26440879/how-do-i-use-drawerlayout-to-display-over-the-actionbar-toolbar-and-under-the-st/26440880
Signature element:左上角圖標(biāo)
在app bar最左邊的icon是一個抽屜的指示器。http://www.google.com/design/spec/layout/structure.html#structure-app-bar
app icon 在app bar中是不可見的。可選擇的，在早期版本中，如果app擁有一個抽屜，那么最左邊的app icon會保留并且會變窄，比如在4.0中。
標(biāo)準(zhǔn)的抽屜：在手機(jī)上不要寬于320dp，在平板上不要寬于400dp,但是不要小于屏幕寬度 - 標(biāo)準(zhǔn)的toolbar高度，比如在Nexus5中：360dp - 56dp = 304dp
每一個抽屜條目的應(yīng)該沿著grid網(wǎng)格，所有的行高為 48dp，上下8dp邊距。
Text 和 icon 應(yīng)該沿著主線
?
越來越多的App來自google play生態(tài)系統(tǒng)將會更新到Material Design，預(yù)期2014冬季對于Android的設(shè)計來說是一個大的變更期。更多關(guān)于Material design設(shè)計資源，可以參考YouTube視頻：https://www.youtube.com/playlist?list=PLOU2XLYxmsIJFcNKpAV9B_aQmz2h68fw_?
更多的開發(fā)者資源，可以參考文檔：http://developer.android.com/training/material/index.html
?
以上全是理論知識，一個Material Design的App，應(yīng)該遵循哪些標(biāo)準(zhǔn)，如果你已經(jīng)了解了這些，那么接下來就可以去實現(xiàn)它們了，很多拓荒者為我們提供了很多開源庫，大家可以直接用，但有些是向前兼容的，有的是4.0以上的，大家使用的時候注意下。
?
Material Design開發(fā)資源
?
官方：
Material Design介紹：http://www.google.com/design/spec/material-design/introduction.html
?
設(shè)計資源：https://github.com/google/material-design-icons
App:Google ?2014:?https://github.com/google/iosched?（下載地址：http://vdisk.weibo.com/s/av06eFs1kWSeE?,如果需要梯子去請求數(shù)據(jù)，文件夾下的另一個apk會幫到你）
視頻教程:
https://www.youtube.com/watch?v=97SWYiRtF0Y&feature=youtu.be
https://www.youtube.com/watch?v=S3H7nJ4QaD8
?
示例集合
https://github.com/rahulparsani/google-io-2014-compat
?
?
https://github.com/romainguy/google-io-2014
?
?
?
https://github.com/dexafree/MaterialList
?
https://github.com/gabrielemariotti/cardslib
?
FAB
https://github.com/FaizMalkani/FloatingActionButton（無圖）
https://github.com/futuresimple/android-floating-action-button
?
https://github.com/telly/FloatingAction
?
?
https://github.com/makovkastar/FloatingActionButton
?
?
https://github.com/flavienlaurent/tickplusdrawable?
?
Menu & Drawer
?
https://github.com/markushi/android-ui
?
https://github.com/balysv/material-menu
?
?
https://github.com/saulmm/Android-Material-Example
?
https://github.com/ikimuhendis/LDrawer
Ripple
https://github.com/markushi/android-ui
?
https://github.com/traex/RippleEffect
?
https://github.com/siriscac/RippleView
?
Transition
https://github.com/saulmm/android_L_preview_example(圖太大)
https://github.com/andkulikov/transitions-everywhere
?
Vector
https://github.com/chiuki/animated-vector-drawable
?
Dialog
?
https://github.com/drakeet/MaterialDialog
?
https://github.com/r0adkll/PostOffice
?
https://github.com/lewisjdeane/L-Dialogs
?
?
GitHub：lightSky
微博： ? ?light_sky?, 愛Android，愛開源，愛運(yùn)動，歡迎交流。
為了能夠正常的學(xué)習(xí)，瀏覽官方文檔，接觸最新技術(shù)訊息，你需要一個梯子，這里介紹一個比較好的，本人用的就是這個挺不錯：云梯
?
原文地址
? ??http://blog.csdn.net/xushuaic/article/details/40627389
?
轉(zhuǎn)載于:https://www.cnblogs.com/lcw/p/4074014.html
與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的【Android】进入Material Design时代的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jsp session
- 下一篇： C#深入解析Json格式内容