Android FAB 转换为菜单

Question

根据更新后的 material 准则，浮动操作按钮可以转换为如下所示的菜单：

有人可以帮我提供有关如何实现此行为的代码或链接吗？

谢谢。

Answer 1

试试这个方法

在下方添加dependencies

implementation 'com.google.android.material:material:1.2.0-alpha05'

布局文件

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.circularreveal.CircularRevealFrameLayout
        android:id="@+id/sheet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:background="@android:color/transparent"
        android:visibility="invisible"
        app:layout_behavior="@string/fab_transformation_sheet_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:background="#2196F3"
                android:padding="10dp"
                android:text="ASK Nilesh" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:background="#FF9800"
                android:padding="10dp"
                android:text="ASK Nilesh" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:background="#9C27B0"
                android:padding="10dp"
                android:text="ASK Nilesh" />

            <TextView
                android:id="@+id/tvClose"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:background="#9C27B0"
                android:padding="10dp"
                android:text="Close" />


        </LinearLayout>
    </com.google.android.material.circularreveal.CircularRevealFrameLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Activity代码

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        fabMenu.setOnClickListener {
            fabMenu.setExpanded(true)
        }
        tvClose.setOnClickListener {
            fabMenu.setExpanded(false)
        }
    }
}

您可以在此处找到完整示例 https://github.com/askNilesh/floating_action_button_menu 输出

Android FAB 转换为菜单

Android FAB transform to menu

android

menu

kotlin

material-design

floating-action-button