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

Question

有没有办法使用材料设计支持库在 android 应用程序中实现类似 https://github.com/futuresimple/android-floating-action-button/raw/master/screenshots/menu.gif 的功能。我不想使用任何第三方库来实现此功能。

Answer 1

目前，快速轻松的唯一方法是使用第三方库。

是的，可以使用设计库中提供的浮动按钮来完成，这将是很多工作。

我已经使用上述库很长时间了，完全没有任何问题。在我看来，最好使用第三方库，快速上手，更多地关注核心应用逻辑。

如果你愿意，我可以给你更多图书馆的链接。

希望对你有所帮助。

更新

1) 快速浮动按钮 (link)

2) 浮动操作按钮 (link)

3) 浮动操作按钮 (link)

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

谢谢。

Answer 2

这可以通过在您的布局中定义多个 FAB 来实现，除了一个（根 FAB）之外的所有 FAB 最初都是隐藏的。然后添加逻辑以在单击根 fab 时显示隐藏的 FAB。为了给用户带来温暖的模糊感觉，请在其中添加一些动画。它并不像公认的答案似乎暗示的那么复杂。

这是a good tutorial on how to do it。

Answer 3

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

如果您正在寻找 kotlin 中的代码，您可以在我的 github repo 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 repository查看完整的java代码。如果你在 kotlin 中寻找代码，你可以查看我的另一个 github repo animating-FAB。