吐槽

作為一個 Android developer澈魄，沒有什么比拿著 UI 設(shè)計的一堆 iOS 風(fēng)格的設(shè)計 來做需求更惡心的了痪署，基本所有空間都要照著 iOS 來畫一遍典奉，Material Design 辣么酷炫 為什么 UI在設(shè)計的階段不設(shè)計成 Material Design風(fēng)格呢问潭？

今天試了幾個比較Support包中比較典型的Material Design控件情组，后期會在學(xué)習(xí)下Material Design的設(shè)計思想和理念，希望能拉著 UI 做一次Material Design 分享益涧，改變我們 APP 的 iOS 風(fēng)格啊。

最終效果如下

Android Design Support 庫依賴

在build.gradle中加入support 包

1?compile'com.android.support:appcompat-v7:23.1.1'

Design Support Library 中包含了 Support v4 和 AppCompat v7

Floating Action Button

我們希望FloatingActionButton懸浮在頁面的右下方驯鳖，所以我們父節(jié)點(diǎn)應(yīng)使用Flowlayout

和普通 button 一樣可以設(shè)置其點(diǎn)擊事件

Android:elevation屬性為 view 在空閑狀態(tài)下的陰影深度闲询， 需要在 api 21以上才能使用，使用 support 包可以使用app:elevation來表示空閑狀態(tài)高度浅辙，app:pressedTanslationZ為按下狀態(tài)的高度

按鈕的顏色一般為主題的強(qiáng)調(diào)色扭弧，也可以使用 ”app:backgroundTint“修改

Snackbar

和 Toast 很像，snackbar 可以展示一段簡單的信息记舆，不同點(diǎn)是它的展示更像是整體 UI 的一部分鸽捻，不是想 toast 一樣是浮在 UI 上的，并且可以有簡單的交互

在點(diǎn)擊 floatingActionButton時顯示Snackbar

但是可以看到泽腮，Snackbar 遮擋住了我們的 view御蒲，這時候需要一個CoordinatorLayout來協(xié)調(diào) view 布局

CoordinatorLayout

將父布局中的framelaout換成CoordinatorLayout，其他不變诊赊，再來看看效果

Toolbar

Toolbar 比傳統(tǒng)的 ActionBar 更靈活厚满，功能也更多，我們可以看到現(xiàn)在市面上很多的 APP 已經(jīng)用 Toolbar 替代了 actionbar碧磅，在 Desgin Support 的組件中碘箍，很多設(shè)計都可以和 Toolbar 協(xié)同工作，而不是和 actionbar鲸郊，所以還是建議使用新的 toolbar 替換以前的 actionbar

CoordinatorLayout中的 view 必須是能一同協(xié)作的 view丰榴，就像 Snackbar 一樣，但是 toolbar 并不是這樣能協(xié)同作戰(zhàn)的 view秆撮，所以我們需要用一個可以協(xié)同作戰(zhàn)的 view 來包裹上Toolbar四濒，這就是AppBarLayout

現(xiàn)在我們的布局文件結(jié)構(gòu)是這樣的

注意

根據(jù)官方的谷歌文檔，AppBarLayout目前必須是第一個嵌套在CoordinatorLayout里面的子view

在 toolbar 中加入屬性，app:layout_collapseMode=”pin”峻黍，使得 Toolbar 中的按鈕能固定在頂部

在布局中加入內(nèi)容

在布局中嘗試加入一些按鈕

我們定義三個按鍵复隆，卻被 toolbar 遮住了一個，原因是LinearLayout并沒有被設(shè)計成在CoordinatorLayout協(xié)同工作的模式姆涩，為了使他們能在CoordinatorLayout協(xié)同工作挽拂，我們需要在LinearLayout加上一條屬性，來告訴它的滾動屬性（）

TabLayout

根據(jù)官網(wǎng)的知道骨饿，TabLayout通常應(yīng)該是放在頂部亏栈，（iOS 的 tab 好像基本在底部），

他應(yīng)該在陰影部分上面宏赘，所以應(yīng)該放在AppBarlayout中

java 中設(shè)置這些 tab 屬性

背景會設(shè)置為主題色绒北，導(dǎo)航線是強(qiáng)調(diào)色。但是字還是黑色的察署，因?yàn)槲覀儧]有為 tablayout 定義主題闷游，

通常 tablayout 會和ViewPager一起使用 ，這時候使用

public void setupWithViewPager (ViewPager viewPager)

一張圖看的比較清晰

內(nèi)容滾動時贴汪，AppBarLayout隱藏

當(dāng)滑檔內(nèi)容時脐往，為了騰出跟多的空間展示內(nèi)容可以將AppBarLayout隱藏

1.用 scrollView 包裹 LinearLayout,記得加上app:layout_behavior屬性

