前言:近來學習了Android Material Design 兼容庫,爲了把這個弄懂,纔有了這篇博客,這裏先推薦兩篇博客:1.Android Material Design 兼容庫的使用詳解
2.Android應用Design Support Library徹底使用實例
第一篇博客是這個兼容庫的詳細解析,我參考了裏面的許多內容,第二篇是兼容庫的大體介紹,若是你能把這兩篇所有弄懂,我這篇也沒有必要看了。說了這麼多,開始正文吧,你們有什麼問題或建議,歡迎留言交流。本文同時發佈在簡書:http://www.jianshu.com/p/8ec9cfc7a7b0css
文章所用的示例地址:[mecury/MeterialDesignSupportLibrary]html
1.概述
在2015年,google官方升級了Design Support Library,爲開發者增長了很多可用的開發控件。java
2綜述
支持Android 2.1以上設備。
Gradle build script dependency:android
compile 'com.android.support:design:22.2.0' //可修改版本號爲本身匹配git
Design Support Library包含8個控件,具體以下:github
- android.support.design.widget.TextInputLayout
強大帶提示的MD風格的EditText - android.support.design.widget.FloatingActionButton
MD風格的圓形按鈕,來自於ImageView
+android.support.design.widget.Snackbar
相似Toast,添加了簡單的單個Action - android.support.design.widget.TabLayout
選項卡 - android.support.design.widget.NavigationView
DrawerLayout的SlideMenu - android.support.design.widget.CoordinatorLayout
超級FrameLayout - android.support.design.widget.AppBarLayout
MD風格的滑動Layout - android.support.design.widget.CollapsingToolbarLayout
可摺疊MD風格ToolbarLayout
注意事項:
這裏須要添加額外的命名空間appNs(xmlns:app="http://schemas.android.com/apk/res-auto" )chrome
在介紹各個控件以前,你們先看一下預覽圖,這裏我本身寫了一個示例,看起來不太好,可是用來介紹是夠了,下面看圖。app

演示動畫.gifdom
2.1 FLoatingActionButton
演示gifide

FloatingActionButton]NU.png
一 個負責顯示界面基本操做的圓形按鈕。Design library中的FloatingActionButton 實現了一個默認顏色爲主題中colorAccent的懸浮操做按鈕。FloatingActionButton繼承自ImageView,你能夠經過 android:src或者 ImageView的任意方法,好比setImageDrawable()來設置FloatingActionButton裏面的圖標。下面介紹幾種經常使用 的設置屬性:
- app:fabSize 設置按鈕的大小,有mini和normal可選,默認爲normal
- app:elevation 設置按鈕的高度,影響陰影範圍的顯示
- app:rippleColor 設置漣漪效果的顏色(當點擊按鈕時的水波紋)
code:<android.support.design.widget.FloatingActionButton android:id="@+id/floatingButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher" app:elevation="5dp" app:fabSize="normal" />
無特別注意項,和普通控件相似。
2.2 TextInputLayout
演示gif:

TextInputLayout.gif
在MD中,使用TextInputLayout將EditText進行了封裝。其最大的改變就是爲EditText添加了兩個提示效果。一個顯示在上面,提示用戶輸入的是什麼,另外一個能夠設爲Error提示,當輸入錯誤的時候顯示出來。
code:
<android.support.design.widget.TextInputLayout android:id="@+id/textInput" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.TextInputLayout>
在代碼中使用的是時候,須要監聽EditText的變化。
editText.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void onTextChanged(CharSequence s, int start, int before, int count) { Log.e("TAG",s.length()+""); if (s.length() > 4){ inputLayout.setError("字符不能超過5個"); inputLayout.setErrorEnabled(true); }else{ inputLayout.setErrorEnabled(false); } } @Override public void afterTextChanged(Editable s) { } });
注意項
TextInputLayout中至少嵌套一個EditText。
2.3 SnackBar
演示gif:

SnackBar.gif
SnackBar 提供一個輕量級的、快速的反饋。它能夠說是一個加強功能的Toast,不一樣的是SnackBar被固定在底部(Snackbar試圖找到一個合適的父親以 確保本身是被放置於底部),包含一段文本信息與一個可選的操做按鈕。它會在時間到達時刪除,或者被用戶點擊按鈕提早刪除。
code
SnackBar的使用十分簡單,和Toast十分相似,使用下面代碼就能夠建立一個SnackBar:
final Snackbar snackbar = Snackbar.make(view,"你點擊按鈕",Snackbar.LENGTH_SHORT); snackbar.show();
此時若是,你想添加在SnackBar上添加一個按鈕,你能夠這樣:
snackbar.setAction("知道了", new View.OnClickListener() { @Override public void onClick(View v) { snackbar.dismiss(); }});
上面代碼放在一塊兒,就是動態圖的效果。
無特別注意項,和普通控件相似。
CoordinatorLayout

