Android Design Support Library使用詳解

Android Design Support Library使用詳解

---

Google在2015的IO大會上，給咱們帶來了更加詳細的Material Design設計規範，同時，也給咱們帶來了全新的Android Design Support Library，在這個support庫裏面，Google給咱們提供了更加規範的MD設計風格的控件。最重要的是，Android Design Support Library的兼容性更廣，直接能夠向下兼容到Android 2.2。這不得不說是一個良心之做。

使用Support Library很是簡單：
添加引用便可：

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

下面咱們來看看這些新控件的基本使用方法，咱們從最簡單的控件開始提及。

Snackbar

Snackbar提供了一個介於Toast和AlertDialog之間輕量級控件，它能夠很方便的提供消息的提示和動做反饋。
Snackbar的使用與Toast的使用基本相同：

Snackbar.make(view, Snackbar comes out, Snackbar.LENGTH_LONG)
                        .setAction(Action, new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(
                                        MainActivity.this,
                                        Toast comes out,
                                        Toast.LENGTH_SHORT).show();
                            }
                        }).show();

須要注意的是，這裏咱們把第一個參數做爲Snackbar顯示的基準元素，而設置的Action也能夠設置多個。

顯示的效果就相似以下：

vcu1w/ejujwvcD4NCjxwPmh0dHA6Ly9kZXZlbG9wZXIuYW5kcm9pZC5jb20vcmVmZXJlbmNlL2FuZHJvaWQvc3VwcG9ydC9kZXNpZ24vd2lkZ2V0L1NuYWNrYmFyLmh0bWw8L3A+DQo8cD48aW1nIGFsdD0=" 這裏寫圖片描述" src="/uploadfile/Collfiles/20150605/20150605084858146.png" title="\" />

TextInputLayout

TextInputLayout做爲一個父容器控件，包裝了新的EditText。一般，單獨的EditText會在用戶輸入第一個字母以後隱藏 hint提示信息，可是如今你可使用TextInputLayout 來將EditText封裝起來，提示信息會變成一個顯示在EditText之上的floating label，這樣用戶就始終知道他們如今輸入的是什麼。同時，若是給EditText增長監聽，還能夠給它增長更多的floating label。

下面咱們來看這與一個TextInputLayout：

必定要注意，他是把EditText包含起來的，不能單獨使用。

在代碼中，咱們給它設置監聽：

final TextInputLayout textInputLayout = (TextInputLayout) findViewById(R.id.til_pwd);

        EditText editText = textInputLayout.getEditText();
        textInputLayout.setHint(Password);

        editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
                if (s.length() > 4) {
                    textInputLayout.setError(Password error);
                    textInputLayout.setErrorEnabled(true);
                } else {
                    textInputLayout.setErrorEnabled(false);
                }
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }

            @Override
            public void afterTextChanged(Editable s) {
            }
        });
    }

這樣：顯示效果以下：

當輸入時：

這裏須要注意的是，TextInputLayout的顏色來自style中的colorAccent的顏色：

#1743b7

下面咱們給出Google API Doc上的說明，瞭解TextInputLayout的詳細使用方法：

http://developer.android.com/reference/android/support/design/widget/TextInputLayout.html

Floating Action Button

floating action button 是一個負責顯示界面基本操做的圓形按鈕。Design library中的FloatingActionButton 實現了一個默認顏色爲主題中colorAccent的懸浮操做按鈕，like this：

FloatingActionButton——FAB使用很是簡單，你能夠指定在增強型FrameLayout裏面——CoordinatorLayout，這個咱們後面再將。
關於FAB的使用，你能夠把它當作一個button便可。

經過指定layout_gravity就能夠指定它的位置。
一樣，你能夠經過指定anchor，即顯示位置的錨點：

除了通常大小的懸浮操做按鈕，它還支持mini size（fabSize=」mini」）。FloatingActionButton繼承自ImageView，你可使用android:src或者 ImageView的任意方法，好比setImageDrawable()來設置FloatingActionButton裏面的圖標。

http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

TabLayout

