Google在2015的IO大會上,給我們帶來了更加詳細的Material Design設計規範,同時,也給我們帶來了全新的Android Design Support Library,在這個support庫裡面,Google給我們提供了更加規範的MD設計風格的控件。最重要的是,Android Design Support Library的相容性更廣,直接可以向下相容到Android 2.2。這不得不說是一個良心之作。
使用Support Library非常簡單:
添加引用即可:
下面我們來看看這些新控件的基本使用方法,我們從最簡單的控件開始說起。
部分内容直接來自Android Developer Blog中的内容:
英文原文:
<a href="http://android-developers.blogspot.jp/2015/05/android-design-support-library.html">http://android-developers.blogspot.jp/2015/05/android-design-support-library.html</a>
鳳梨的翻譯:
<a href="http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html">http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html</a>
Snackbar提供了一個介于Toast和AlertDialog之間輕量級控件,它可以很友善的提供消息的提示和動作回報。
Snackbar的使用與Toast的使用基本相同:
需要注意的是,這裡我們把第一個參數作為Snackbar顯示的基準元素,而設定的Action也可以設定多個。
顯示的效果就類似如下:
Snackbar在出現一定時間後,就會消失,這與Toast一模一樣。
Google API Doc 官方說明:
<a href="http://developer.android.com/reference/android/support/design/widget/Snackbar.html">http://developer.android.com/reference/android/support/design/widget/Snackbar.html</a>
TextInputLayout作為一個父容器控件,包裝了新的EditText。通常,單獨的EditText會在使用者輸入第一個字母之後隐藏hint提示資訊,但是現在你可以使用TextInputLayout 來将EditText封裝起來,提示資訊會變成一個顯示在EditText之上的floating label,這樣使用者就始終知道他們現在輸入的是什麼。同時,如果給EditText增加監聽,還可以給它增加更多的floating label。
下面我們來看這與一個TextInputLayout:
一定要注意,他是把EditText包含起來的,不能單獨使用。
在代碼中,我們給它設定監聽:
這樣:顯示效果如下:
當輸入時:
這裡需要注意的是,TextInputLayout的顔色來自style中的colorAccent的顔色:
下面我們給出Google API Doc上的說明,了解TextInputLayout的詳細使用方法:
<a href="http://developer.android.com/reference/android/support/design/widget/TextInputLayout.html">http://developer.android.com/reference/android/support/design/widget/TextInputLayout.html</a>
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裡面的圖示。
<a href="http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html">http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html</a>
Tab滑動切換View并不是一個新的概念,但是Google卻是第一次在support庫中提供了完整的支援,而且,Design library的TabLayout 既實作了固定的頁籤 - view的寬度平均配置設定,也實作了可滾動的頁籤 - view寬度不固定同時可以橫向滾動。頁籤可以在程式中動态添加:
但大部分時間我們都不會這樣用,通常滑動布局都會和ViewPager配合起來使用,是以,我們需要ViewPager來幫忙:
通過一句話setupWithViewPager,我們就把ViewPager和TabLayout結合了起來。
<a href="http://developer.android.com/reference/android/support/design/widget/TabLayout.html">http://developer.android.com/reference/android/support/design/widget/TabLayout.html</a>
NavigationView在MD設計中非常重要,之前Google也提出了使用DrawerLayout來實作導航抽屜。這次,在support library中,Google提供了NavigationView來實作導航菜單界面,是以,新的導航界面可以這樣寫了:
其中最重要的就是這兩個屬性:
app:headerLayout
app:menu
通過這兩個屬性,我們可以非常友善的指定導航界面的頭布局和菜單布局:
其中最上面的布局就是app:headerLayout所指定的頭布局:
而下面的菜單布局,我們可以直接通過menu内容自動生成,而不需要我們來指定布局:
你可以通過設定一個OnNavigationItemSelectedListener,使用其setNavigationItemSelectedListener()來獲得元素被選中的回調事件。它為你提供被點選的 菜單元素 ,讓你可以處理選擇事件,改變複選框狀态,加載新内容,關閉導航菜單,以及其他任何你想做的操作。例如這樣:
可見,Google将這些東西封裝的非常易于使用了。
AppBarLayout跟它的名字一樣,把容器類的元件全部作為AppBar。like this:
這裡就是把Toolbar和TabLayout放到了AppBarLayout中,讓他們當做一個整體作為AppBar。
<a href="http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html">http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html</a>
CoordinatorLayout是這次新添加的一個增強型的FrameLayout。在CoordinatorLayout中,我們可以在FrameLayout的基礎上完成很多新的操作。
MD的一個新的特性就是增加了很多可懸浮的View,像我們前面說的Floating Action Button。我們可以把FAB放在任何地方,隻需要通過:
來指定顯示的位置。同時,它還提供了layout_anchor來供你設定顯示坐标的錨點:
CoordinatorLayout可以說是這次support library更新的重中之重。它從另一層面去控制子view之間觸摸事件的布局,Design library中的很多控件都利用了它。
一個很好的例子就是當你将FloatingActionButton作為一個子View添加進CoordinatorLayout并且将CoordinatorLayout傳遞給 Snackbar.make(),在3.0及其以上的裝置上,Snackbar不會顯示在懸浮按鈕的上面,而是FloatingActionButton利用CoordinatorLayout提供的回調方法,在Snackbar以動畫效果進入的時候自動向上移動讓出位置,并且在Snackbar動畫地消失的時候回到原來的位置,不需要額外的代碼。
官方的例子很好的說明了這一點:
其中,一個可以滾動的元件,例如RecyclerView、ListView(這裡需要注意的是,貌似隻支援RecyclerView、ListView,如果你用一個ScrollView,是沒有效果的)。如果:
1、給這個可滾動元件設定了layout_behavior
2、給另一個控件設定了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的使用場景,基本已經固定了。
例如我們前面例子中的,也就是這種模式:
PS : 所有使用scroll flag的view都必須定義在沒有使用scroll flag的view的前面,這樣才能確定所有的view從頂部退出,留下固定的元素。
<a href="http://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html">http://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html</a>
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”屬性一起配合更完美。
在這個例子中,我們同樣設定了:
來接收一個:
這樣才能産生滾動效果,而通過layout_collapseMode,我們就設定了滾動時内容的變化效果。
再來看一個官方的執行個體:
有一件事情必須注意,那就是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結合在一起成為了可能。
<a href="http://developer.android.com/reference/android/support/design/widget/CollapsingToolbarLayout.html">http://developer.android.com/reference/android/support/design/widget/CollapsingToolbarLayout.html</a>
經過幾天的研究,Google這次提出的Android Design Support Library的意義其實并不在于給出了這些非常好的控件,其實這些控件在Github上基本都能找到相應的。它的目的在于Google給出了官方的設計指導,進一步完善了MD設計思想。這才是Android Design Support Library最重要的特性。當然,平心而論,這些控件的使用并不是非常的人性化,過多的封裝導緻整個效果不是非常的具有可定制性,但是,這畢竟是Google邁出的第一步,後面一定會更加牛逼。
最後,給出一個融合MD和Android Design Support Library的Demo供大家研究,相信結合文章和代碼,大家一定能很快了解Android Design Support Library的使用方法。
<a href="https://github.com/xuyisheng/DesignSupportLibraryDemo">DesignSupportLibraryDemo</a>
目前版本還未完善,很多畫面還在進行中。後續會進一步豐富、完善,作為一個MD設計的Demo。