安卓：垂直展开的浮动操作按钮

Question

有没有一种方法可以在 Android 应用中使用 Material Design 支持库实现像这个的功能。我不想使用任何第三方库来实现这个功能。

- Anupriya

---

请查看我的帖子，在那里您可以轻松找到自己的解决方案。https://dev59.com/q18d5IYBdhLWcg3wgya4#36779809 - murt

请查看此链接：https://dev59.com/1V0a5IYBdhLWcg3wHlek#40647621 - HAXM

可能是Android Design Support Library Fab菜单的重复问题。 - HAXM

Answer 1

目前，唯一快速而便捷的方法是使用第三方库。

可以使用设计库中提供的浮动按钮完成它，并且需要大量工作。

我已经长时间使用上述库，没有任何问题。我认为最好使用第三方库快速开始并更专注于核心应用逻辑。

如果您需要，我可以给您更多库的链接。

希望这能对你有所帮助。

更新

1）Rapid Floating Button (链接)

2）Floating Action Button (链接)

3）Floating Action Button (链接)

4）Android浮动操作按钮 (链接) - 这是我正在使用的库。我需要修改和添加一些自己的方法来支持我的应用需求。

谢谢。

- Aritra Roy

---

@Priya，答案和提供的链接有帮助吗？ - Aritra Roy

@Priya 非常好！如果您需要在此方面进行任何定制帮助，请告诉我。如果您的问题已解决，请接受答案或点赞。 - Aritra Roy

@Priya 如果您从中得到了帮助，请接受答案。这是在SO上表示“谢谢”的方式。 - Aritra Roy

如何将此项目导入Eclipse？ - Patel Hiren

Answer 2

可以通过在布局中定义多个FAB，但仅显示一个（即根FAB）。然后添加逻辑以在单击根FAB时显示隐藏的FAB。为了让用户感到温暖和舒适，可以加入一些动画效果。这并不像被接受的答案所表明的那样复杂。这是一个关于如何处理它的好教程。请参见：这个链接。

- 34m0

---

我认为这是最好的答案，因为OP表示他们不想使用第三方库。 - qkzoo1978

Answer 3

最快最简单的方法是使用 animate().translationY(int x) 函数，您可以使用该函数垂直动画浮动操作按钮。

如果您正在寻找Kotlin代码，您可以在我的Github存储库中查看代码 animating-FAB。

编写代码之前，请按照以下方式设置xml，使浮动操作按钮应彼此重叠，因此只有一个FAB可见：activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</com.google.android.material.appbar.AppBarLayout>

<include layout="@layout/content_main" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    app:fabSize="mini"
    app:srcCompat="@android:drawable/ic_dialog_email" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    app:fabSize="mini"
    app:srcCompat="@android:drawable/ic_dialog_map" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:tint="@android:color/white"
    app:fabSize="mini"
    app:srcCompat="@android:drawable/ic_btn_speak_now" />

<com.google.android.material.floatingactionbutton.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"
    android:gravity="center_vertical"
    app:srcCompat="@android:drawable/ic_dialog_info" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

现在跳转到MainActivity.java代码，您可以简单地创建两个函数，以展开FAB和折叠FAB，如下所示：

 private void expendFABMenu(){
    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 collapseFABMenu(){
    isFABOpen=false;
    fab1.animate().translationY(0);
    fab2.animate().translationY(0);
    fab3.animate().translationY(0);
}

现在只需在希望展开和折叠FAB的FAB上添加点击监听器。

    fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        if(isFABExpened) {
            isFABExpened = false;
            collapseFABMenu();
        } else {
            isFABExpened = true;
            expendFABMenu();
        }
    }
});

这很简单，你可以在我的 github存储库 中检查完整的Java代码。如果你正在寻找Kotlin代码，你可以查看我的另一个github存储库animating-FAB。

- HAXM

---

很好的答案 - 只是缺少以下内容，否则fabs会跳到约束的起点 "android:layout_gravity="bottom|start" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" - kfir