Android 设计支持库可扩展 float 操作按钮 (FAB) 菜单

现在 Android 设计支持库已经出来了，有谁知道如何用它实现扩展的 Fab 菜单，比如 Inbox App 上的 fab？

应该是这样的:

最佳答案

有一个更好的方法来实现动画 FAB 菜单而不使用任何库或为动画编写大量的 xml 代码。希望这对将来需要一种简单方法来实现这一点的人有所帮助。

只需使用 animate().translationY() 函数，您就可以将任何 View 向上或向下设置动画，就像我在下面的代码 check complete code in github 中所做的那样。如果您正在 kotlin 中寻找相同的代码，您可以查看 kotlin 代码仓库 Animating FAB Menu 。

首先在同一个地方定义所有的 FAB，使它们相互重叠，记住最上面的 FAB 应该是你想要点击并显示其他的。例如:

    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab3"
    android:layout_width="@dimen/standard_45"
    android:layout_height="@dimen/standard_45"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/standard_21"
    app:srcCompat="@android:drawable/ic_btn_speak_now" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab2"
    android:layout_width="@dimen/standard_45"
    android:layout_height="@dimen/standard_45"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/standard_21"
    app:srcCompat="@android:drawable/ic_menu_camera" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab1"
    android:layout_width="@dimen/standard_45"
    android:layout_height="@dimen/standard_45"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/standard_21"
    app:srcCompat="@android:drawable/ic_dialog_map" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    app:srcCompat="@android:drawable/ic_dialog_email" />

现在在您的 java 类中定义所有 FAB 并执行如下所示的单击:

 FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab1 = (FloatingActionButton) findViewById(R.id.fab1);
    fab2 = (FloatingActionButton) findViewById(R.id.fab2);
    fab3 = (FloatingActionButton) findViewById(R.id.fab3);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if(!isFABOpen){
                showFABMenu();
            }else{
                closeFABMenu();
            }
        }
    });

使用 animation().translationY() 为您的 FAB 设置动画，我更喜欢您在 DP 中使用此方法的属性，因为仅使用 int 会影响更高分辨率或更低分辨率的显示兼容性。如下所示:

 private void showFABMenu(){
    isFABOpen=true;
    fab1.animate().translationY(-getResources().getDimension(R.dimen.standard_55));
    fab2.animate().translationY(-getResources().getDimension(R.dimen.standard_105));
    fab3.animate().translationY(-getResources().getDimension(R.dimen.standard_155));
}

private void closeFABMenu(){
    isFABOpen=false;
    fab1.animate().translationY(0);
    fab2.animate().translationY(0);
    fab3.animate().translationY(0);
}

现在在 res->values->dimens.xml 中定义上述维度，如下所示:

    <dimen name="standard_55">55dp</dimen>
<dimen name="standard_105">105dp</dimen>
<dimen name="standard_155">155dp</dimen>

这就是希望这个解决方案对 future 正在寻找简单解决方案的人们有所帮助。



如果您想在 FAB 上添加标签，那么只需采用水平 LinearLayout 并将带有 textview 的 FAB 作为标签，如果发现任何问题，则为布局设置动画，您可以在 github 中查看我的示例代码，我已经处理了所有向后兼容性该示例代码中的问题。 check my sample code for FABMenu in Github

要关闭 Backpress 上的 FAB，请覆盖 onBackPress()，如下所示:

    @Override
public void onBackPressed() {
    if(!isFABOpen){
        this.super.onBackPressed();
    }else{
        closeFABMenu();
    }
}

屏幕截图也有 FAB 的标题，因为我从我的 sample app present ingithub 中获取它

关于Android 设计支持库可扩展 float 操作按钮 (FAB) 菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30839668/