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

Posted 2023-02-22

【中文标题】Android：垂直展开的浮动操作按钮

【英文标题】：Android: Vertically expanded Floating Action Button

【发布时间】：2015-09-15 15:58:26

【问题描述】：

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

【问题讨论】：

看看我的帖子，你会发现自己很容易找到解决方案***.com/a/36779809/2163045

检查这个：***.com/a/40647621/4961126

Android Design Support Library Fab menu的可能重复

【参考方案1】：

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

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

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

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

希望对你有所帮助。

更新

1) 快速浮动按钮 (link)

2) 浮动操作按钮 (link)

3) 浮动操作按钮 (link)

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

谢谢。

【讨论】：

@Priya 提供的答案和链接对您有帮助吗？

@Priya 太好了！如果您需要任何定制帮助，请告诉我。如果您的问题得到解决，请接受答案或点赞。

@Priya 如果您从中得到帮助，请接受答案。这是在 SO 中说“谢谢”的方式。

如何将这个项目导入eclipse？

【参考方案2】：

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

这是a good tutorial on how to do it。

【讨论】：

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

【参考方案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_
android:layout_
tools:context=".MainActivity">

<com.google.android.material.appbar.AppBarLayout
    android:layout_
    android:layout_
    android:theme="@style/AppTheme.AppBarOverlay">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_
        android:layout_
        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_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_
    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。

【讨论】：

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