天天看點

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非常簡單:

添加引用即可:

下面我們來看看這些新控件的基本使用方法,我們從最簡單的控件開始說起。

部分内容直接來自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也可以設定多個。

顯示的效果就類似如下:

Android Design Support Library使用詳解Android Design Support Library使用詳解

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>

Android Design Support Library使用詳解Android Design Support Library使用詳解

TextInputLayout作為一個父容器控件,包裝了新的EditText。通常,單獨的EditText會在使用者輸入第一個字母之後隐藏hint提示資訊,但是現在你可以使用TextInputLayout 來将EditText封裝起來,提示資訊會變成一個顯示在EditText之上的floating label,這樣使用者就始終知道他們現在輸入的是什麼。同時,如果給EditText增加監聽,還可以給它增加更多的floating label。

下面我們來看這與一個TextInputLayout:

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

在代碼中,我們給它設定監聽:

這樣:顯示效果如下:

Android Design Support Library使用詳解Android Design Support Library使用詳解

當輸入時:

Android Design Support Library使用詳解Android Design Support Library使用詳解

這裡需要注意的是,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>

Android Design Support Library使用詳解Android Design Support Library使用詳解

floating action button 是一個負責顯示界面基本操作的圓形按鈕。Design library中的FloatingActionButton 實作了一個預設顔色為主題中colorAccent的懸浮操作按鈕,like this:

Android Design Support Library使用詳解Android Design Support Library使用詳解

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結合了起來。

Android Design Support Library使用詳解Android Design Support Library使用詳解

<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

通過這兩個屬性,我們可以非常友善的指定導航界面的頭布局和菜單布局:

Android Design Support Library使用詳解Android Design Support Library使用詳解

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

而下面的菜單布局,我們可以直接通過menu内容自動生成,而不需要我們來指定布局:

你可以通過設定一個OnNavigationItemSelectedListener,使用其setNavigationItemSelectedListener()來獲得元素被選中的回調事件。它為你提供被點選的 菜單元素 ,讓你可以處理選擇事件,改變複選框狀态,加載新内容,關閉導航菜單,以及其他任何你想做的操作。例如這樣:

可見,Google将這些東西封裝的非常易于使用了。

AppBarLayout跟它的名字一樣,把容器類的元件全部作為AppBar。like this:

Android Design Support Library使用詳解Android Design Support Library使用詳解

這裡就是把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的控件發生狀态的改變。

Android Design Support Library使用詳解Android Design Support Library使用詳解

設定的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,我們就設定了滾動時内容的變化效果。

Android Design Support Library使用詳解Android Design Support Library使用詳解

再來看一個官方的執行個體:

Android Design Support Library使用詳解Android Design Support Library使用詳解

有一件事情必須注意,那就是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。

繼續閱讀