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存储库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存储库animating-FAB。

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

3 个答案: