原文首發于微信公衆号:躬行之(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 的點選事件,具體如下:
先來一張效果圖,具體如下:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5iYlR2NiJ2NzMTZ0QTOzgjN4MGN4UmN5U2NxETMhZjMm9CX0IzLcRDMwIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL0M3Lc9CX6MHc0RHaiojIsJye.png)
可知 FloatingActionButton 會自動給 Snackbar 留出位置,避免 Snackbar 彈出時遮擋 FloatingActionButton,因為在 FloatingActionButton 内部已經實作了使用 Snackbar 對應的 Behavior,CoordinatorLayout 會根據對應的 Behavior 的具體表現自動調整子 View 的位置,這裡當然是 FloatingActionButton 的位置,可以試一試将根布局設定為 RelativeLayout 等,當然,此時 Snackbar 彈出時會遮擋 FloatingActionButton,顧名思義 CoordinatorLayout 就是協調布局,關于 Behavior 這部分留到後面整理。
可以選擇關注微信公衆号:jzman-blog 擷取最新更新,一起交流學習!