CoordinatorLayout.gif
咱們來看看官方對他的描述:
- CoordinatorLayout is a super-poweredFrameLayout.
- CoordinatorLayout is intended for two primary use cases:1.As a top-level application decor or chrome layout2.As a container for a specific interaction with one or more child views
從這裏咱們能夠知道它是一個加強版的 FrameLayout,他能夠協調其子View的交互,控制手勢機滾動技巧。這個控件十分的強大,用處也十分的普遍。就好比剛纔說的 FloatingActionButton若是用CoordinatorLayout 做爲FloatingActionButton的父佈局,它將很好的協調Snackbar的顯示與FloatingActionButton(見上圖,可 以見到FloatingActionButton隨着SnackBar的出現而移動),在Snackbar以動畫效果進入的時候自動向上移動讓出位置,並 且在Snackbar動畫地消失的時候回到原來的位置,不須要額外的代碼。
CoordinatorLayout的另外一個用例是ActionBar與滾動技巧。你可能已經在本身的佈局中使用了Toolbar ,它容許你更加自由的自定義其外觀與佈局的其他部分融爲一體。Design library把這種設計帶到了更高的水平,使用AppBarLayout可讓你的Toolbar與其餘View(好比TabLayout的選項卡)能 響應被標記了ScrollingViewBehavior的View的滾動事件。
code
<?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:orientation="vertical"> <TextView android:id="@+id/tv" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="CoordinatorLayout展現界面,當點擊右下角的FloatingActionButton時,能夠看到明顯的移動。另外:點擊下面的按鈕跳轉到CoordinatorLayout,AppbarLayout,toolbar等演示界面:" /> <android.support.v7.widget.AppCompatButton android:id="@+id/act_btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="100dp" android:text="跳轉" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_margin="10dp" android:src="@mipmap/ic_launcher" app:fabSize="normal" /> </android.support.design.widget.CoordinatorLayout>
無特別注意項,和普通控件相似。
NavigationView
演示gif
這個在上面的錄製過程當中忘了錄了,這裏也錄的有點小瑕疵,你們見諒啊。

Navigation.gif
NavgationView是一個抽屜式的導航控件,它可讓咱們很方便的創建一個滑動菜單。
關於用法,以上圖爲例,見下面代碼:
code
navigationview_layout.xml:
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include layout="@layout/activity_main" /> <android.support.design.widget.NavigationView android:id="@+id/navigationView" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:headerLayout="@layout/head" app:menu="@menu/navigationview_item" /> </android.support.v4.widget.DrawerLayout>
裏面內容區的佈局,就是側滑不滑動時顯示的佈局。裏面headerLayout和menu分別爲側滑導航中的頭部和item。這裏我頭部用了一張圖片:
head.xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:adjustViewBounds="true" android:src="@drawable/header" /> </LinearLayout>
對於menu,就是菜單項的配置:
navigationview_item.xml:
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <group android:checkableBehavior="single"> <item android:id="@+id/menu_main" android:icon="@mipmap/ic_home_white" android:title="首頁" app:showAsAction="always" /> <item android:id="@+id/menu_about" android:icon="@mipmap/ic_about" android:title="關於" app:showAsAction="always" /> </group> </menu>
上面的佈局已經完成了,若是咱們添加抽屜導航的Item的點擊事件,那又該怎麼作呢?下面簡單介紹一下:
private void navigationViewListener(){ NavigationView mNavigationView = (NavigationView) findViewById(R.id.navigationView); mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem item) { switch(item.getItemId()){ case R.id.menu_main: Toast.makeText(MainActivity.this, "點擊了首頁", Toast.LENGTH_SHORT).show(); break; case R.id.menu_about: Toast.makeText(MainActivity.this, "點擊了關於", Toast.LENGTH_SHORT).show(); break; } item.setChecked(true); mDrawerLayout.closeDrawer(Gravity.LEFT); return false; } }); } 看了上面的代碼,你們應該很明白應該怎麼作了。
TabLayout

