浮动操作按钮和白色背景

Question

事实上，我正在寻找一种模仿FAB收件箱的方法。当用户按下红色按钮时，应该出现一个不透明视图和一个菜单。因为图片更有意义，请参见以下图片。

我知道有这个很棒的库（https://github.com/futuresimple/android-floating-action-button），使用这个库，我可以显示浮动操作菜单。但我的问题是如何显示带透明度的白色背景。我找不到解决方法...

提前感谢。

- mrroboaat

Answer 1

将FloatingActionMenu放置在FrameLayout中，该布局将位于其他视图的顶部，并与父视图的宽高匹配。使用相同的边距将菜单向上提起并从右侧偏移。

将OnFloatingActionsMenuUpdateListener设置为您的悬浮操作菜单。现在在方法中切换/替换帧布局背景颜色：

 @Override
 void onMenuExpanded(){
  mFrameLayoutWrapper.setBackgroundColor(mAlpaWhite);
  }

  @Override
  void onMenuCollapsed(){
    mFrameLayoutWrapper.setBackgroundColor(Color.TRANSPARENT);
  }

- Nikola Despotoski

---

我正在Fragment中显示FloatingActionMenu，并且使用上述解决方案不会覆盖操作栏。有什么办法可以实现全屏覆盖？ - Pawan Kumar

@PawanKumar，在使用Fragment时可能会遇到问题。覆盖视图可能会在片段后面或者处于最上层。甚至FAB也会被覆盖。最好还是在Activity中使用FAB。 - Firoz Jaroli

Answer 2

我通过以下方法实现了您刚才提到的效果。我只是在浮动按钮后面添加了一个视图，并将其放置在其他布局之上，并保持视图可见性为GONE，直到菜单展开。然后我将视图可见性设置为VISIBLE。是的，我将视图的背景设置为您想要的任何不透明颜色。

我的代码

我的XML文件

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

<TextView
    android:text="Other View here"
    android:textSize="50dp"
    android:layout_centerHorizontal="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

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

<com.getbase.floatingactionbutton.FloatingActionsMenu
    android:id="@+id/multiple_actions"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    fab:fab_addButtonColorNormal="@color/white"
    fab:fab_addButtonColorPressed="@color/white_pressed"
    fab:fab_addButtonPlusIconColor="@color/half_black"
    fab:fab_labelStyle="@style/menu_labels_style"
    android:layout_marginBottom="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginEnd="16dp">

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/action_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:fab_colorNormal="@color/white"
        fab:fab_title="Action A"
        fab:fab_colorPressed="@color/white_pressed"/>

</com.getbase.floatingactionbutton.FloatingActionsMenu>

在处理浮动按钮的Activity或Fragment中

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_map);
    setFloatingButtonControls();
}

private void setFloatingButtonControls(){
    this.bckgroundDimmer = findViewById(R.id.background_dimmer);
    this.floatingActionsMenu = (FloatingActionsMenu) findViewById(R.id.multiple_actions);
    this.floatingActionsMenu.setOnFloatingActionsMenuUpdateListener(new FloatingActionsMenu.OnFloatingActionsMenuUpdateListener() {
        @Override
        public void onMenuExpanded() {
            bckgroundDimmer.setVisibility(View.VISIBLE);
        }

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

这将会产生你想要的效果。希望能对你有所帮助，它确实帮了我。:)

- Yogesh

Answer 3

使用一个带有工具栏、浮动菜单、内容和相对布局的协调布局。将相对布局的背景颜色设置为白色透明，并将其可见性设置为Gone。设置“NoActionBar”主题，并在活动中使用工具栏代替操作栏。现在，每当您打开浮动菜单时，将相对布局的可见性设置为可见，并在关闭时设置回Gone。

- Atul Shinde

Answer 4

当我添加了float right时，它确实使我的组件移动到了我想要的位置，但也得到了一个不必要的白色背景，但我可以通过在父div中引入"overflow: hidden"来解决它。这应该解决问题。

- Melvin Fernando

---

安卓平台的问题与网页有很大不同。 - jeiea