Android Material Design支持庫提供了一些新組件，我們在這里簡要的介紹一下這些組件，以及如何使用這些組件。

我是Material Design的粉絲，它使應用程序更具有一致性和整體性,而且看起來更美觀，更容易使用。
Google I / O大會2015年引進一些很棒的新Android特性，包括新的Material Design支持庫。
Material Design的介紹： Material Design Guidelines (譯注：請自備梯子)
讓我們一起來看看這些我們現在能用的新組件。

Snackbar

Snackbar是帶有動畫效果的快速提示條，它只會出現在屏幕底部。
它基本上繼承了Toast的方法和屬性，但與Toast不同的是，Snackbar上可以帶有按鈕，
當Snackbar出現時，用戶可以點擊按鈕做相應的處理；
Snackbar支持滑動消失，類似通知欄的消息；
如果用戶沒做任何操作，Snackbar在到達設定的時間后也會自動消失。

對開發者來說，我們只要簡單的幾行代碼就可以實現Snackbar

Snackbar.make(mDrawerLayout, "Your message", Snackbar.LENGTH_SHORT)
    .setAction(getString(R.string.text_undo), this)
    .show();

注意: 不能同時顯示多個Snackbar

Floating Action Button

Floating Action Button (FAB)是一個懸浮按鈕, 它主要用于一些重要的操作，比如在列表界面上新增按鈕。
現在我們可以在程序里很容易實現Floating Action Button，不再需要其他三方庫的支持。

這個按鈕我們使用時一般用以下2中尺寸:
Normal (56dp)?—?大部分情況下使用
Mini (40dp)?—?只有在與屏幕上其他組件保持一致性的時候使用

Normal (left) 和 Mini (right) FAB 按鈕

FAB按鈕默認會使用主題中定義的背景色，但我們也可以很容易的修改背景色，以下是一些我們一般會修改的屬性：

• fabSize - 設定FAB的大小 (‘normal’ or ‘mini’)
• backgroundTint - 設置邊框大小
• rippleColor - 設定按下時的顏色
• src - 設定在FAB中顯示的圖標
• layout_anchor - 設置顯示坐標的錨點
• layout_anchorGravity - 設置錨點的對齊方式

我們只要簡單加入以下代碼，就可以實現FAB:

<android.support.design.widget.FloatingActionButton
     android:id=”@+id/fab_normal”
     android:layout_width=”wrap_content”
     android:layout_height=”wrap_content”
     android:src=”@drawable/ic_plus”
     app:fabSize=”normal” />

EditText Floating Labels

TextInputLayout主要用于包含EditText，會默認生成一個浮動的Label, 當我們選擇EditText時, EditText中設置的hint會上浮到EditText的左上角.
這對提交用戶數據很有用。

實現很簡單，只要包含EditText就可以了:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/edit_text_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:hint="@string/hint_email" />

</android.support.design.widget.TextInputLayout>

它同時支持顯示錯誤信息, 我們主要加入如下代碼即可:

setErrorEnabled(true);
setError(getString(R.string.text_error_message));

*注意: * 設置錯誤信息需要在setErrorEnabled標志之后，這樣可以保證在錯誤出現時layout大小不發生變化

Navigation View

Navigation Drawer在現在的APP中很常見, 以前實現一直不怎么容易，
現在提供的NavigationView組件可以直接放在DrawerLayout中，
通過設置menu resource就能顯示菜單項了。

<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:fitsSystemWindows="true">

    <FrameLayout
        android:id="@+id/main_content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/drawer" />

</android.support.v4.widget.DrawerLayout>

這個View有兩個主要屬性:

Header Layout

headerLayout是一個可選得屬性，通過設置它我們可以在導航欄上面增加一個Header,通用的做法我們在上面顯示用戶信息。

Menu

menu屬性用來定義需要引用的menu resource。

如下所示, NavigationView menus我們一般有兩張用法，第一種是使用標準的單選模式：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"    
    tools:context=".MainActivity">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navigation_item_1"
            android:checked="true"
            android:icon="@drawable/ic_android"
            android:title="@string/navigation_item_1" />
        <item
            android:id="@+id/navigation_item_2"
            android:icon="@drawable/ic_android"
            android:title="@string/navigation_item_2" />
    </group>
</menu>

這樣菜單項只是簡單的羅列，所有的菜單項都屬于同一個分組。

第二種用法也是相似的，不過我們可以進行分組，給每一個分組定義標題，如下所示：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"                       
    tools:context=".MainActivity">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navigation_subheader"
            android:title="@string/nav_header">
            <menu>
                <!-- Menu items go here -->
            </menu>
         </item>
    </group>
</menu>

這樣我們就可以把我們的菜單項進行分組，這還是很有用得，我們可以按功能把菜單項進行分組。

還有一些重要屬性的屬性我們可以設置，如下:

• itemBackground?—?設置菜單項的背景
• itemIconTint?—?設置菜單項的圖標
• itemTextColor?—?這只菜單項目的文本顏色

我們可以通過實現OnNavigationItemSelectedListener方法，處理菜單項的點擊事件。

注意: For API21+, the NavigationView automatically takes care of scrim protection for the status bar.

TabLayout

TabLayout可以很容易地在APP中添加Tab分組功能

我們有好幾種方式來使用它:

• 固定Tabs，根據View的寬度適配

  
  
  

