寫在前面的幾句話
<p>
最近準(zhǔn)備寫?yīng)毩pp的打算，那么思考了下作為一個(gè)獨(dú)立App開發(fā)者角度的選擇問題赠堵，很自然的就把Material Design作為視覺方面的選擇了，那么這篇文章呢谋竖，就對(duì)Support Design包的使用進(jìn)行簡(jiǎn)單的分析笆制，其實(shí)之前也有學(xué)習(xí)過吨岭，但是鑒于之前的項(xiàng)目中沒有選擇Material Design作為設(shè)計(jì)選擇休溶，也忘卻了許多府阀，這次剛好也把學(xué)習(xí)的東西記錄下來
簡(jiǎn)介
<p>
在Material Design推出之初漩仙，想要實(shí)現(xiàn)這種設(shè)計(jì)風(fēng)格搓茬，對(duì)于開發(fā)者來說是一件很困難的事情，只能通過GitHub上開發(fā)者貢獻(xiàn)出來的開源庫(kù)來實(shí)現(xiàn)這一風(fēng)格的Android開發(fā)队他，在Google在2015的IO大會(huì)上卷仑，谷歌給我們帶來了更加詳細(xì)的Material Design設(shè)計(jì)規(guī)范，同時(shí)麸折，也給我們帶來了全新的Android Design Support Library锡凝，在這個(gè)support庫(kù)里面，Google給我們提供了更加規(guī)范的MD設(shè)計(jì)風(fēng)格的控件垢啼。最重要的是窜锯，Android Design Support Library的兼容性更廣张肾，直接可以向下兼容到Android 2.2。
對(duì)于開發(fā)者來說這是一個(gè)福音锚扎，所以這篇文章就對(duì)Android Design Support Library進(jìn)行分析捌浩。
想要使用Android Design Support Library首先得在gradle添加依賴
compile 'com.android.support:design:23.2.0'
一.CoordinatorLayout
<p>
CoordinatorLayout是Support Design中新添加的一個(gè)增強(qiáng)型的FrameLayout。在CoordinatorLayout中工秩，我們可以在FrameLayout的基礎(chǔ)上完成很多新的操作尸饺。
CoordinatorLayout 是一個(gè)讓子 Views 協(xié)調(diào)工作的布局。每個(gè) View 中肯定是設(shè)計(jì)和實(shí)現(xiàn)了和 CoordinatorLayout 協(xié)同工作的助币，很多子View與CoordinatorLayout配合使用會(huì)發(fā)生美妙的化學(xué)反應(yīng)浪听，這就是為什么要把CoordinatorLayout作為第一個(gè)來介紹
CoordinatorLayout使用如下
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
</android.support.design.widget.CoordinatorLayout>
二.Floating Action Button
<p>
FAB(Floating Action Button)其實(shí)在之前有介紹過,是一個(gè)有一些陰影的圓形按鈕,這個(gè)其實(shí)是在Material Design的世界中一個(gè)很重要的組成部分。
FAB使用如下
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email" />
運(yùn)行如下
三.Snackbar
<p>
Snackbar是在屏幕的地步一個(gè)微小的黑色條顯示著一條簡(jiǎn)短的消息眉菱，與Toast 有著相同的概念迹栓，但是不同于 Toast，它的表現(xiàn)是作為 UI 的一部分而不是覆蓋在屏幕上俭缓。
Snackbar使用如下
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
運(yùn)行如下
FAB 與 Snackbar在CoordinatorLayout下產(chǎn)生的化學(xué)反應(yīng)
<p>
當(dāng)我們使用普通的layout包裹FAB克伊，我們會(huì)發(fā)現(xiàn)
但是使用CoordinatorLayout包裹FAB就可以發(fā)現(xiàn)如下的效果
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
四.Toolbar
<p>
Toolbar其實(shí)是用來替代ActionBar的，因?yàn)樵谶@個(gè)Support Design中华坦，很多組件都是設(shè)計(jì)為與Toolbar協(xié)同使用愿吹，從而達(dá)到Material Design設(shè)計(jì)中的一些效果
要使用Toolbar需要如下的工作
1.在AppTheme的style屬性中隱藏Action Bar
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
2.在CoordinatorLayout里面放入AppBarLayout與Toolbar
<android.support.design.widget.CoordinatorLayout
...>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
...>
</android.support.design.widget.FloatingActionButton>
</android.support.design.widget.CoordinatorLayout>
3.代碼設(shè)置將Toolbar作為ActionBar
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
運(yùn)行如下
注意事項(xiàng)
1.內(nèi)容區(qū)域
內(nèi)容區(qū)域放置于AppBarLayout與FloatingActionButton之間
并且一些古老的原因，LinearLayout 沒有被設(shè)計(jì)成與 CoordinatorLayout 協(xié)同工作惜姐。在這樣的情況下犁跪，沒有任何布局用來包裹 LinearLayout，使它像 Toolbar 的做法那樣歹袁。但它是更加容易的坷衍，你只需要在 LinearLayout 添加一個(gè)屬性告訴它的滾動(dòng)行為
如下
<LinearLayout
...
app:layout_behavior="@string/appbar_scrolling_view_behavior"
...>
2.當(dāng)隨著內(nèi)容滾動(dòng)，讓AppBarLayout退出屏幕
怎么讓內(nèi)容滾動(dòng)条舔，有幾種方式枫耳，RecycleView,ListView,ScrollView,但是ListView與ScrollView并沒有設(shè)計(jì)為與CoordinatorLayout協(xié)同工作，所以Support Design提供了一個(gè)新的ScrollView為NestedScrollView孟抗，所以RecycleView與NestedScrollView可以用來隨著內(nèi)容滾動(dòng)迁杨，讓AppBarLayout退出屏幕。
AppBarLayout可以這樣響應(yīng)滾動(dòng)事件：根據(jù)子view的滾動(dòng)標(biāo)志（scroll flag）來控制它們?nèi)绾芜M(jìn)入（滾入屏幕）與退出（滾出屏幕）夸浅。
Flag包括：
scroll: 所有想滾動(dòng)出屏幕的view都需要設(shè)置這個(gè)flag- 沒有設(shè)置這個(gè)flag的view將被固定在屏幕頂部仑最。
enterAlways: 這個(gè)flag讓任意向下的滾動(dòng)都會(huì)導(dǎo)致該view變?yōu)榭梢娙右郏瑔⒂每焖佟胺祷啬Ｊ健薄?/p>
app:layout_scrollFlags="scroll|enterAlways"
- enterAlwaysCollapsed: 顧名思義帆喇，這個(gè)flag定義的是何時(shí)進(jìn)入（已經(jīng)消失之后何時(shí)再次顯示）。假設(shè)你定義了一個(gè)最小高度（minHeight）同時(shí)enterAlways也定義了亿胸，那么view將在到達(dá)這個(gè)最小高度的時(shí)候開始顯示坯钦，并且從這個(gè)時(shí)候開始慢慢展開预皇，當(dāng)滾動(dòng)到頂部的時(shí)候展開完。
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
android:minHeight="?attr/actionBarSize"
- exitUntilCollapsed: 同樣顧名思義婉刀，這個(gè)flag時(shí)定義何時(shí)退出吟温，當(dāng)你定義了一個(gè)minHeight，這個(gè)view將在滾動(dòng)到達(dá)這個(gè)最小高度的時(shí)候消失突颊。
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:minHeight="?attr/actionBarSize"
五.CollapsingToolbarLayout
其實(shí)在Material Design的設(shè)計(jì)中上面這張圖的效果是挺典范的一種設(shè)計(jì)鲁豪，那么這樣的效果怎么實(shí)現(xiàn)的呢？其實(shí)上面的Toolbar也可以展開折疊律秃，但是不夠完美爬橡，這里介紹下CollapsingToolbarLayout
使用步驟如下
1.用 CollapsingToolbarLayout 包裹 Toolbar，但仍然在 AppBarLayout 中
2.從 Toolbar 中刪除 layout_scrollFlags,為 CollapsingToolbarLayout 聲明 layout_scrollFlags棒动，并且將 layout_scrollFlags 設(shè)置成 scroll|exitUntilCollapsed
3.改變 AppBarLayout 擴(kuò)張狀態(tài)時(shí)的布局高度大小
最終代碼如下
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
可以通過一些屬性修改展開狀態(tài)改變標(biāo)題文字的位置糙申，以及文本的顯示
app:expandedTitleMargin 展開狀態(tài)的邊距
app:expandedTitleMarginBottom 展開狀態(tài)距下的邊距
app:expandedTitleMarginEnd 展開狀態(tài)結(jié)束的邊距
app:expandedTitleMarginStart 展開狀態(tài)開始的邊距
app:collapsedTitleTextAppearance 折疊狀態(tài)的文本顯示
app:expandedTitleTextAppearance 展開狀態(tài)的文本顯示
我們可以看到Toolbar icons 仍然滾出了屏幕。我們可以聲明這個(gè)屬性給 Toolbar 來固定住它船惨，讓它總是在屏幕的頂部柜裸。
<android.support.v7.widget.Toolbar
...
app:layout_collapseMode="pin"/>
怎么實(shí)現(xiàn)圖片中的效果呢，步驟如下
1.添加一個(gè)ImageView作為Toolbar的背景圖層
2.添加視差模式與視差系數(shù)來使視覺上看起來效果更好
3.為CollapsingToolbarLayout添加屬性可以讓收縮的時(shí)候自動(dòng)的變化到普通的顏色
最后的代碼如下
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/header"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
最后效果如下
六.TabLayout
<p>
依據(jù)Android 應(yīng)用程序用戶體驗(yàn)指導(dǎo)原則粱锐，Tab 應(yīng)該放在屏幕的頂部而不是在底部疙挺，所以TabLayout放置于AppBarLayout內(nèi)，Toolbar下面
代碼如下
xml中
<android.support.design.widget.AppBarLayout ...>
<android.support.v7.widget.Toolbar ... />
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
java代碼中添加tabs
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
運(yùn)行如下
可以通過設(shè)置屬性來設(shè)置Tab的樣式
- app:tabMode 當(dāng)tabMode設(shè)置為fixed,tabGravity才生效怜浅，設(shè)置為scrollable則是滿足于多個(gè)tab,可以滑動(dòng)
app:tabMode="scrollable"
- app:tabGravity tabGravity設(shè)置fill,表示所有tab都是等分居中衔统，設(shè)置為center,則所有tab都居中顯示
app:tabMode="fixed"
app:tabGravity="center"
app:tabMode="fixed"
app:tabGravity="fill"
七.TetInputLayout
<p>
在material design中，即便是簡(jiǎn)單的 EditText 海雪，也有提升的余地锦爵。通常，單獨(dú)的EditText會(huì)在用戶輸入第一個(gè)字母之后隱藏提示信息奥裸，但是現(xiàn)在你可以使用TextInputLayout 來將EditText封裝起來险掀，提示信息會(huì)變成一個(gè)顯示在EditText之上的floating label，這樣用戶就始終知道他們現(xiàn)在輸入的是什么湾宙。
要做到這一點(diǎn)樟氢，只需要簡(jiǎn)單的用 TextInputLayout 包裹住一個(gè) EditText就可以了
如下
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="input2" />
</android.support.design.widget.TextInputLayout>
運(yùn)行如下
還可以通過調(diào)用setError()在EditText下面顯示一條錯(cuò)誤信息
顯示如下
八.Navigation Drawer
<p>
