Android Design Support Library最新組件，androiddesign

Android Design Support Library最新組件，androiddesign

Android 5.0 Lollipop是Android發布的最具意義的一個版本，這樣說的一個很重要的原因是Material Design的引入，一個新的設計語言重新整理了整個Android的體驗。我們的詳細說明是一個對於適應Material Design的偉大的開始，同時我們也可以理解為那對於開發人員來說是一個巨大的挑戰，尤其是關注著向後相容的開發人員來說。從新的Android的設計依賴庫（Design Support Library）我們可以得到一些協助。今天，我們給所有的開發人員以及Android2.1以上裝置帶來了一些重要的材料設計的組件。你可以看到一個隱藏式瀏覽選單，浮動標籤，浮動動作按鈕，snackbar，tabs和一個將它們關聯在一起的處理動作和滑動的架構。

Navigation View

隱藏式瀏覽選單（navigation drawer）可以在App中識別和導航方面成為一個重要的焦點，並且設計的一致性也會對App的導航產生重要的影響，尤其對於初次使用的使用者。NavigationView通過提供開發人員所需要的隱藏式瀏覽選單的架構，是這一切變得很容易，並且它同樣提供給開發人員通過菜單資源定義導航項的能力。

你可以像這樣在一個布局中，使用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控制頂部的布局（可選）。app:menu是確定導航項的菜單資源（可以在運行時被更新）。NavigationView也會考慮到狀態列的紗布保護，以確保你的NavigationView和狀態列能夠在API 21（Android 5.0）的裝置之上正確的互動。
最簡單的抽屜內容可以是一個可選功能表項目的集合：

<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    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，你可以捕捉到導航項被選擇的回調事件。這提供給你的功能表項目是可以點擊的，允許你處理選擇事件，改變選擇狀態，載入新的內容，在代碼中關閉抽屜，或者其他你想做的事。

EditText的浮動標籤

甚至是簡陋的EditText，在material design中都有被提升的空間。當一個EditText被鍵入第一字元後，提示文本會被隱藏，你現在可以將提示文本放在TextInputLayout中，這樣可以使提示文本變成一個浮動的標籤置於EditText之上，以確保使用者不會在輸入過程中丟失上下文背景。

除了顯示提示文本，你也可以通過調用setError()方法，在EditText之下顯示錯誤資訊。

浮動的動作按鈕

一個浮動的動作按鈕表示在介面中來處理個人的動作事件的一個圓形的按鈕。設計依賴庫中的FloatingActionButton提供了一個簡單的協助實現，預設的顏色使用的是你在主題中所設定的colorAccent屬性值。

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!

需要注意，使用一個View作為make方法的第一參數，Snackbar會找到一個合適的父控制項，來確保將自己置於底部。

Tabs

對於material design來說，通過標籤在不同的View之間進行切換並不是一個新的概念，它同等與首頁的頂部導航模式，或者在App中組織不同的組內容（例如，不同類型的音樂）

設計依賴庫中的TabLayout提供了固定標籤–在所有的標籤下view的寬度被相等的分割，以及滑動標籤–所有的標籤並不是均勻的大小並且可以水平的滑動。可以在程式中這樣添加標籤：

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

然而，如果你使用ViewPager作為標籤之間的水平分頁，你可以直接使用PagerAdapter中的 getPageTitle()建立標籤，然後通過setupWithViewPager()方法將它們聯絡在一起。這會確保標籤選擇事件會更新ViewPager，並且頁的切換也會更新選擇的標籤。

CoordinatorLayout，動作和滾動

獨特的視覺效果僅僅是material design的一部分，動作也是組成一個偉大的material design App的重要部分。在material desig擁有大量的像點擊波紋效果和有意思的過渡動畫效果同時，設計依賴庫也包括了CoordinatorLayout，一種布局提供了更高層次的子控制項之間的觸摸事件的控制，這一點可以被設計依賴庫中的很多組件利用。

CoordinatorLayout和浮動動作按鈕

