四、FloatingActoinButton
2017-06-01 本文已影响76人
Serenity那年
一、概述
首先看下继承关系
FloatingActionButton继承关系.png
二、基础使用
本质是一个ImageButton，只是比ImageButton多了点属性，具体多的属性请看下面介绍：
- 1.adnroid：src FAB中显示在中间的图片背景；
- 2.app:backgroundTint 设置FAB的整体背景，如果没有设置，默认会取theme中的colorAccent作为背景色；
- 3.app:fabSize 设置FAB的大小，可选的值有三个；
- 1 .mini
- 2 .normal
- 3 .auto：mini和normal都设置了固定的大小，具体的看下面的源码；而auto属性会根据屏幕原有的宽度来动态设置，在小屏幕上会使用mini，在大屏幕上使用normal，我们也可以通过layout_width和layout_height指定其大小；具体的大小屏幕标准看源码中以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轴方向的距离，也就是海拔深度，实际效果就是阴影效果；
- 5.app:borderWidth Fab边界的宽度，边界的颜色会比背景颜色稍淡，如下图所示；
- 6.app:pressedTranslationZ 点击Fab在Z轴上的变化值；
- 7.app:rippleColor 点击Fab时出现水波纹扩散的效果;
- 8.app:layout_anchor 设置锚点，也就是设置相对那个控件id来进行变化；
- 9.app:layout_anchorGravity 设置在锚点上的相对位置；
- 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的监听回调
具体使用看下面代码:
/**
* 在代码中动态设置Fab的隐藏和显示，并且能够
* 监听Fab的隐藏和显示的状态变化；
*/
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) {
}
});
四、使用时注意事项
在使用Fab与BottomSheet联合使用时，发现如果使用include标签将bottomSheet的菜单布局引入，无法设置给include标签设置id，一旦设置id就会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 否则就会报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>
