天天看點

Material Design元件之FloatingActionButton

原文首發于微信公衆号:躬行之(jzman-blog)

Material Design 設計規範在 Google I/O 2014 推出,這種設計理念一經推出就受到廣大開發者的喜愛,主要側重于紙墨化創作和突出設計的實體感,使得設計更接近于真實世界,力求平滑、連續的互動方式與使用者體驗,這種設計規範更能促進 Android 生态系統的發展,為此,Google 提供了一系列的符合 Material Design 風格的控件,如 FloatingActionButton、Snackbar、TabLayout 等。雖然經常在開發中用到,但是沒有做記錄,打算從頭開始記錄一下這些元件的使用,今天說一下 CoordinatorLayout 和 FloatingActionButton 相關的知識。

CoordinatorLayout 是一個加強版的 FramLayout,意味着如果不加任何限制,在 CoordinatorLayout 裡面的子 View 都會預設出現在左上角,CoordinatorLayout 有兩個主要的使用方式:

作為應用的頂層布局

作為與一個或多個子 View 互動的容器

可為 CoordinatorLayout 裡面的子 View 指定 Behavior,就在單個父布局中提供許多不同的互動效果,子 View 之間也可以互相互動,CoordinatorLayout 可以使用 CoordinatorLayout.DefaultBehavior 注解來指定子 View 的預設行為,總之,可以借助 CoordinatorLayout 實作不同的滾動效果。

FloatingActionButton 是 Material Design 類型的按鈕控件,一般表現是浮動在 UI 上層的圓形圖示,有自己的 behavior 并可以設定錨點。

FloatingActionButton 有兩種大小,分别是 normal(56dp) 和 mini(40dp) ,預設是 mini(40dp),其大小可以通過屬性 fabSize 來指定需要的大小,當然也可以設定 fabSize 為 auto,系統會根據不同的螢幕選擇合适的大小。

FloatingActionButton 間接繼承 ImageView,可以使用如下方式在代碼中設定圖示:

FloatingActionButton 的背景顔色預設是主題的 colorAccent 表示的值,在代碼中可以通過如下方式修改 FloatingActionButton 的背景顔色,具體如下:

可以通過如下方式設定 FloatingActionButton 的大小,具體如下:

那麼,如何自定義 FloatingActionButton 的大小呢,可以從 FloatingActionButton 部分源碼中看到決定其大小的尺寸是定義到 dimens 檔案中的,具體由 design_fab_size_mini 和 design_fab_size_normal 來決定,部分代碼如下:

是以隻需要建立 dimens 檔案夾,在裡面重新設定 design_fab_size_mini 和 design_fab_size_normal 的值即可自定義 FloatingActionButton 的大小了,具體如下:

當然 FloatingActionButton 間接繼承 ImageView,ImageView 的一些屬性肯定可以使用,這裡就不在說了。

下面是一些常用的屬性,具體如下:

關于屬性,了解一下,具體使用時設定後觀察效果不失為一種直覺的學習方式。

總覺得做筆記還是有效果圖比較好,那就簡單使用 CoordinatorLayout 和 FloatingActionButton 看一下具體效果,布局如下:

然後在設定 FloatingActionButton 的點選事件,具體如下:

先來一張效果圖,具體如下:

Material Design元件之FloatingActionButton

可知 FloatingActionButton 會自動給 Snackbar 留出位置,避免 Snackbar 彈出時遮擋 FloatingActionButton,因為在 FloatingActionButton 内部已經實作了使用 Snackbar 對應的 Behavior,CoordinatorLayout 會根據對應的 Behavior 的具體表現自動調整子 View 的位置,這裡當然是 FloatingActionButton 的位置,可以試一試将根布局設定為 RelativeLayout 等,當然,此時 Snackbar 彈出時會遮擋 FloatingActionButton,顧名思義 CoordinatorLayout 就是協調布局,關于 Behavior 這部分留到後面整理。

可以選擇關注微信公衆号:jzman-blog 擷取最新更新,一起交流學習!

Material Design元件之FloatingActionButton