FloatingActionButton浮动按钮动画效果实现

我们想实现一个跟知呼功能类似的悬浮按钮，点击后会展开相应的菜单。

1.FloatingActionButton

我们先来看一张图片，认识一下什么是FloatingActionButton:

FloatingActionButton一般浮现在右下角，是Material Design的一个控件。

使用Android Studio创建的新工程中，可以引入该控件：

然后在布局文件中使用该控件：

该控件是自带阴影效果的。

我们想实现下面的这样一个功能：

点击按钮，然后展开菜单。

2.展开菜单实现思路：

1.将要显示的菜单按钮都放在与Fab同一位置，然后设置为INVISIBLE不可见。

2.点击Fab的时候，将菜单按钮设置为可见，并且动过动画平移到各个位置。

3.在此点击Fab或者点击菜单之后，将菜单折叠回来，并设置为不可见。

3.展开菜单实现代码：

1.新建一个类:FloatingActionButtonContainerView，继承FrameLayout

我们先定义一些成员变量（下面的代码遇到不懂的再回来看看）：

重写onMeasure()方法：

重写onLayout方法

在这个方法中，我们要做的是为子view设置布局位置：

在onLayout()方法中，我们布置了ctrlButton的显示位置，设置在右边缘的中部。

ctrlButton的点击事件：

我们设置一个flag来表示菜单的折叠状态，然后点击ctrlButton的时候做出相应的动画（展开菜单或者折叠菜单）。

平移动画：

我们这里使用的属性动画，也比较简单，大家可以学习学习属性动画。

为了理解这个动画，我们要结合一张图：

通过length与angle计算出子view的位置，然后通过动画属性进行设置x与y的偏移量就好。

这样就可以实现点击ctrlButton然后展开菜单了。

折叠动画：

旋转动画：

缩放动画：

点击子view执行子view的点击事件，并且折叠菜单。

我们不能够重写子view的onClickListener()，因为我们可以在Activity中写点击事件，如果在这里写了，就会覆盖点击事件了。所以我们用触摸监听来间接实现。
注意，这部分并不是必须这样写，有很多变通的方式，不必拘泥在这样的实现上。

完整的代码如下：

参考链接

---

• 仿知乎FloatingActionButton浮动按钮动画效果实现（一）
• FloatingActionButton展开按钮