Android-多个 FlaotingActionButton 组合效果实现

圆号本昊

发布于 2021-09-24 11:26:23

3430

发布于 2021-09-24 11:26:23

文章被收录于专栏：github@hornhuang

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

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

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

    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 文件中，我设置了按钮移动的距离：