1 Android值得學習的新技術Design Support Library.Google Io全國大會Google升級了新的Support Library。
2 Design Support Library使用介紹
2-1 綜述
支持Android 2.1以上設備。
Gradle build script dependency:
compile 'com.android.support:design:22.2.0' //可修改版本號爲自己匹配
Design Support Library包含8個控件,具體如下:
Widget Name | Description |
---|---|
android.support.design.widget.TextInputLayout | 強大帶提示的MD風格的EditText |
android.support.design.widget.FloatingActionButton | MD風格的圓形按鈕,來自於ImageView |
android.support.design.widget.Snackbar | 類似Toast,添加了簡單的單個Action |
android.support.design.widget.TabLayout | 選項卡 |
android.support.design.widget.NavigationView | DrawerLayout的SlideMenu |
android.support.design.widget.CoordinatorLayout | 超級FrameLayout |
android.support.design.widget.AppBarLayout | MD風格的滑動Layout |
android.support.design.widget.CollapsingToolbarLayout | 可摺疊MD風格ToolbarLayout |
下面簡單說說這些控件的特性和使用注意項,接下來幾天我將每個控件寫一個demo進行講解。
2-2 TextInputLayout控件
在MD中,使用TextInputLayout將EditText進行了封裝,提示信息會變成一個顯示在EditText之上的floating label,這樣用戶就始終知道他們現在輸入的是什麼,而且過度動畫是平滑的。還可以在下方通過setError設置Error提示,使用比較簡單,所以不做過多說明,詳情見Demo源碼。
注意項:
TextInputLayout中至少嵌套一個EditText。
2-3 FloatingActionButton控件
一個負責顯示界面基本操作的圓形按鈕。Design library中的FloatingActionButton 實現了一個默認顏色爲主題中colorAccent的懸浮操作按鈕。除了一般大小的懸浮操作按鈕,它還支持mini size(fabSize=”mini”)。FloatingActionButton繼承自ImageView,你可以使用android:src或者 ImageView的任意方法,比如setImageDrawable()來設置FloatingActionButton裏面的圖標。
無特別注意項,和普通控件類似。
2-4 Snackbar控件
Snackbar爲一個操作提供輕量級、快速的反饋。Snackbar顯示在屏幕的底部(有MD動畫效果浮現和消失),包含了文字信息與一個可選的操作按鈕。在指定時間結束之後自動消失。另外,用戶還可以在超時之前將它滑動刪除。Snackbar被看作是比Toast更強大的快速反饋機制,你會發現他們的API非常相似。你應該注意到了make()方法中把一個View作爲第一個參數(Snackbar試圖找到一個合適的父親以確保自己是被放置於底部)。
無特殊注意項,和Toast類似。
2-5 TabLayout控件
通過選項卡的方式切換View並不是MD中才有的新概念,它們和頂層導航模式或者組織app中不同分組內容(比如,不同風格的音樂)是同一個概念。 Design library的TabLayout 既實現了固定的選項卡(View的寬度平均分配),也實現了可滾動的選項卡(View寬度不固定同時可以橫向滾動)。如果你使用ViewPager在 tab之間橫向切換,你可以直接從PagerAdapter的getPageTitle() 中創建選項卡,然後使用setupWithViewPager()將兩者聯繫在一起。它可以使tab的選中事件能更新ViewPager,同時
ViewPager
的頁面改變能更新tab的選中狀態。
注意項:
如果你使用ViewPager在tab之間橫向切換,切記可以直接從PagerAdapter的getPageTitle() 中創建選項卡,然後使用setupWithViewPager()將兩者聯繫在一起。
2-6 NavigationView控件
抽屜導航是app識別度與內部導航的關鍵,保持這裏設計上的一致性對app的可用性至關重要,尤其是對於第一次使用的用戶。 NavigationView 通過提供抽屜導航所需的框架讓實現更簡單,同時它還能夠直接通過菜單資源文件直接生成導航元素。把NavigationView作爲 DrawerLayout的內容視圖來使用。NavigationView處理好了和狀態欄的關係,可以確保NavigationView在API21+ 設備上正確的和狀態欄交互。
注意項:
你可以通過設置一個OnNavigationItemSelectedListener,使用其 setNavigationItemSelectedListener()來獲得元素被選中的回調事件。它爲你提供被點擊的菜單元素,讓你可以處理選擇事件、改變複選框狀態、加載新內容、關閉導航菜單,以及其他任何你想做的操作。你會注意到NavigationView的兩個新自定義屬性如下:
new attr | description |
---|---|
app:headerLayout | 控制頭部的佈局 |
app:menu | 導航菜單的資源文件(也可以在運行時配置) |
2-7 CoordinatorLayout控件
手勢,及滾動佈局,MD的手勢有很多組成部分,包括touch ripples和meaningful transitions。Design library引入了CoordinatorLayout,一個從另一層面去控制子view之間觸摸事件的佈局,Design library中的很多控件都利用了它。一個很好的例子就是當你將FloatingActionButton作爲一個子View添加進 CoordinatorLayout並且將CoordinatorLayout傳遞給 Snackbar.make(),在3.0及其以上的設備上,Snackbar不會顯示在懸浮按鈕的上面,而是FloatingActionButton 利用CoordinatorLayout提供的回調方法,在Snackbar以動畫效果進入的時候自動向上移動讓出位置,並且在Snackbar動畫地消失的時候回到原來的位置,不需要額外的代碼。
CoordinatorLayout的另一個用例是ActionBar與滾動技巧。你可能已經在自己的佈局中使用了Toolbar ,它允許你更加自由的自定義其外觀與佈局的其餘部分融爲一體。Design library把這種設計帶到了更高的水平,使用AppBarLayout可以讓你的Toolbar與其他View(比如TabLayout的選項卡)能響應被標記了ScrollingViewBehavior的View的滾動事件。
注意項:
當用戶滾動RecyclerView,AppBarLayout可以這樣響應滾動事件:
根據子view的滾動標誌(scroll flag)來控制它們如何進入(滾入屏幕)與退出(滾出屏幕)。
Flag包括:
- 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。
特別注意:所有使用scroll flag的View都必須定義在沒有使用scroll flag的View前面,這樣才能確保所有的View從頂部退出,留下固定的元素。
PS一句:CoordinatorLayout還提供了layout_anchor和layout_anchorGravity屬性一起配合使用,可以用於放置floating view,比如FloatingActionButton與其他View的相對位置。相見Demo中演示。
2-8 AppBarLayout控件
這個沒啥解釋的,就是一個ViewGroup,配合ToolBar與CollapsingToolbarLayout等使用。就是一個純容器類。
無特殊注意項。
2-9 CollapsingToolbarLayout控件
可伸縮摺疊的Toolbar (Collapsing Toolbar),直接添加Toolbar到AppBarLayout可以讓你使用enterAlwaysCollapsed和 exitUntilCollapsedscroll標誌,但是無法控制不同元素如何響應collapsing的細節。這裏使用了 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”屬性一起配合更完美。
有一件事情必須注意,那就是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結合在一起成爲了可能。
注意項:
注意項上面描述部分已經聲明,不需要額外說明。
3 總結
到此2015 Google IO的新suppory包控件完全介紹完畢。詳細細節可以翻牆閱讀AD的developer->tools->support library。至此只能期待Android M儘快發佈呀。
PS:已經用上了Android Studio 1.3預覽版,只是M得編譯會出錯,有BUG,別的暫時沒發現啥區別,還有一點,比1.2貌似快了一點,哈哈,是我心裏作用麼?
轉自 http://www.open-open.com/lib/view/open1433385856119.html