Android最新支持包Design簡介

 

Android 5.0 Lollipop是曾經最著名的Android發布之一，這樣說很大一部分原因是材料設計的引入，而材料設計則是一種刷新了整個Android體驗的設計語言。這個詳細說明是開始適應材料設計的好地方，但是也可以理解，材料設計對於開發人員來說是一個巨大的挑戰，尤其是關注應用向后兼容的開發人員。有了來自Android Design Support Library的些許幫助，給所有的開發人員和所有Android 2.1+的設備帶來了大量非常重要的材料設計構件。你將發現諸如抽屜導航視圖，帶有浮動標簽的EditText，FloatingActionButton，snackbar，tab和把他們聯系在一起的動作和滾動框架。

 

NavigationView

 

導航抽屜能夠成為應用內標識和導航的非常重要的焦點，設計的一致性也對於應用的導航是多么地容易產生了重要的影響，尤其是對於小白用戶。NavigationView通過提供一種框架，使得這種想法更加容易實現。而這個框架則滿足了你對於導航抽屜和通過menu資源填充導航item的能力的需要。

你可以像這樣在布局文件中把NavigationView作為DrawerLayout的抽屜內容視圖：

<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控制用於header的可選布局。app:menu是用於填充導航項的菜單資源，同時也可以在運行時更新導航項內容。NavigationView為你提供狀態欄的紗布保護，以確保NavigationView與狀態欄在API 21+的設備上准確地進行交互。

最簡單的抽屜菜單是一系列checkable菜單項的集合：

<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>

checked項將會在導航抽屜里面高亮顯示，以確保用戶知道哪個導航項在當前情況下是選中的。

你也可以在menu中使用subheader來分割導航項群組：

<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>

你可以通過使用setNavigationItemSelectedListener()方法設置OnNavigationItemSelectedListener來獲取已選中項的回調。它向你提供了被點擊的MenuItem,以允許你處理選中事件，改變被選中狀態，加載新的內容，通過代碼關閉抽屜，或者任何你想要的事件。

 

可編輯文本的浮動標簽

 

即便是最低下的EditText，在材料設計中也有改進的空間。在單個EditText首個字符輸入之后，提示文本將會被隱藏，但是現在你可以把提示文本包裹在TextInputLayout里面，使得提示文本成為EditText上面的浮動標簽，以確保用戶從不丟失他們正在輸入的上下文環境。

除了展示提示信息之外，你也可以通過調用setError()在EditText下面展示錯誤信息。

 

FloatingActionButton

 

漂浮動作按鈕是一個在交互界面上提供基本動作的圓形按鈕。Design包中的FloatingActionButton向你提供了單個一致的實現，默認情況下是塗上了主題中的colorAccent顏色。

漂流動作按鈕除了有正常尺寸外，它還在擁有其它元素時可視化持續性非常挑剔的時候支持迷你尺寸（fabSize=”mini”）。因為FloatingActionButton擴展自ImageView，所有的你也可以使用android:src，或者其它任何諸如setImageDrawable()的方法來控制顯示在FloatingActionButton里面的圖標。

 

Snackbar

 

對操作提供輕量級的快速反饋是使用snackbar的絕佳時機。Snackbar展示在屏幕詢問，包含了支持可選的單動作的文本。它們在給定時間之后自動超時，並以動畫的形式離開屏幕。此外，用戶也可以在超時之前通過滑動將其消失。

查看Snackbar效果請點擊（打不開時候注意翻牆）

擁有通過滑動或者動作來與之交互的能力，Snackbar顯然擁有比toast更加強大的能力，和別外一種輕量級的反饋機制。然而，你會發現API其實對你而言非常熟悉：

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將嘗試找到自己視圖的恰當父視圖來確保自己顯示在底部。

 

Tabs

 

在應用中通過Tab在不同視圖中間切換對於材料設計而言並非一個新的概念，他們等同於主頁的頂級導航模式或者在應用內組織不同群組的內容（例如，不同風格的音樂）。

Design包中的TabLayout既然實現了固定Tab，也實現了滾動Tab。對於前者，視圖的寬度在所有Tab之間等分，而對於后者，Tab並沒有統一的尺寸，而且可以橫向滾動。Tab可以通過代碼添加：

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

然而，如果你正在使用ViewPager在Tab之間橫向分頁，你可以直接從PagerAdapter的getPageTitle()方法創建tab，然后使用setupWithViewPager()方法將ViewPager和Tab聯系起來。這樣就確保了tab選中事件更新了ViewPager，而分頁更新了選中的tab。

 

CoordinatorLayout，動作和滾動

 

不只獨特的視角是材料設計中的一部分：動作（motion）也是造就偉大材料設計應用的重要部分。在材料設計中擁有大量諸如觸摸漣漪效果和有意思的活動過渡效果等動作的同時，Design包引進了CoordinatorLayout，這個布局提供了對子視圖之間觸摸事件的更高層次的控件，也引進了一些Design包中許多構件充分利用的東西。

 

