悬浮操作按钮（Floating Action Button，FAB）是 Android Material Design 中的一个重要组件，它是一个圆形的浮动按钮，通常用于触发一个主要的、常用的操作。在 Material Design 中，FAB 是一个非常重要的元素，可以帮助用户快速进行一些常用的操作，同时也能够增强应用的美观度和用户体验。
FAB 的基本用法
在 Android 中，FAB 可以通过添加 FloatingActionButton 控件来实现。使用 FAB 需要在项目中添加 Material Design 支持库，在 build.gradle 文件中添加以下代码：
dependencies {
implementation 'com.google.android.material:material:1.3.0'
}然后在布局文件中添加 FAB 控件：
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="@drawable/ic_add"
app:backgroundTint="@color/colorPrimary"
app:fabSize="normal" />其中，android:src 属性指定 FAB 显示的图标，app:backgroundTint 属性指定 FAB 的背景色，app:fabSize 属性指定 FAB 的大小。通过 android:layout_gravity 属性可以指定 FAB 的位置，通常将其放在屏幕右下角。
在代码中可以通过以下方式来处理 FAB 的点击事件：
FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 处理 FAB 的点击事件
}
});FAB 的高级用法
除了基本用法之外，FAB 还有一些高级用法，可以进一步提升用户体验。
FAB 的阴影效果
在 Material Design 中，FAB 有一个阴影效果，可以让它看起来更加立体。可以通过 app:elevation 属性来设置 FAB 的阴影大小，值越大阴影越明显：
// javascriptcn.com 代码示例
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="@drawable/ic_add"
app:backgroundTint="@color/colorPrimary"
app:fabSize="normal"
app:elevation="4dp" />FAB 的滑动效果
在一些应用中，FAB 可能会遮挡住一些重要内容，这时可以使用滑动效果来让 FAB 滑出屏幕，让内容得到展示。可以通过 com.google.android.material.behavior.FloatingActionButton.Behavior 类来实现 FAB 的滑动效果：
// javascriptcn.com 代码示例
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="@drawable/ic_add"
app:backgroundTint="@color/colorPrimary"
app:fabSize="normal"
app:elevation="4dp"
app:layout_behavior="com.google.android.material.behavior.FloatingActionButton.Behavior" />FAB 的扩展效果
在一些应用中，FAB 可能需要扩展出一些子菜单来提供更多的操作选项。可以通过 com.github.clans.fab.FloatingActionMenu 库来实现 FAB 的扩展效果：
dependencies {
implementation 'com.github.clans:fab:1.6.4'
}然后在布局文件中添加 FloatingActionMenu 和 FloatingActionButton 控件：
// javascriptcn.com 代码示例
<com.github.clans.fab.FloatingActionMenu
android:id="@+id/fab_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
fab:menu_animationDelayPerItem="50"
fab:menu_backgroundColor="@android:color/transparent"
fab:menu_buttonSpacing="0dp"
fab:menu_colorNormal="@color/colorPrimary"
fab:menu_colorPressed="@color/colorPrimaryDark"
fab:menu_colorRipple="@color/colorAccent"
fab:menu_fab_size="normal"
fab:menu_icon="@drawable/ic_add"
fab:menu_labels_colorNormal="@android:color/white"
fab:menu_labels_colorPressed="@android:color/white"
fab:menu_labels_colorRipple="@android:color/white"
fab:menu_labels_cornerRadius="3dp"
fab:menu_labels_ellipsize="none"
fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
fab:menu_labels_margin="0dp"
fab:menu_labels_maxLines="-1"
fab:menu_labels_padding="8dp"
fab:menu_labels_position="left"
fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
fab:menu_labels_showShadow="true"
fab:menu_labels_singleLine="false"
fab:menu_labels_textColor="@android:color/white"
fab:menu_labels_textSize="14sp"
fab:menu_openDirection="up"
fab:menu_shadowColor="#444"
fab:menu_shadowRadius="4dp"
fab:menu_shadowXOffset="1dp"
fab:menu_shadowYOffset="3dp"
fab:menu_showShadow="true">
<com.github.clans.fab.FloatingActionButton
android:id="@+id/fab_menu_item1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_menu_item1"
fab:fab_size="mini"
fab:label_text="Menu item 1" />
<com.github.clans.fab.FloatingActionButton
android:id="@+id/fab_menu_item2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_menu_item2"
fab:fab_size="mini"
fab:label_text="Menu item 2" />
<com.github.clans.fab.FloatingActionButton
android:id="@+id/fab_menu_item3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_menu_item3"
fab:fab_size="mini"
fab:label_text="Menu item 3" />
</com.github.clans.fab.FloatingActionMenu>其中，fab:menu_icon 属性指定 FAB 显示的图标，fab:menu_colorNormal 和 fab:menu_colorPressed 属性指定 FAB 的背景色，fab:menu_labels_colorNormal 和 fab:menu_labels_colorPressed 属性指定子菜单的背景色和文字颜色，fab:menu_labels_position 属性指定子菜单的位置，fab:menu_labels_textSize 属性指定子菜单的文字大小。
在代码中可以通过以下方式来处理子菜单的点击事件：
// javascriptcn.com 代码示例
FloatingActionMenu fabMenu = findViewById(R.id.fab_menu);
FloatingActionButton fabMenuItem1 = findViewById(R.id.fab_menu_item1);
FloatingActionButton fabMenuItem2 = findViewById(R.id.fab_menu_item2);
FloatingActionButton fabMenuItem3 = findViewById(R.id.fab_menu_item3);
fabMenuItem1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 处理子菜单的点击事件
}
});
fabMenuItem2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 处理子菜单的点击事件
}
});
fabMenuItem3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 处理子菜单的点击事件
}
});总结
悬浮操作按钮是 Android Material Design 中的一个重要组件，可以帮助用户快速进行一些常用的操作，同时也能够增强应用的美观度和用户体验。除了基本用法之外，FAB 还有一些高级用法，如阴影效果、滑动效果和扩展效果，可以进一步提升用户体验。在开发应用时，可以根据实际需要使用这些高级用法，让应用更加出色。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656078a1d2f5e1655daaba11