android——悬浮图标（FloatingActionButton）

最新推荐文章于 2025-06-20 09:47:59 发布

原创最新推荐文章于 2025-06-20 09:47:59 发布 · 7.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#FloatingActionButton #android #android开发

移动开发专栏收录该内容

50 篇文章

订阅专栏

本文介绍如何使用FloatingActionsMenu实现不同布局切换的功能，包括网格、列表和错落布局，并提供了具体的依赖添加、布局文件配置及点击事件处理等实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

添加依赖：

compile 'com.getbase:floatingactionbutton:1.9.0'

布局文件：

<com.getbase.floatingactionbutton.FloatingActionsMenu
    android:id="@+id/multiple_actions"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"

    fab:fab_labelStyle="@style/menu_labels_style"
    android:layout_marginBottom="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginEnd="16dp"
    skin:enable="true"
    >

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/action_grid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:fab_icon="@mipmap/floataction_grid"
        skin:enable="true"
        fab:fab_colorPressed="#f1f1f1"/>

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/action_list"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:fab_icon="@mipmap/floataction_list"
        skin:enable="true"
        fab:fab_colorPressed="#f1f1f1"/>
    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/action_staggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:fab_icon="@mipmap/floataction_staggle"
        skin:enable="true"
        fab:fab_colorPressed="#f1f1f1"/>

</com.getbase.floatingactionbutton.FloatingActionsMenu>

styles.xml

<style name="menu_labels_style">
    <item name="android:background">@drawable/fab_label_background</item>
    <item name="android:textColor">@color/white</item>
</style>

fab_label_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/black_semi_transparent"/>
    <padding
        android:left="16dp"
        android:top="4dp"
        android:right="16dp"
        android:bottom="4dp"/>
    <corners
        android:radius="2dp"/>
</shape>

Activity

action_grid.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        GridLayoutManager manager = new GridLayoutManager(getContext(), 2);
        xRecyclerView.setLayoutManager(manager);
        adapter = new WelfareRecycleViewAdapter(getContext(), list, 2);
        xRecyclerView.setAdapter(adapter);
        actionsMenu.collapse();
    }
});
action_list.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        LinearLayoutManager layoutManager = new LinearLayoutManager(getContext());
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        xRecyclerView.setLayoutManager(layoutManager);
        adapter = new WelfareRecycleViewAdapter(getContext(), list, 1);
        xRecyclerView.setAdapter(adapter);
        actionsMenu.collapse();
    }
});
action_staggle.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(2,
                StaggeredGridLayoutManager.VERTICAL);
        xRecyclerView.setLayoutManager(manager);
        adapter = new WelfareRecycleViewAdapter(getContext(), list, 3);
        xRecyclerView.setAdapter(adapter);
        actionsMenu.collapse();
    }
});