CoordinatorLayout和FloatingActionButton

 

兩者使用的一個好例子是當你添加一個FloatingActionButton作為CoordinatorLayout的子元素，然后再將這個CoordinatorLayout傳遞給Snackbar.make()調用—這樣的話，不是snackbar展示在FloatingActionButton的上面，而是在snackbar以動畫的形式進入屏幕的進修FloatingActionButton充分利用了CoordinatorLayout提供的回調自動向上移動，然后在snackbar返回它的位置的時候，snackbar在Android 3.0以上的設備上產生動畫退出屏幕，而不需要額外的代碼。

查看效果請點擊（打不開時候注意翻牆）

CoordinatorLayout也提供了layout_anchor屬性，該屬性和layout_anchorGravity一起能夠用於放置浮動視圖，例如FloatingActionButton，並關聯到其它視圖。

 

CoordinatorLayout和App Bar

 

CoordinatorLayout的其它主要使用實例包括app bar（即先前的action bar）和滾動技術。你也許已經在布局中使用Toolbar了，Toolbar允許你輕易地自定義外觀和應用中圖標部分與布局的集成。Design包在這一點走得更遠：使用AppBarLayout允許Toolbar和其它的視圖（如TabLayout提供了tab）對標記了ScrollingViewBehavior的兄弟視圖中的滾動事件產生反饋。由此，你可以像這樣創建布局：

<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能夠對通過使用子視圖的滾動標簽來控件他們如何滾進和滾出屏幕的事件進行響應。這些標簽包括：

• scroll：這個標簽應該是想要滾出屏幕的所有視圖的集合—對於那些並不使用這個標簽的視圖，他們而被訂在屏幕的頂部。

• enterAlways：這個標簽確保任何向下的滑動都會使得這個視圖可見，激活了“快速返回”模式。

• exitUntilCollapsed：這個標簽使得視圖不會滾動出來，除非在退出之前該視圖變得“collapsed”（它的minHeight）。

注意一點：所有使用scroll標簽的視圖必須在不使用該標簽的視圖之前聲明。這將確保所有的視圖從頂部退出，而把固定的元素落下。

 

Collapsing Toolbar

 

把Toobar直接添加到AppBarLayout里面給予了你enterAlwayCollapsed和exitUntilCollapsed這些滾動標簽的訪問權限，而不是對不同元素如何對collapsing作出響應的詳細控件能力。要想獲取后者的效果，你可以使用CollapsingToolbarLayout：

<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本身在視圖collapse的時候依然能夠被訂在屏幕頂部。而可能更多的情況是，在你一起使用CollapsingToolbarLayout和Toolbar的時候，當布局完全可見的時候，標題將自動顯示得更大，然后在toolbar collapse的時候過渡到它的默認尺寸。請注意在這些情況下，你應該調用CollapsingToolbarLayot的setTittle()，而非Toolbar本身的setTitle()。

查看Collapsing Toolbar效果請點擊（打不開時候注意翻牆）

除了可以訂住一個視圖之外，你能夠使用app:layout_collapseMode=”parallax”（可選情況下，使用app:layout_collapseParallaxMultiplier=”0.7”來設置滾動視差乘法因子）來實現滾動視差效果（例如CollapsingToolbarLayout內部的兄弟ImageView）。這個使用示例將app:layout_collapseParallaxMultiplier和CollapsingToolbarLayout的app:contentScrim=”?attr/colorPrimary”配成對使用，結果是在視圖collapse時，添加了全出血紗布效果。

 

CoordinatorLayout和自定義視圖

 

要記住和重要一點是：CoordinatorLayout並沒有任何對FloatingActionButton或AppBarLayout工作原理的天生理解，它僅僅以Coordinator.Behavior的形式提供了額外的API，而Coordinator.Behavior允許子視圖更好地控制觸摸事件和手勢，但也聲明了彼此之間的依賴性並通過onDependentViewChanged()方法接收到回調。

視圖可以通過使用CoordinatorLayout.DefaultBehavior(YourView.Behavior.class)注解來聲明一個默認的Behavior，或者在布局文件中通過app:layout_behavior=”com.example.app.YourView$Behavior”屬性來設置。框架層使得對任意視圖而言集成CoordinatorLayout成為可能。

 

注意，Design支持包依賴於V4支持包和AppCompat支持包，后兩者將會在你導入Design支持包依賴時自動引入。我們也注意到這些新的控件在Android Studio Layout Editor’s Design

（在CustomView下面找到它們）視圖中可以使用，給你提供了更容易的方式來預覽一些新的構件。

Design支持包，AppCompat支持包和其它所有的Android支持包非常重要的工作，以提供所需的構建塊來不一切必從頭開始構建一個現代，美觀的Android應用。