Android：垂直扩展浮动操作按钮

Question

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

Answer 1

实现这一点的最快和最简单的方法是使用Animate（）. transationY（int x）函数，您可以使用函数Animate（）. transationY（int x）垂直对Floating Action按钮进行动画处理

如果您正在寻找kotlin中的代码，您可以在我的github repo动画-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>

现在跳到＜code＞main活动。javacode您可以使用两个函数来扩展晶圆厂和折叠晶圆厂，如下所示：

 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上添加click listener。

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

这不是很简单吗？您可以在我的github存储库中查看完整的java代码。如果您正在寻找kotlin中的代码，您可以查看我的其他github repo动画制作工厂。

Answer 2

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

这是一个关于如何做的很好的教程。

Answer 3

目前，快速简便地实现这一点的唯一方法是使用第三方库。

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

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

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

希望对你有帮助。

更新

1)快速浮动按钮(链接)

2）浮动动作按钮（链接）

3）浮动动作按钮（链接）

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

谢谢。