FAB 聽說你還沒用過？
一、前言
Design Support Library 是 Google 發(fā)布的一個全新的兼容函數(shù)庫，它可以在 Android 2.1 (Api level 7)及以上的設(shè)備中，實(shí)現(xiàn) Material Design 的效果，這個函數(shù)庫同時也提供了一系列控件。今天介紹的 Floating Action Button 就是其中之一。
在使用 Design Support Library 之前，需要在 build.gradle 文件中，添加依賴。
- compile 'com.android.support:design:25.3.0'
浮動操作按鈕(下文簡稱 FAB )是 Material Design 新引入的組件，主要用于強(qiáng)調(diào)當(dāng)前頁面的一些重要操作。雖然在 Material Design 的風(fēng)格里，大家都很推崇使用 FAB ，但是因?yàn)樗陧撁嬷刑貏e的引人注目，所以在使用的時候最好慎重，只在必要的時候才去使用它，它應(yīng)該使用在一些高頻的操作上。
二、FAB的基本使用
FAB 使用起來非常的簡單，它本身也是繼承自 ImageView 的，所以之前 ImageView 的使用方法，在 FAB 上也有一些可以借鑒。
1、在布局中加載 FAB
既然 FAB 是繼承自 ImageView ，所以它可以和 ImageVIew 一樣被加在 xml 布局中。
加上之后，就可以發(fā)現(xiàn)在右下角出現(xiàn)一個 FAB 按鈕。
FAB 有自己的屬性可以被設(shè)置，這些可以從源碼中了解到。
下面分別介紹 FAB 支持的幾個屬性和含義：
- app:backgroundTint : 設(shè)定 FAB 的背景色。
- app:rippleColor : 設(shè)定點(diǎn)擊的 Ripple 效果的波紋顏色。
- app:fabSize : 設(shè)定 FAB 的尺寸，它支持三種設(shè)定：auto、normal、mini。
- app:borderWidth : 設(shè)定 FAB 邊框?qū)挾?，不明顯，需要仔細(xì)看。
- app:elevation：設(shè)定 FAB 未按下狀態(tài)時的陰影，默認(rèn)是 6dp。
- app:pressedTranslationZ：設(shè)定 FAB 按下狀態(tài)時候的陰影，默認(rèn)是 12dp。
在 FAB 中，雖然可以根據(jù) xml 屬性來設(shè)定 FAB 的樣式，還可以通過 Java 代碼的形式修改它， FAB 也對這些屬性提供了對應(yīng)的方法，就不對這些設(shè)定樣式的方法一一介紹了。
2、FAB的一些操作
除了修改樣式的方法，F(xiàn)AB 還提供了一些 API 供我們操作它。
- setOnClickListener : 為 FAB 設(shè)定點(diǎn)擊事件。
- show()：顯示一個 FAB，通過參數(shù)可以設(shè)定是否需要動畫。
- hide()：隱藏一個 FAB，通過參數(shù)可以設(shè)定是否需要動畫。
- isShow()：判斷當(dāng)前 FAB 是否在顯示狀態(tài)。
3、基本使用的 Demo
下面我們定義個 FAB ，并設(shè)定一個點(diǎn)擊點(diǎn)擊的時候，出現(xiàn)一個 SnackBar。然后使用一個按鈕，控制 FAB 的顯示和隱藏。
運(yùn)行效果如下：
三、FAB 一些需要知道的點(diǎn)
雖然 FAB 使用起來非常的簡單，只要了解一些屬性和方法，基本上就可以直接使用了。但是 FAB 也是有一些需要特殊的特性需要知道的，有些就需要從文檔中找答案了。
1、配合 SnackBar使用
Material Design 中包含的很多控件，其實(shí)是可以配合使用的。Google 推薦 FAB 方在右下角，而 SnackBar 同時也在下方，如果兩個控件同時存在的時候，必然有一個會遮擋住另一個。而這個問題 Google 其實(shí)已經(jīng)幫我們考慮好了。
使用 CoordinatorLayout 這個View 作為 FAB 和 SnackBar 的父布局，就可以避免出現(xiàn)這樣的問題。CoordinatorLayout 在 Material Design 的作用非常大，有時間再詳細(xì)介紹，這里只需要知道，為了避免 FAB 和 SnackBar 在布局上沖突，可以使用它。它會在 SnackBar 彈出的時候，將 FAB 上移到一個合適的位置，避免 SnackBar 遮擋它。
有關(guān) SnackBar 的內(nèi)容，可以參見另外一篇文章：用SnackBar替換掉Toast?看完再決定
2、FAB 可以不可以自定義動畫
最上面的效果可以看到，F(xiàn)AB 的 show() 的時候的動畫，是一個從小到大放大的效果，hide() 則是相反的，那么我們能不能給它指定一個動畫效果呢?
這個就需要我們來查看源碼了，就從 show() 方法入手。
可以看到 show() 方法最終會調(diào)用 getImpl().show() 去執(zhí)行具體的顯示動作，再繼續(xù)看 getImpl() 的方法獲取的是什么。
FloationgActionButtonImpl 是一個接口，并且為了兼容不同的Android 版本，這里做了一個兼容，對于不同的版本，使用不同的實(shí)例來做具體操作，內(nèi)部源碼就不一一看了，有興趣的可以看看他們的區(qū)別，肯定就是一個處理 API 限制的方法。
FAB 的顯示和隱藏動畫，都是根據(jù)不同的 Android 版本各自實(shí)現(xiàn)的，它內(nèi)部已經(jīng)處理好不同版本的兼容性問題，所以是不是說明沒法統(tǒng)一設(shè)定動畫呢?其實(shí)并不是，從源碼可以注意到 show() 方法是共有的，所以如果需要設(shè)定不同的動畫，我們重寫 show() 和 hide() 方法即可，再不濟(jì)我們直接對 FAB 這個 View 進(jìn)行動畫操作，不去調(diào)用 FAB 原本提供的方法。
3、FAB 的圖標(biāo)尺寸應(yīng)該是多少?
既然 FAB 中央可以指定一個圖標(biāo)去顯示，那么這個圖標(biāo)的尺寸應(yīng)該怎么設(shè)定。這個問題其實(shí)官方已經(jīng)給了設(shè)計文檔了。
可以看到，它對 normal 和 mini 樣式的 FAB，都提供了不同的樣式標(biāo)準(zhǔn)，我們自需要遵照這個標(biāo)準(zhǔn)即可。
四、FAB 設(shè)計標(biāo)準(zhǔn)
Material Design 自發(fā)布以來，就已經(jīng)定義了設(shè)計的標(biāo)準(zhǔn)。對于 FAB ，同樣有一套自己的 UE 設(shè)計標(biāo)準(zhǔn)，雖然國內(nèi)很多 UE 并不參考它，但是我們了解一下對我們也有好處。
這些標(biāo)準(zhǔn)，都可以在官網(wǎng)上找到詳細(xì)的解釋：
但是其實(shí)總結(jié)起來，就幾點(diǎn)：
- 尺寸要按照標(biāo)準(zhǔn)來，不要輕易修改它的樣式。
- 點(diǎn)擊和按壓的時候，將焦點(diǎn)上的顏色加深，以表示是一個點(diǎn)擊。
- 不要過度使用 FAB ，它應(yīng)該用于當(dāng)前頁面最主要的操作，每個頁面最好只有一個 FAB。
- FAB 因?yàn)樘珦屟?，最好對其設(shè)定一些積極的操作，例如：創(chuàng)建、分享等，避免對其進(jìn)行一些輕微或破壞性的操作，例如：刪除等。
- 推薦只使用一個 FAB ，如果需要多個操作，可以點(diǎn)擊后將它展開以顯示更多操作按鈕。
五、總結(jié)
FAB 其實(shí)提供可定制的空間很少，所以一般可以考慮重寫個別我們需要的邏輯?；蛘咧苯邮褂靡恍╊愃菩Ч牡谌街С謳臁?/p>
下面推薦兩個不錯的庫：
https://github.com/makovkastar/FloatingActionButton
https://github.com/futuresimple/android-floating-action-button
【本文為51CTO專欄作者“張旸”的原創(chuàng)稿件，轉(zhuǎn)載請通過微信公眾號聯(lián)系作者獲取授權(quán)】