• 固定Tabs, 在View中居中顯示

  
  
  

• 可滑動的Tabs

要實現上述效果，首先我們需要加入TabLayout:

<android.support.design.widget.TabLayout
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabGravity="fill" />

然后, 我們可以通過以下這些屬性調整TabLayout的外觀:

• tabMode - TabLayoutd模式，可以選擇 fixed 或 scrollable
• tabGravity - Tab的對齊方式, 可以選擇 fill 或 centre
• setText() - 設置Tab上的文字
• setIcon() - 設置Tab上的圖標

我們還可以給TabLayout設置一些Listener:

• OnTabSelectedListener - Tab被選中時，觸發的Listener
• TabLayoutOnPageChangeListener
• ViewPagerOnTabSelectedListener

我們添加好TabLayout后, 我們只需要通過setupWithViewPager方法加入viewpager:

ViewPager pager = (ViewPager)rootView.findViewById(R.id.viewPager);
pager.setAdapter(new MyPagerAdapter(getActivity().getSupportFragmentManager()));

TabLayout tabLayout = (TabLayout) rootView.findViewById(R.id.sliding_tabs);
tabLayout.addTab(tabLayout.newTab().setText("Tab One"));
tabLayout.addTab(tabLayout.newTab().setText("Tab Two"));
tabLayout.addTab(tabLayout.newTab().setText("Tab Three"));
tabLayout.setupWithViewPager(pager);

Coordinator Layout

CoordinatorLayout是組織它的子views之間協作的一個Layout，它可以給子View切換提供動畫效果。
要使用這個組件，請升級其他support library中的組件到最新版本，比如我需要把RecyclerView升級到22.2.0。

• Floating Action Button

我們剛才已經知道Snackbar可以顯示在其他UI組件的上面，不過我們可以讓FloatingActionButton不被Snackbar覆蓋，
當Snackbar出現時，FAB上移，Snackbar消失時，FAB下移。

要實現如上的效果，FloatingActionBar必須包含在CoordinatorLayout中，
接著我們需要設置layout_anchor 和 layout_anchorGravity屬性

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content">
<!-- Your other views -->
    <android.support.design.widget.FloatingActionButton
        android:id=”@+id/fab_normal”
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:src=”@drawable/ic_plus”
        app:layout_anchor="@id/main_content"
        app:layout_anchorGravity="bottom|right"
        app:fabSize=”normal” />
</android.support.design.widget.CoordinatorLayout>

最后, 在我們構造Snackbar時, 我們需要把CoordinatorLayout作為View參數傳遞過去, 如下所示:

Snackbar.make(mCoordinator, "Your message", Snackbar.LENGTH_SHORT).show();

App Bar

CoordinatorLayout我們讓我們根據滾動事件來調整子View的布局，比如在滾動內容時，我們可以隱藏Toolbar。

要實現這個效果，首先我們需要設置layout_scrollFlags屬性，這個屬性用來控制跟隨View滾動還是固定在最上面，
這個屬性可以設置為以下幾種值：

• enterAlways - 實現quick return效果, 當向下移動時，顯示View（比如Toolbar)

• enterAlwaysCollapsed - 當你的View已經設置minHeight屬性又使用此標志時，你的View只能以最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。

• exitUntilCollapsed - 向上滾動時收縮View，但可以固件Toolbar一直在上面

注意: 設置scroll標志的View必須在沒有設置的之前定義，這樣可以確保設置過的View都從上面移出, 只留下那些固定的View在下面。

如下代碼所示, 我們的recycler view設置了layout_behavior屬性，
當我們的recycler view滑動時，就會觸發設置了layout_scrollFlags的控件發生狀態的改變。
不過我們沒有設置TabLayout的layout_scrollFlags屬性, 所以TabLayout會固定在屏幕最上方。

<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.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior=
        "@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
        <android.support.v7.widget.Toolbar
            ...
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            ...
            />
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

ToolBars

現在我們可以使用CollapsingToolbarLayout，它可以實現當屏幕內容滾動時，收縮Toolbar

<android.support.design.widget.AppBarLayout
        android:layout_height="192dp"
        android:layout_width="match_parent">
    <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <android.support.v7.widget.Toolbar
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

當我們使用這個組件時, layout_collapseMode必須設置, 它有兩個選項：

• **Pin - ** 設置為這個模式時，當CollapsingToolbarLayout完全收縮后，Toolbar還可以保留在屏幕上

• Parallax - 設置為這個模式時，在內容滾動時，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現視差滾動效果.
  可以通過layout_collapseParallaxMultiplier*設置視差因子。

通過CollapsingToolbarLayout的setText()方法，我們就可以實現讓文字大小隨著縮放慢慢變小。

Custom Views

我們還可以給自定義View定義Behaviour, 在onDependentViewChanged()方法中做相應的回調處理，這可以更好處理touch事件, 手勢操作和子View之間的依賴關系。

那么你還在等什么呢? 加入這個Material Design支持庫，趕緊試試吧！

compile 'com.android.support:design:22.2.0'

本文譯自：Exploring the new Android Design Support Library

本文作者： 陽春面
原文地址：http://www.aswifter.com/2015/06/21/andorid-material-design-support-library/

歡迎關注我的微信公眾號，分享Android 開發，IOS開發，Swift開發和互聯網內容
微信號：APP開發者