建站
咨詢
售后
建站咨詢
新聞中心
一、前言
公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出蘇州免費(fèi)做網(wǎng)站回饋大家。
Design Support Library 是 Google 發(fā)布的一個(gè)全新的兼容函數(shù)庫(kù)，它可以在 Android 2.1 (Api level 7)及以上的設(shè)備中，實(shí)現(xiàn) Material Design 的效果，這個(gè)函數(shù)庫(kù)同時(shí)也提供了一系列控件。今天介紹的 Floating Action Button 就是其中之一。
在使用 Design Support Library 之前，需要在 build.gradle 文件中，添加依賴。
- compile 'com.android.support:design:25.3.0'
浮動(dòng)操作按鈕(下文簡(jiǎn)稱 FAB )是 Material Design 新引入的組件，主要用于強(qiáng)調(diào)當(dāng)前頁面的一些重要操作。雖然在 Material Design 的風(fēng)格里，大家都很推崇使用 FAB ，但是因?yàn)樗陧撁嬷刑貏e的引人注目，所以在使用的時(shí)候最好慎重，只在必要的時(shí)候才去使用它，它應(yīng)該使用在一些高頻的操作上。
二、FAB的基本使用
FAB 使用起來非常的簡(jiǎn)單，它本身也是繼承自 ImageView 的，所以之前 ImageView 的使用方法，在 FAB 上也有一些可以借鑒。
1、在布局中加載 FAB
既然 FAB 是繼承自 ImageView ，所以它可以和 ImageVIew 一樣被加在 xml 布局中。
加上之后，就可以發(fā)現(xiàn)在右下角出現(xiàn)一個(gè) FAB 按鈕。
FAB 有自己的屬性可以被設(shè)置，這些可以從源碼中了解到。
下面分別介紹 FAB 支持的幾個(gè)屬性和含義：
- 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)時(shí)的陰影，默認(rèn)是 6dp。
- app:pressedTranslationZ：設(shè)定 FAB 按下狀態(tài)時(shí)候的陰影，默認(rèn)是 12dp。
在 FAB 中，雖然可以根據(jù) xml 屬性來設(shè)定 FAB 的樣式，還可以通過 Java 代碼的形式修改它， FAB 也對(duì)這些屬性提供了對(duì)應(yīng)的方法，就不對(duì)這些設(shè)定樣式的方法一一介紹了。
2、FAB的一些操作
除了修改樣式的方法，F(xiàn)AB 還提供了一些 API 供我們操作它。
- setOnClickListener : 為 FAB 設(shè)定點(diǎn)擊事件。
- show()：顯示一個(gè) FAB，通過參數(shù)可以設(shè)定是否需要?jiǎng)赢嫛?/li>
- hide()：隱藏一個(gè) FAB，通過參數(shù)可以設(shè)定是否需要?jiǎng)赢嫛?/li>
- isShow()：判斷當(dāng)前 FAB 是否在顯示狀態(tài)。
3、基本使用的 Demo
下面我們定義個(gè) FAB ，并設(shè)定一個(gè)點(diǎn)擊點(diǎn)擊的時(shí)候，出現(xiàn)一個(gè) SnackBar。然后使用一個(gè)按鈕，控制 FAB 的顯示和隱藏。
運(yùn)行效果如下：
三、FAB 一些需要知道的點(diǎn)
雖然 FAB 使用起來非常的簡(jiǎn)單，只要了解一些屬性和方法，基本上就可以直接使用了。但是 FAB 也是有一些需要特殊的特性需要知道的，有些就需要從文檔中找答案了。
1、配合 SnackBar使用
Material Design 中包含的很多控件，其實(shí)是可以配合使用的。Google 推薦 FAB 方在右下角，而 SnackBar 同時(shí)也在下方，如果兩個(gè)控件同時(shí)存在的時(shí)候，必然有一個(gè)會(huì)遮擋住另一個(gè)。而這個(gè)問題 Google 其實(shí)已經(jīng)幫我們考慮好了。
使用 CoordinatorLayout 這個(gè)View 作為 FAB 和 SnackBar 的父布局，就可以避免出現(xiàn)這樣的問題。CoordinatorLayout 在 Material Design 的作用非常大，有時(shí)間再詳細(xì)介紹，這里只需要知道，為了避免 FAB 和 SnackBar 在布局上沖突，可以使用它。它會(huì)在 SnackBar 彈出的時(shí)候，將 FAB 上移到一個(gè)合適的位置，避免 SnackBar 遮擋它。
有關(guān) SnackBar 的內(nèi)容，可以參見另外一篇文章：用SnackBar替換掉Toast?看完再?zèng)Q定
2、FAB 可以不可以自定義動(dòng)畫
最上面的效果可以看到，F(xiàn)AB 的 show() 的時(shí)候的動(dòng)畫，是一個(gè)從小到大放大的效果，hide() 則是相反的，那么我們能不能給它指定一個(gè)動(dòng)畫效果呢?
這個(gè)就需要我們來查看源碼了，就從 show() 方法入手。
可以看到 show() 方法最終會(huì)調(diào)用 getImpl().show() 去執(zhí)行具體的顯示動(dòng)作，再繼續(xù)看 getImpl() 的方法獲取的是什么。
FloationgActionButtonImpl 是一個(gè)接口，并且為了兼容不同的Android 版本，這里做了一個(gè)兼容，對(duì)于不同的版本，使用不同的實(shí)例來做具體操作，內(nèi)部源碼就不一一看了，有興趣的可以看看他們的區(qū)別，肯定就是一個(gè)處理 API 限制的方法。
FAB 的顯示和隱藏動(dòng)畫，都是根據(jù)不同的 Android 版本各自實(shí)現(xiàn)的，它內(nèi)部已經(jīng)處理好不同版本的兼容性問題，所以是不是說明沒法統(tǒng)一設(shè)定動(dòng)畫呢?其實(shí)并不是，從源碼可以注意到 show() 方法是共有的，所以如果需要設(shè)定不同的動(dòng)畫，我們重寫 show() 和 hide() 方法即可，再不濟(jì)我們直接對(duì) FAB 這個(gè) View 進(jìn)行動(dòng)畫操作，不去調(diào)用 FAB 原本提供的方法。
3、FAB 的圖標(biāo)尺寸應(yīng)該是多少?
既然 FAB 中央可以指定一個(gè)圖標(biāo)去顯示，那么這個(gè)圖標(biāo)的尺寸應(yīng)該怎么設(shè)定。這個(gè)問題其實(shí)官方已經(jīng)給了設(shè)計(jì)文檔了。
可以看到，它對(duì) normal 和 mini 樣式的 FAB，都提供了不同的樣式標(biāo)準(zhǔn)，我們自需要遵照這個(gè)標(biāo)準(zhǔn)即可。
四、FAB 設(shè)計(jì)標(biāo)準(zhǔn)
Material Design 自發(fā)布以來，就已經(jīng)定義了設(shè)計(jì)的標(biāo)準(zhǔn)。對(duì)于 FAB ，同樣有一套自己的 UE 設(shè)計(jì)標(biāo)準(zhǔn)，雖然國(guó)內(nèi)很多 UE 并不參考它，但是我們了解一下對(duì)我們也有好處。
這些標(biāo)準(zhǔn)，都可以在官網(wǎng)上找到詳細(xì)的解釋：
https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button
但是其實(shí)總結(jié)起來，就幾點(diǎn)：
- 尺寸要按照標(biāo)準(zhǔn)來，不要輕易修改它的樣式。
- 點(diǎn)擊和按壓的時(shí)候，將焦點(diǎn)上的顏色加深，以表示是一個(gè)點(diǎn)擊。
- 不要過度使用 FAB ，它應(yīng)該用于當(dāng)前頁面最主要的操作，每個(gè)頁面最好只有一個(gè) FAB。
- FAB 因?yàn)樘珦屟郏詈脤?duì)其設(shè)定一些積極的操作，例如：創(chuàng)建、分享等，避免對(duì)其進(jìn)行一些輕微或破壞性的操作，例如：刪除等。
- 推薦只使用一個(gè) FAB ，如果需要多個(gè)操作，可以點(diǎn)擊后將它展開以顯示更多操作按鈕。
五、總結(jié)
FAB 其實(shí)提供可定制的空間很少，所以一般可以考慮重寫個(gè)別我們需要的邏輯。或者直接使用一些類似效果的第三方支持庫(kù)。
下面推薦兩個(gè)不錯(cuò)的庫(kù)：
https://github.com/makovkastar/FloatingActionButton
https://github.com/futuresimple/android-floating-action-button
【本文為專欄作者“張旸”的原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)通過微信公眾號(hào)聯(lián)系作者獲取授權(quán)】
戳這里，看該作者更多好文
新聞標(biāo)題：FAB 聽說你還沒用過？
分享網(wǎng)址：http://m.5511xx.com/article/dhcodjj.html
