FloatingActionButton 之实现卫星菜单

最新推荐文章于 2024-08-30 07:29:34 发布

shenyu4android

最新推荐文章于 2024-08-30 07:29:34 发布

阅读量690

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Android 文章标签： fab

本文链接：https://blog.youkuaiyun.com/shenyu_njau/article/details/53696463

Android 专栏收录该内容

48 篇文章

订阅专栏

本文详细介绍如何使用FloatingActionButton/FloatingActionMenu控件实现卫星菜单效果。从引入库到核心代码实现，包括中间按钮初始化、卫星菜单构造及监听等步骤。

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

最近遇到了实现卫星菜单效果的需求，使用的是FloatingActionButton/FloatingActionMenu这个控件。总结一下使用心得。

先看大致的效果图：
这里写图片描述

Demo地址：GitHub

总结一下FAB的使用方法：
一、首先引入一下library
需要这些：这个library在Demo中有
这里写图片描述

在工程的主Module中的build.gradle文件、工程目录下的settings.gradle文件下添加：

// 在build.gradle中
compile project(':library')
// 在settings.gradle中
include ':library'

二、使用FAB/FAM
废话不说，核心代码：
1. 卫星菜单的中间按钮
1> 初始化

    /** 1.初始化一个中间按钮的View，根据自己的需要进行布局，这个布局表示的是中间按钮的样式*/
    View centerView = 
    mInflater.inflate(R.layout.item_grid_apps, null);

    /** 2.初始化一个FAB控件*/
    FloatingActionButton centerButton = 
    (FloatingActionButton) mInflater.inflate(R.layout.apps_item_centerbutton, parent, false);

2> 对中间控件进行设置

    /** 1.关联中间按钮的View和中间按钮控件*/
    centerButton.setContentView(centerView, contentParams);

    /** 2.设置中间按钮的焦点selector*/
    centerButton.setBackgroundResource(R.drawable.button_action_selector);

    /** 3.设置中间按钮的相对父控件位置
    centerButton.setPosition(FloatingActionButton.POSITION_CENTER, layoutParams);

值得注意的是，这其中的两个Params变量都是FloatingActionButton.LayoutParams类型。一个表示设置中间View的尺寸，一个表示按钮的尺寸。

2.卫星菜单的初始化
1>卫星菜单构造器的创建和设置

    /** 1.初始化卫星菜单构造器*/
    SubActionButton.Builder subBuilder = new SubActionButton.Builder(context);

    /** 2.设置卫星菜单的按钮的焦点selector*/
    subBuilder.setBackgroundDrawable(context.getResources().getDrawable(R.drawable.unfocused_background));

2>准备一些子菜单的材料
主要是根据需要编写卫星按钮的布局样式并且膨胀出来
3> 初始化卫星菜单并进行设置

    /** 一口气写下去*/
    FloatingActionMenu childMenu = new FloatingActionMenu.Builder(context)
        // 这个方法主要是要添加卫星菜单的各个按钮，这里添加了四个SubActionButton
        // build方法是用来创建SubActionButton的，其中各自关联了自己的View
        .addSubActionView(subBuilder.setContentView(Views.get(0)).build())
        .addSubActionView(subBuilder.setContentView(Views.get(1)).build())
        .addSubActionView(subBuilder.setContentView(Views.get(2)).build())
        .addSubActionView(subBuilder.setContentView(Views.get(3)).build())
        // 将卫星菜单附着在中间按钮上
        .attachTo(centerButton)
        // 设置卫星菜单的第一个按钮所在的角位置
        .setStartAngle(0)
        // 设置卫星菜单的最后一个按钮所在的角位置，这样设置为0 360表示360度均布4个按钮
        .setEndAngle(360)
        // 分方向(x和y轴)卫星按钮到中间按钮的中心的距离，就像是半径一样
        .setRadius(radiusX, radiusY)
        // 一定不能忘记这个！！
        .build();

4> 监听和其他操作
主要用来你按下了卫星菜单的卫星按钮时要做什么反应，在这里实现。

childMenu.setStateChangeListener(new FloatingActionMenu.MenuStateChangeListener() {
            @Override
            public void onMenuOpened(FloatingActionMenu menu) {
            }

            @Override
            public void onMenuClosed(FloatingActionMenu menu) {
            }
        });

好了完成了基本使用。

还可以根据自己的业务需要实现MenuAnimationHandler，可以设置自己的菜单弹出动画。

———————-不怎么华丽的分割线————————————