Tab滑動切換View並非一個新的概念，可是Google倒是第一次在support庫中提供了完整的支持，並且，Design library的TabLayout 既實現了固定的選項卡 - view的寬度平均分配，也實現了可滾動的選項卡 - view寬度不固定同時能夠橫向滾動。選項卡能夠在程序中動態添加：

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.addTab(tabLayout.newTab().setText(tab1));
        tabLayout.addTab(tabLayout.newTab().setText(tab2));
        tabLayout.addTab(tabLayout.newTab().setText(tab3));

但大部分時間咱們都不會這樣用，一般滑動佈局都會和ViewPager配合起來使用，因此，咱們須要ViewPager來幫忙：

mViewPager = (ViewPager) findViewById(R.id.viewpager);
        // 設置ViewPager的數據等
        setupViewPager();
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(mViewPager);

經過一句話setupWithViewPager，咱們就把ViewPager和TabLayout結合了起來。

http://developer.android.com/reference/android/support/design/widget/TabLayout.html

NavigationView

NavigationView在MD設計中很是重要，以前Google也提出了使用DrawerLayout來實現導航抽屜。此次，在 support library中，Google提供了NavigationView來實現導航菜單界面，因此，新的導航界面能夠這樣寫了：

其中最重要的就是這兩個屬性：

app:headerLayout
app:menu

經過這兩個屬性，咱們能夠很是方便的指定導航界面的頭佈局和菜單佈局：

其中最上面的佈局就是app:headerLayout所指定的頭佈局：

而下面的菜單佈局，咱們能夠直接經過menu內容自動生成，而不須要咱們來指定佈局：

你能夠經過設置一個OnNavigationItemSelectedListener，使用其 setNavigationItemSelectedListener()來得到元素被選中的回調事件。它爲你提供被點擊的 菜單元素 ，讓你能夠處理選擇事件，改變複選框狀態，加載新內容，關閉導航菜單，以及其餘任何你想作的操做。例如這樣：

private void setupDrawerContent(NavigationView navigationView) {
        navigationView.setNavigationItemSelectedListener(
                new NavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(MenuItem menuItem) {
                        menuItem.setChecked(true);
                        mDrawerLayout.closeDrawers();
                        return true;
                    }
                });
    }

可見，Google將這些東西封裝的很是易於使用了。

AppBarLayout

AppBarLayout跟它的名字同樣，把容器類的組件所有做爲AppBar。like this：

這裏就是把Toolbar和TabLayout放到了AppBarLayout中，讓他們當作一個總體做爲AppBar。

http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html

CoordinatorLayout

CoordinatorLayout是此次新添加的一個加強型的FrameLayout。在CoordinatorLayout中，咱們能夠在FrameLayout的基礎上完成不少新的操做。

Floating View

MD的一個新的特性就是增長了不少可懸浮的View，像咱們前面說的Floating Action Button。咱們能夠把FAB放在任何地方，只須要經過：

android:layout_gravity=end|bottom

來指定顯示的位置。同時，它還提供了layout_anchor來供你設置顯示座標的錨點：

app:layout_anchor=@id/appbar

建立滾動

CoordinatorLayout能夠說是此次support library更新的重中之重。它從另外一層面去控制子view之間觸摸事件的佈局，Design library中的不少控件都利用了它。

一個很好的例子就是當你將FloatingActionButton做爲一個子View添加進CoordinatorLayout而且將 CoordinatorLayout傳遞給 Snackbar.make()，在3.0及其以上的設備上，Snackbar不會顯示在懸浮按鈕的上面，而是FloatingActionButton 利用CoordinatorLayout提供的回調方法，在Snackbar以動畫效果進入的時候自動向上移動讓出位置，而且在Snackbar動畫地消 失的時候回到原來的位置，不須要額外的代碼。

官方的例子很好的說明了這一點：

其中，一個能夠滾動的組件，例如RecyclerView、ListView（這裏須要注意的是，貌似只支持RecyclerView、ListView，若是你用一個ScrollView，是沒有效果的）。若是：
一、給這個可滾動組件設置了layout_behavior
二、給另外一個控件設置了layout_scrollFlags
那麼，當設置了layout_behavior的控件滑動時，就會觸發設置了layout_scrollFlags的控件發生狀態的改變。