TabLayout.png
通 過選項卡的方式切換View並非MD中才有的新概念,它們和頂層導航模式或者組織app中不一樣分組內容(好比,不一樣風格的音樂)是同一個概念。 Design library的TabLayout 既實現了固定的選項卡(View的寬度平均分配),也實現了可滾動的選項卡(View寬度不固定同時能夠橫向滾動)。若是你使用ViewPager在 tab之間橫向切換,你能夠直接從PagerAdapter的getPageTitle() 中建立選項卡,而後使用setupWithViewPager()將二者聯繫在一塊兒。它可使tab的選中事件能更新ViewPager,同時 ViewPager的頁面改變能更新tab的選中狀態。
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager); FragmentAdapter mAdapter = new FragmentAdapter(getSupportFragmentManager(), titles, fragments); viewPager.setAdapter(mAdapter); tabLayout.setupWithViewPager(viewPager); tabLayout.setTabsFromPagerAdapter(mAdapter);
注意事項
若是你使用ViewPager在tab之間橫向切換,切記能夠直接從PagerAdapter的getPageTitle() 中建立選項卡,而後使用setupWithViewPager()將二者聯繫在一塊兒。
AppBarLayout、CollapsingToolbarLayout
這介紹這兩個以前,你們要明白什麼是ToolBar。
ToolBar:這表明一個標題欄,圖中的綠色區域就是ToolBar。
AppBarLayout: 其繼承於LinearLayout,使用AppBarLayout可讓包含在其中的子控件能響應被標記了ScrollingViewBehavior的 的滾動事件(要與CoordinatorLayout 一塊兒使用),利用它咱們能夠很容易的去實現視差滾動效果,見下圖(藍色區域就是AppBarLayout)。

AppBarLayout.gif
CollapsingToolbarLayout: 可伸縮摺疊的Toolbar (Collapsing Toolbar),直接添加Toolbar到AppBarLayout可讓你使用enterAlwaysCollapsed和 exitUntilCollapsedscroll標誌,可是沒法控制不一樣元素如何響應collapsing的細節。當你讓 CollapsingToolbarLayout和Toolbar在一塊兒使用的時候,title 會在展開的時候自動變得大些,而在摺疊的時候讓字體過渡到默認值。
這裏面有一些屬性十分重要:這裏先介紹一下:
1.app:layout_collapseMode
pin:來確保Toolbar在view摺疊的時候仍然被固定在屏幕的頂部
parallax:見3
2. app:layout_scrollFlags
scroll: 全部想滾動出屏幕的view都須要設置這個flag,沒有設置這個flag的view將被固定在屏幕頂部。
enterAlways: 這個flag讓任意向下的滾動都會致使該view變爲可見,當向上滑的時候Toolbar就隱藏,下滑的時候顯示。
enterAlwaysCollapsed: 顧名思義,這個flag定義的是什麼時候進入(已經消失以後什麼時候再次顯示)。假設你定義了一個最小高度(minHeight)同時enterAlways也定義了,那麼view將在到達這個最小高度的時候開始顯示,而且從這個時候開始慢慢展開,當滾動到頂部的時候展開完。
exitUntilCollapsed: 一樣顧名思義,這個flag時定義什麼時候退出,當你定義了一個minHeight,這個view將在滾動到達這個最小高度的時候消失。
3.定位到ImageView,有這兩個屬性是咱們日常用沒看到的,說明我寫在註釋上了
app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7"
code
xml文件:
<?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:id="@+id/root" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="300dp"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsingtoolbarlayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="#77db93" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher" /> </LinearLayout> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>
activity:
public class CoordinationActivity extends AppCompatActivity { private Toolbar toolbar; private CollapsingToolbarLayout collapsingToolbarLayout; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_coordinator); toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingtoolbarlayout); collapsingToolbarLayout.setTitle("極客學院"); getSupportActionBar().setHomeButtonEnabled(true); getSupportActionBar().setDisplayHomeAsUpEnabled(true); toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { onBackPressed(); } }); } }
附(一些控件使用使用應注意的地方):
1.在使用CardView的時候,必定要注意,當CardView的寬和高填充父容器的時候,CardView的margin最好要比cardElevation大,否則就看不到立體的效果。
2. 咱們知道ListView有一個onItemClick的事件,可是RecyclerView卻沒有,那麼咱們應該怎樣去設置呢?其實很簡單,關於 RecyclerView設置item的點擊事件,只需在建立ViewHolder的時候,給填充的View設置單擊事件便可。
3.在使用 android.support.design.widget.AppBarLayout的時候內容區最好使用 android.support.v4.widget.NestedScrollView,以前個人內容區用的是ScrollView,在往上拉的時候 AppBarLayout一直沒有動畫效果,折騰了幾個小時都沒找到緣由。最後逼不得用Android Studio建立了一個他自帶的關於AppBarLayout的模板項目,看到他用的是NestedScrollView做爲內容區,我果斷就把個人內容 區換成了這個,立馬就有動畫效果了。
NestedScrollView官方的描述:
NestedScrollView is just likeScrollView, but it supports acting as both a nested scrolling parent and child on both new and old versions of Android. Nested scrolling is enabled by default.
若是感受還不錯的就給個喜歡支持一下吧,有問題請留言,謝謝
最後附一張MD的主題色解析圖:

主題色.jpg
參考
1.Android Material Design 兼容庫的使用詳解
2.Android應用Design Support Library徹底使用實例