一個很好的例子就是，當你添加FloatingActionButton來作為CoordinatorLayout的子控制項並且將CoordinatorLayout傳遞給你的Snackbar.make()方法時，取代snackbar顯示在FloatingActionButton之上的是，FloatingActionButton 可以利用的CoordinatorLayout反饋效果，自動的以動畫效果移動到snackbar的上面，並且在snackbar消失時回到原來的位置，這可以在Android 3.0或者更高的裝置上實現，而不需要額外的代碼。

CoordinatorLayout也提供了一個layout_anchor屬性，伴隨layout_anchorGravity屬性使用，可以用來放置浮動的視圖，例如FloatingActionButton，並關聯到其他的View。

CoordinatorLayout 和 app bar

CoordinatorLayout的其他的主要用法是app bar和滾動技術方面。你可能準備在布局中使用一個Toolbar，可以更容易的去自訂外觀，與一個app的圖片相關聯起來。設計依賴庫把這個帶到了另外的層次：使用AppBarLayout允許Toolbar和其它的視圖（如提供標籤的TabLayout）對標記了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 flags）控制它們如何進入以及如何退出螢幕。這些標誌有：

• scroll：這個標誌被用於所有可以滾出螢幕的View，如果沒有設定該標誌，那麼這個View會被釘在螢幕的頂部。
• enterAlways：這個標誌保證了任何的下滑動作可以使得View變得可見，使得“快速返回”模式可用。
• enterAlwaysCollapsed：當一個View聲明了最小高度，並且使用了該標誌，這個View僅僅會以最小高度（由collapsed屬性聲明）進入，僅僅當滑動到頂部時被展開為整個的高度。
• exitUntilCollapsed：這個標誌保證了在View被滑動到最小高度之前一直存在於螢幕。

注意一點：所有的View使用的滑動標誌應該在該View使用到標誌之前被聲明，這將確保所有的View從頂部退出，而把固定的元素留下。

Collapsing Toolbars

直接添加一個Toolbar到AppBarLayout就會帶有enterAlwaysCollapsed和exitUntilCollapsed的滑動標誌，但是並不會詳細的控制不同的元素如何對摺疊做出反應，為了這樣做，你可以使用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會被釘在螢幕頂部。甚至更好，你可以使用CollapsingToolbarLayout與Toolbar一起，當布局整個高度可見時，你的標題字型會變得更大。當視圖被摺疊時，會過渡的原來的尺寸。注意在這些例子中，在CollapsingToolbarLayout中調用了setTitle方法，而不是在Toolbar中。

除了可以釘住一個View之外，你可以使用app:layout_collapseMode=”parallax”（可選的設定屬性app:layout_collapseParallaxMultiplier=”0.7”來設定視差乘數）來實現一個視差滾動（例如CollapsingToolbarLayout內部的兄弟視圖ImageView）。這種用法將app:layout_collapseParallaxMultiplier和CollapsingToolbarLayout的app:contentScrim=”?attr/colorPrimary”結合使用，結果就是在視圖摺疊時，添加了一個紗布效果。

CoordinatorLayout 和自訂視圖

一件重要的事就是注意CoordinatorLayout並不需要明白FloatingActionButton或者AppBarLayout 的內部工作原理，就像一種Coordinator.Behavior的形式提供的附加的API，以允許子視圖更好地控制觸摸事件和手勢，同時也聲明了彼此之間的依賴性，並且通過onDependentViewChanged()可以接受反饋。

View可以通過CoordinatorLayout.DefaultBehavior(YourView.Behavior.class)註解來聲明一個預設的行為，或者在布局檔案中使用app:layout_behavior=”com.example.app.YourView$Behavior”屬性。這個架構使得CoordinatorLayout可以與任何View向關聯。

終於可以使用！

這個設計依賴庫現在已經可以使用了，確保自己在 SDK Manager中更新了Android Support Repository，你可以開始使用這些依賴庫使用這樣一句簡單的聲明：

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

注意：該庫依賴於Support v4和AppCompat Support Libraries，當你添加這個設計依賴庫時這些都會自動的包含進來。

這個設計依賴庫，AppCompat，以及其他所有的Android開發支援庫都是很重要的工具，它們為我們在在開發一個現代的，美觀的APP方面提供了構建模組，從而避免了重複創造之前的工程。

原文地址

原文來自：Android Design Support Library