設置的layout_scrollFlags有以下幾種選項：

scroll: 全部想滾動出屏幕的view都須要設置這個flag- 沒有設置這個flag的view將被固定在屏幕頂部。 enterAlways: 這個flag讓任意向下的滾動都會致使該view變爲可見，啓用快速「返回模式」。 enterAlwaysCollapsed: 當你的視圖已經設置minHeight屬性又使用此標誌時，你的視圖只能已最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。 exitUntilCollapsed: this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting。

須要注意的是，後面兩種模式基本只有在CollapsingToolbarLayout纔有用，而前面兩種模式基本是須要一塊兒使用的，也就是說，這些flag的使用場景，基本已經固定了。
例如咱們前面例子中的，也就是這種模式：

app:layout_scrollFlags=scroll|enterAlways

PS : 全部使用scroll flag的view都必須定義在沒有使用scroll flag的view的前面，這樣才能確保全部的view從頂部退出，留下固定的元素。

http://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html

CollapsingToolbarLayout

CollapsingToolbarLayout提供了一個能夠摺疊的Toolbar，這也是Google+、photos中的效果。Google把它作成了一個標準控件，更加方便你們使用。

這裏先看一個例子：

咱們在CollapsingToolbarLayout中放置了一個ImageView和一個Toolbar。並把這個 CollapsingToolbarLayout放到AppBarLayout中做爲一個總體。在CollapsingToolbarLayout中，我 們分別設置了ImageView和一個Toolbar的layout_collapseMode。
這裏使用了CollapsingToolbarLayout的app:layout_collapseMode=」pin」來確保Toolbar在 view摺疊的時候仍然被固定在屏幕的頂部。當你讓CollapsingToolbarLayout和Toolbar在一塊兒使用的時候，title會在展 開的時候自動變得大些，而在摺疊的時候讓字體過渡到默認值。必須注意，在這種狀況下你必須在CollapsingToolbarLayout上調用 setTitle()，而不是在Toolbar上。

除了固定住view，你還可使用app:layout_collapseMode=」parallax」（以及使用 app:layout_collapseParallaxMultiplier=」0.7」來設置視差因子）來實現視差滾動效果（好比 CollapsingToolbarLayout裏面的一個ImageView），這中狀況和CollapsingToolbarLayout的 app:contentScrim=」?attr/colorPrimary」屬性一塊兒配合更完美。

在這個例子中，咱們一樣設置了：

app:layout_scrollFlags=scroll|exitUntilCollapsed>

來接收一個：

app:layout_behavior=@string/appbar_scrolling_view_behavior>

這樣才能產生滾動效果，而經過layout_collapseMode，咱們就設置了滾動時內容的變化效果。

再來看一個官方的實例：

CoordinatorLayout與自定義view

有一件事情必須注意，那就是CoordinatorLayout並不知道FloatingActionButton或者AppBarLayout的 內部工做原理 - 它只是以Coordinator.Behavior的形式提供了額外的API，該API可使子View更好的控制觸摸事件與手勢以及聲明它們之間的依 賴，並經過onDependentViewChanged()接收回調。

可使用CoordinatorLayout.DefaultBehavior(你的View.Behavior.class)註解或者在佈局中使 用app:layout_behavior=」com.example.app.你的View$Behavior」屬性來定義view的默認行爲。 framework讓任意view和CoordinatorLayout結合在一塊兒成爲了可能。

 

總結

通過幾天的研究，Google此次提出的Android Design Support Library的意義其實並不在於給出了這些很是好的控件，其實這些控件在Github上基本都能找到相應的。它的目的在於Google給出了官方的設計 指導，進一步完善了MD設計思想。這纔是Android Design Support Library最重要的特性。固然，平心而論，這些控件的使用並非很是的人性化，過多的封裝致使整個效果不是很是的具備可定製性，可是，這畢竟是 Google邁出的第一步，後面必定會更加牛逼。

Demo

最後，給出一個融合MD和Android Design Support Library的Demo供你們研究，相信結合文章和代碼，你們必定能很快理解Android Design Support Library的使用方法。