一、概述
首先看下繼承關(guān)系
FloatingActionButton繼承關(guān)系.png
二挺物、基礎(chǔ)使用
本質(zhì)是一個(gè)ImageButton懒浮，只是比ImageButton多了點(diǎn)屬性，具體多的屬性請(qǐng)看下面介紹：
- 1.adnroid：src FAB中顯示在中間的圖片背景识藤；
- 2.app:backgroundTint 設(shè)置FAB的整體背景砚著，如果沒有設(shè)置，默認(rèn)會(huì)取theme中的colorAccent作為背景色痴昧；
- 3.app:fabSize 設(shè)置FAB的大小稽穆，可選的值有三個(gè)；
- 1 .mini
- 2 .normal
- 3 .auto：mini和normal都設(shè)置了固定的大小赶撰，具體的看下面的源碼舌镶；而auto屬性會(huì)根據(jù)屏幕原有的寬度來動(dòng)態(tài)設(shè)置，在小屏幕上會(huì)使用mini豪娜，在大屏幕上使用normal餐胀，我們也可以通過layout_width和layout_height指定其大小瘤载；具體的大小屏幕標(biāo)準(zhǔn)看源碼中以470dp為分界線骂澄；
/**
* The switch point for the largest screen edge where SIZE_AUTO switches from mini to normal.
*/
private static final int AUTO_MINI_LARGEST_SCREEN_WIDTH = 470;
private int getSizeDimension(@Size final int size) {
final Resources res = getResources();
switch (size) {
case SIZE_AUTO:
// If we're set to auto, grab the size from resources and refresh
final int width = ConfigurationHelper.getScreenWidthDp(res);
final int height = ConfigurationHelper.getScreenHeightDp(res);
return Math.max(width, height) < AUTO_MINI_LARGEST_SCREEN_WIDTH
? getSizeDimension(SIZE_MINI)
: getSizeDimension(SIZE_NORMAL);
case SIZE_MINI:
return res.getDimensionPixelSize(R.dimen.design_fab_size_mini);
case SIZE_NORMAL:
default:
return res.getDimensionPixelSize(R.dimen.design_fab_size_normal);
}
}
- 4.app:elevation FAB在z軸方向的距離，也就是海拔深度惕虑，實(shí)際效果就是陰影效果坟冲；
- 5.app:borderWidth Fab邊界的寬度磨镶，邊界的顏色會(huì)比背景顏色稍淡，如下圖所示健提；
- 6.app:pressedTranslationZ 點(diǎn)擊Fab在Z軸上的變化值琳猫；
- 7.app:rippleColor 點(diǎn)擊Fab時(shí)出現(xiàn)水波紋擴(kuò)散的效果;
- 8.app:layout_anchor 設(shè)置錨點(diǎn)，也就是設(shè)置相對(duì)那個(gè)控件id來進(jìn)行變化私痹；
- 9.app:layout_anchorGravity 設(shè)置在錨點(diǎn)上的相對(duì)位置脐嫂；
- 10.app:useCompatPadding 兼容padding可用；
圖解說明.png
具體在xml中的使用方式如下：
<android.support.design.widget.FloatingActionButton
android:id="@+id/activity_float_action_button_fab"
app:elevation="10dp"
app:backgroundTint="@color/colorPrimary"
app:fabSize="normal"
app:borderWidth="10dp"
android:layout_margin="12dp"
app:layout_anchorGravity="bottom|end"
android:src="@mipmap/ic_launcher_round"
android:layout_width="wrap_content"
app:layout_anchor="@id/fab_appbar"
android:layout_height="wrap_content" />
三紊遵、Fab的監(jiān)聽回調(diào)
具體使用看下面代碼:
/**
* 在代碼中動(dòng)態(tài)設(shè)置Fab的隱藏和顯示账千，并且能夠
* 監(jiān)聽Fab的隱藏和顯示的狀態(tài)變化；
*/
mFab.show(new FloatingActionButton.OnVisibilityChangedListener() {
@Override
public void onShown(FloatingActionButton fab) {
super.onShown(fab);
}
});
mFab.hide(new FloatingActionButton.OnVisibilityChangedListener() {
@Override
public void onHidden(FloatingActionButton fab) {
super.onHidden(fab);
}
});
mFab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
四暗膜、使用時(shí)注意事項(xiàng)
在使用Fab與BottomSheet聯(lián)合使用時(shí)匀奏，發(fā)現(xiàn)如果使用include標(biāo)簽將bottomSheet的菜單布局引入，無法設(shè)置給include標(biāo)簽設(shè)置id学搜，一旦設(shè)置id就會(huì)crash娃善，要想正常使用，直接將菜單布局寫出瑞佩，不是將其引入聚磺；
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.androidwanga.serenitynanian.serenityproject.BottomDialogActivity">
<!--底部菜單布局-->
<!--LinearLayout底部布局菜單 include布局中不能添加id 否則就會(huì)報(bào)setLayoutParameter異常-->
<include layout="@layout/layout_bottom_sheet_linear" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher_round"
app:backgroundTint="@color/colorPrimary"
app:borderWidth="10dp"
app:layout_anchorGravity="end"
app:elevation="10dp"
app:fabSize="auto"
app:pressedTranslationZ="10dp" />
</android.support.design.widget.CoordinatorLayout>