scrollView 也不能喝 CoordinatorLayout 協(xié)同工作，同上面一樣扳埂，要用別的 view 包裹或者直接使用 NestedSrollView替換scrollView

如果希望 tablayout 也消失业簿，只需要和 tablayout 加上相同的屬性就行了

滑動內(nèi)容 和 AppBarLayout是如何進(jìn)行聯(lián)系的？

我們需要定義AppBarLayout與滾動視圖之間的聯(lián)系阳懂。在RecyclerView或者任意支持嵌套滾動的view比如NestedScrollView上添加app:layout_behavior梅尤。support library包含了一個特殊的字符串資源@string/appbar_scrolling_view_behavior，它和AppBarLayout.ScrollingViewBehavior相匹配岩调，用來通知AppBarLayout 這個特殊的view何時發(fā)生了滾動事件巷燥，這個behavior需要設(shè)置在觸發(fā)事件（滾動）的view之上

當(dāng)CoordinatorLayout發(fā)現(xiàn)scrollView中定義了這個屬性，它會搜索自己所包含的其他view号枕，看看是否有view與這個behavior相關(guān)聯(lián)矾湃。AppBarLayout.ScrollingViewBehavior描述了RecyclerView與AppBarLayout之間的依賴關(guān)系。RecyclerView的任意滾動事件都將觸發(fā)AppBarLayout或者AppBarLayout里面view的改變堕澄。

AppBarLayout里面定義的view只要設(shè)置了app:layout_scrollFlags屬性邀跃，就可以在RecyclerView滾動事件發(fā)生的時候被觸發(fā)：

app:layout_scrollFlags屬性里面必須至少啟用scroll這個flag，這樣這個view才會滾動出屏幕蛙紫，否則它將一直固定在頂部拍屑。可以使用的其他flag有：

enterAlways: 一旦向上滾動這個view就可見坑傅。

enterAlwaysCollapsed: 顧名思義僵驰，這個flag定義的是何時進(jìn)入（已經(jīng)消失之后何時再次顯示）。假設(shè)你定義了一個最小高度（minHeight）同時enterAlways也定義了，那么view將在到達(dá)這個最小高度的時候開始顯示蒜茴，并且從這個時候開始慢慢展開星爪，當(dāng)滾動到頂部的時候展開完。

exitUntilCollapsed: 同樣顧名思義粉私，這個flag時定義何時退出顽腾，當(dāng)你定義了一個minHeight，這個view將在滾動到達(dá)這個最小高度的時候消失诺核。

記住抄肖，要把帶有scroll flag的view放在前面，這樣收回的view才能讓正常退出窖杀，而固定的view繼續(xù)留在頂部漓摩。

可折疊的 Toolbar

用 CollapsingToolbarLayout 包裹 Toolbar，但仍然在 AppBarLayout 中

刪除 Toolbar 中的 layout_scrollFlags

為 CollapsingToolbarLayout 聲明 layout_scrollFlags入客，并且將 layout_scrollFlags 設(shè)置成 scroll|exitUntilCollapsed

注意 CollapsingToolbarLayout 的高度是android:layout_height="match_parent"

CollapsingToolbarLayout在展開和收縮時管毙，標(biāo)題的文字會自動過度的，可以通過 app:expandedTitleMargin 等來改變文字位置

為 appBar 添加背景圖片

由于 CollapsingToolbarLayout 是繼承 Framelayout 的桌硫，所以我們可以直接添加一個 ImageView 作為背景圖片

此時雖然背景已經(jīng)出來了夭咬，但是藍(lán)色的導(dǎo)航條依舊存在，需要在 toolbar 去掉這條屬性

android:background="?attr/colorPrimary"

給 Imageview 加上視差模式會更帥

app:layout_collapseMode="parallax"

app:layout_collapseParallaxMultiplier="0.5"

也可以在最后恢復(fù)成主題色

Navigation Drawer

在AppBarLayout布局下鞍泉，增DrawerLayout

DrawerLayout中分兩部分組成，一部分是content 就是我們需要的主布局內(nèi)容肮帐，另一部分是我們的抽屜的布局咖驮，NavigationView中有頂部頭，和標(biāo)簽

創(chuàng)建菜單训枢。

菜單元素是放在group標(biāo)簽之下托修，同時聲明每次只能有一個item被選中

為了防止頁面被遮蓋，同樣要使得DrawerLayout協(xié)調(diào)恒界。加入app:layout_behavior="@string/appbar_scrolling_view_behavior"屬性

java初始化

SwipeRefreshLayout

在NestedScrollView外在包裹一層SwipeRefreshLayout睦刃，

初始化監(jiān)聽器

失敗是什么？沒有什么十酣，只是更走近成功一步涩拙；成功是什么？就是走過了所有通向失敗的路耸采，只剩下一條路兴泥，那就是成功的路。