Android-多个 FlaotingActionButton 组合效果实现

我们在实际应用过程中，经常需要实现点击 FlaotingActionButton 弹出多个 FlaotingActionButton 的效果，除了三方库的使用之外，这里我在推荐一种新的思路

---

首先我们在 xml 文件中添加五个 FlaotingActionButton 按钮，我的思路是：五个按钮相互叠加，只显示最上层的按钮：

代码语言：javascript复制

---

然后我们在设置动画，通过点击调用动画实现展开与收回效果

代码语言：javascript复制

    private boolean isFABOpen = true;

    private void showFABMenu(){
        isFABOpen=true;
        fab1.animate().translationY(-getResources().getDimension(R.dimen.standard_65)).setDuration(100);
        fab2.animate().translationY(-getResources().getDimension(R.dimen.standard_125)).setDuration(200);
        fab3.animate().translationY(-getResources().getDimension(R.dimen.standard_185)).setDuration(300);
        fab4.animate().translationY(-getResources().getDimension(R.dimen.standard_225)).setDuration(400);
    }

    private void closeFABMenu(){
        isFABOpen=false;
        fab1.animate().translationY(0).setDuration(150);
        fab2.animate().translationY(0).setDuration(300);
        fab3.animate().translationY(0).setDuration(450);
        fab4.animate().translationY(0).setDuration(600);
    }

---

在 dimen 文件中，我设置了按钮移动的距离：

代码语言：javascript复制

    65dp
    125dp
    185dp
    245dp

---

到此为止，所有功能就实现了：

具体效果大家可以看这个 Demo ：点击跳转 https://github.com/FishInWater-1999/AndroidClockDemo

xml 动画

0 人点赞