android - FAB 菜单展开时淡入淡出整个屏幕

Question

我有一个 float 操作按钮菜单，它在点击时展开菜单项。如何实现与下图所示相同的行为？请帮忙。

我目前有以下布局语法:

<RelativeLayout
.
. 
/>

    <View
        android:id="@+id/detailsDimView"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:background="#F2FFFFFF"
         android:visibility="gone" />

     <!--main content-->
     <LinearLayout
     .
     .
     />
     <FloatingActionsMenu
     .
     .>
            <!--Floating actions buttons-->
     </FloatingActionsMenu

</RelativeLayout>

但主要内容不会褪色。似乎是什么问题？

Answer 1

试试这个

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">

<!-- Main Content here -- >


<!-- View to show the alpha background -->
<View
    android:id="@+id/shadowView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F2FFFFFF"
    android:visibility="gone" />

<FloatingActionsMenu
    android:id="@+id/floating_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignRight="@+id/content"
    android:layout_marginBottom="16dp"
    fab:fab_addButtonColorNormal="@color/accent"
    fab:fab_addButtonColorPressed="@color/accent"
    fab:fab_labelStyle="@style/menu_labels_style"
    fab:fab_labelsPosition="left">

    <!-- Floatingbuttons -->

   </FloatingActionsMenu>
</RelativeLayout>

在您的 Activity 中，您有一个用于展开和关闭 float 菜单的监听器。在那里你应该设置 shadowView 的可见性。

伪代码监听器

 @Override
public void onMenuExpanded() {
    mShadowView.setVisibility(View.VISIBLE);
}

@Override
public void onMenuCollapsed() {
    mShadowView.setVisibility(View.GONE);
}

如果想把shadowView设置在actionbar/toolbar上面

试试这个

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">

 <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/primary" />


<!-- Main Content here -- >

<!-- View to show the alpha background -->
<View
    android:id="@+id/shadowView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F2FFFFFF"
    android:visibility="gone" />

<FloatingActionsMenu
    android:id="@+id/floating_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignRight="@+id/content"
    android:layout_marginBottom="16dp"
    fab:fab_addButtonColorNormal="@color/accent"
    fab:fab_addButtonColorPressed="@color/accent"
    fab:fab_labelStyle="@style/menu_labels_style"
    fab:fab_labelsPosition="left">

    <!-- Floatingbuttons -->

   </FloatingActionsMenu>
</RelativeLayout>