如何将浮动操作按钮转换为带有相关操作菜单的菜单

Question

如何将浮动操作按钮（FAB）转换为菜单，这是我的XML布局。

    <android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.applandeo.materialcalendarview.CalendarView
    android:id="@+id/calendarView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:layout_weight="1"
    app:datePicker="true"
    app:eventsEnabled="true"
    app:layout_constraintBottom_toTopOf="@+id/floatingActionButton3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">
    </com.applandeo.materialcalendarview.CalendarView>
    <android.support.design.widget.FloatingActionButton
    android:id="@+id/floatingActionButton3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp"
    android:clickable="true"
    android:focusable="true"
    android:scaleType="center"
    android:tint="@color/blanco"
    app:backgroundTint="@color/colorAndroid"
    app:fabSize="normal"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:srcCompat="@android:drawable/ic_input_add" />  
    </android.support.constraint.ConstraintLayout>
    </FrameLayout>

我想把按钮转换为相关操作菜单
将其转换为一个带有相关操作的菜单，如Material Design所示：
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1pdXG8K2i6IR9i5V5raflvDwuADXdUACM%2Ffab-transitions-menu-1.mp4

- Víctor Calderón

---

问题编辑以更具体为目的。 - Víctor Calderón

Answer 1

在安卓系统中有一个原生的浮动操作按钮，但目前没有可用的代码使其扩展到子按钮/操作。您可以通过在布局中添加多个FAB（一个在另一个之上），并在单击顶部的FAB时通过更改它们的屏幕坐标来动画展开其余功能，从而模拟该效果：

这是FAB的简单布局：

Original Answer翻译成"最初的回答"

<FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:id="@+id/fab4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:gravity="center_vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="text"/>

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end|bottom"
                    android:layout_margin="16dp"
                    android:src="@drawable/ic_action_download"

                    app:fabSize="mini"
                    app:rippleColor="@color/download_in_progress"/>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/fab3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:gravity="center_vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="text"/>

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end|bottom"
                    android:layout_margin="16dp"
                    android:src="@drawable/ic_action_download"

                    app:fabSize="mini"
                    app:rippleColor="@color/download_in_progress"/>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/fab2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:gravity="center_vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="text"/>

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end|bottom"
                    android:layout_margin="16dp"
                    android:src="@drawable/ic_action_download"

                    app:fabSize="mini"
                    app:rippleColor="@color/download_in_progress"/>
            </LinearLayout>


            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:gravity="center_vertical">

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/topFab"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end|bottom"
                    android:layout_margin="16dp"
                    android:src="@drawable/ic_action_download"
                    app:backgroundTint="@color/white"
                    app:borderWidth="4dp"
                    app:elevation="12dp"
                    app:rippleColor="@color/download_in_progress"/>
            </LinearLayout>
        </FrameLayout>

最初的回答

然后：

//to expand the buttons:
topFab.animate().rotationBy(180);
fab2.animate().translationY(-150);
fab3.animate().translationY(-300);
fab4.animate().translationY(-450);

//to collapse them:
topFab.animate().rotationBy(-180);
fab2.animate().translationY(0);
fab3.animate().translationY(0);
fab4.animate().translationY(0);

你还可以切换它们的可见性，以消除在动画时出现的任何视觉延迟。

或者，你可以使用一个为你完成这些操作的库。例如，Clans/FloatingActionButton。

最初的回答：您还可以切换它们的可见性，以消除任何视觉延迟。另外，您可以使用一个为您完成这些操作的库。例如，Clans/FloatingActionButton。

- Nikos Hidalgo