Material Design兼容庫(Design Support Library)

導讀:這個兼容庫很容易和之前的 Android Support Library 22.1混淆,都是兼容庫,區別是這個庫多了個Design。 Android Support Library 22.1只是支持了一些基本控件的材料設計化,但是這個庫更多的是對一些特效的實現,這個庫和github上的很多開源項目是有很大關係的,material design的很多效果,同一種效果在github上有太多的實現,現在官方把部分效果標準化了。


英文原文 Android Design Support Library 

安卓5.0是是有有史以來最重要的安卓版本之一,這其中有很大部分要歸功於material design的引入,這種新的設計語言讓整個安卓的用戶體驗煥然一新。我們的詳細專題是幫助你開始採用material design的好去處。但是我們也知道,這種設計對於開發者,尤其是那些在意向後兼容的開發者來說是一種挑戰。

在Android Design Support Library的幫助下,我們爲所有的開發者,所有2.1以上的設備,帶來了一些重要的material design控件。你可以在這裏面找到navigation drawer view輸入控件的懸浮標籤懸浮操作按鈕snackbar選項卡以及將這些控件結合在一起的手勢滾動框架

Navigation View

抽屜導航是app識別度與內部導航的關鍵,保持這裏設計上的一致性對app的可用性至關重要,尤其是對於第一次使用的用戶。 NavigationView 通過提供抽屜導航所需的框架讓實現更簡單,同時它還能夠直接通過菜單資源文件直接生成導航元素。


drawer.png


把NavigationView作爲DrawerLayout的內容視圖來使用,比如下面的佈局:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<android.support.v4.widget.DrawerLayout
        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:fitsSystemWindows="true">
 
    <!-- your content layout -->
 
    <android.support.design.widget.NavigationView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/drawer_header"
            app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>


你會注意到NavigationView的兩個屬性:app:headerLayout  - 控制頭部的佈局, app:menu - 導航菜單的資源文件(也可以在運行時配置)。NavigationView處理好了和狀態欄的關係,可以確保NavigationView 

在API21+設備上正確的和狀態欄交互。最簡單的抽屜菜單就是幾個可點擊的菜單集合:


1
2
3
4
5
6
7
8
9
10
11
<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>


被點擊過的item會高亮顯示在抽屜菜單中,讓用戶知道當前是哪個菜單被選中。

你也可以在menu中使用subheader來爲菜單分組:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<item
    android:id="@+id/navigation_subheader"
    android:title="@string/navigation_subheader">
    <menu>
        <item
            android:id="@+id/navigation_sub_item_1"
            android:icon="@drawable/ic_android"
            android:title="@string/navigation_sub_item_1"/>
        <item
            android:id="@+id/navigation_sub_item_2"
            android:icon="@drawable/ic_android"
            android:title="@string/navigation_sub_item_2"/>
    </menu>
</item>


你可以通過設置一個OnNavigationItemSelectedListener,使用其setNavigationItemSelectedListener()來獲得元素被選中的回調事件。它爲你提供被點擊的 菜單元素 ,讓你可以處理選擇事件,改變複選框狀態,加載新內容,在代碼中關閉drawer,或者其他任何你想做的事情。

輸入框控件的懸浮標籤

在material design中,即便是簡單的 EditText ,也有提升的餘地。通常,單獨的EditText會在用戶輸入第一個字母之後隱藏提示信息,但是現在你可以使用TextInputLayout 來將EditText封裝起來,提示信息會變成一個顯示在EditText之上的floating label,這樣用戶就始終知道他們現在輸入的是什麼。


textinputlayout.png


除了顯示提示信息,你還可以通過調用setError()在EditText下面顯示一條錯誤信息。


懸浮操作按鈕 Floating Action Button

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


image03.png


除了一般大小的懸浮操作按鈕,它還支持mini size(fabSize="mini")。FloatingActionButton繼承自ImageView,你可以使用android:src或者ImageView的任意方法,比如setImageDrawable()來設置FloatingActionButton裏面的圖標。

Snackbar

爲一個操作提供輕量級的,快速的反饋是使用snackbar的最好時機。snackbar顯示在屏幕的底部,包含了文字信息與一個可選的操作按鈕。在指定時間結束之後自動消失。另外,用戶還可以在超時之前將它滑動刪除。


_1432996528.gif


因爲包含了可以與snackbar交互的滑動刪除與操作按鈕,snackbar被看作是比toast更強大的快速反饋機制。但是你會發現他們的API非常相似:


1
2
3
4
Snackbar
  .make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG)
  .setAction(R.string.snackbar_action, myOnClickListener)
  .show(); // Don’t forget to show!


你應該注意到了make()方法中把一個View作爲第一個參數 - Snackbar試圖找到一個合適的父親以確保自己是被放置於底部。

選項卡

通過選項卡的方式切換view並不是material design中才有的新概念。它們和頂層導航模式或者組織app中不同分組內容(比如,不同風格的音樂)是同一個概念。


tabs.png


Design library的TabLayout 既實現了固定的選項卡 - view的寬度平均分配,也實現了可滾動的選項卡 - view寬度不固定同時可以橫向滾動。選項卡可以在程序中動態添加:


1
2
TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));


但是如果你使用ViewPager在tab之間橫向切換,你可以直接從 PagerAdapter 的 getPageTitle() 中創建選項卡,然後使用setupWithViewPager()將兩者聯繫在一起。它可以使tab的選中事件能更新ViewPager,同時ViewPager 
的頁面改變能更新tab的選中狀態。


CoordinatorLayout, 手勢, 以及滾動

與衆不同的視覺效果只是material design的一部分:手勢同樣是製作一個material design app的重要組成部分。material design的手勢有很多組成部分,包括touch ripples 和 meaningful transitions 。Design library引入了CoordinatorLayout,一個從另一層面去控制子view之間觸摸事件的佈局,Design library中的很多控件都利用了它。


CoordinatorLayout與懸浮操作按鈕 

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


_1432996402.gif


CoordinatorLayout還提供了一個layout_anchor屬性,和layout_anchorGravity,一起,可以用於放置floating view,比如FloatingActionButton與其他view的相對位置。

CoordinatorLayout與app bar

CoordinatorLayout的另一個用例是 app bar(之前的actionbar)與 滾動技巧。你可能已經在自己的佈局中使用了Toolbar ,它允許你更加自由的自定義其外觀與佈局的其餘部分融爲一體。Design library把這種設計帶到了更高的水平:使用AppBarLayout可以讓你的Toolbar與其他view(比如TabLayout的選項卡)能響應被標記了ScrollingViewBehavior的View的滾動事件。因此,你可以創建一個如下的佈局:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 <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">
      
     <! -- Your Scrollable View -->
    <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
                  ...
                  app:layout_scrollFlags="scroll|enterAlways">
     </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>


現在,當用戶滾動RecyclerView,AppBarLayout可以這樣響應滾動事件:根據子view的滾動標誌(scroll flag)來控制它們如何進入(滾入屏幕)與退出(滾出屏幕)。

Flag包括:

    scroll: this flag should be set for all views that want to scroll off the screen - for views that do not use this flag, they’ll remain pinned to the top of the screen

    enterAlways: this flag ensures that any downward scroll will cause this view to become visible, enabling the ‘quick return’ pattern

    enterAlwaysCollapsed: When your view has declared a minHeight and you use this flag, your View will only enter at its minimum height (i.e., ‘collapsed’), only re-expanding to its full height when the scrolling view has reached it’s top.

    exitUntilCollapsed: this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting

注意一點:所有使用scroll flag的view都必須定義在沒有使用scroll flag的view的前面,這樣才能確保所有的view從頂部退出,留下固定的元素。

可伸縮摺疊的Toolbar (Collapsing Toolbar)

直接添加Toolbar到AppBarLayout可以讓你使用enterAlwaysCollapsed 和 exitUntilCollapsedscroll標誌,但是無法控制不同元素如何響應collapsing的細節,爲了達到此目的,使用CollapsingToolbarLayout


1
2
3
4
5
6
7
8
9
10
11
12
13
<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>


這裏使用了CollapsingToolbarLayout的app:layout_collapseMode="pin"來確保Toolbar在view摺疊的時候仍然被別在屏幕的頂部。還可以做到更好的效果,當你讓CollapsingToolbarLayout和Toolbar在一起使用的時候,title會在展開的時候自動變得大些,而在摺疊的時候讓字體過渡到默認值。必須注意,在這種情況下你必須在CollapsingToolbarLayout上調用setTitle(),而不是在Toolbar上。


_1433000756.gif


除了別住view,你還可以使用app:layout_collapseMode="parallax"(以及使用app:layout_collapseParallaxMultiplier="0.7"來設置視差因子)來實現視差滾動效果(比如CollapsingToolbarLayout裏面的一個ImageView),這中情況和CollapsingToolbarLayout的app:contentScrim="?attr/colorPrimary"屬性一起配合更完美。


1433004200573097.png


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結合在一起成爲了可能。

現在就可以使用了!

Design library現在已經可以使用了,確保你在SDK Manager中更新了Android Support Repository。添加一行依賴,然後你就可以開始使用Design library了:


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


Design library依賴於Support v4 和 AppCompat Support庫,在添加了Design library依賴之後,這些庫會自動的包含進來。我們還讓這些控件可以在Android Studio的佈局編輯器裏預覽。

Design library, AppCompat以及所有的安卓支持庫是創建一個現代,美觀app的重要工具。


譯文完。

--------------------

這裏面最難理解的應該是CoordinatorLayout,覺得要真正理解有必要看看其實現的源碼,而且個人認爲CoordinatorLayout雖然封裝的很好,但是其使用並不直觀。

最後附上Android Design library的demo:

https://github.com/chrisbanes/cheesesquare 。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章