Плавающая кнопка действия и белый фон

Фактически, я ищу способ имитировать почтовый ящик FAB. Когда пользователь нажимает красную кнопку, должно появиться непрозрачное окно и меню. Поскольку изображения более значимы, см. Следующий рисунок

введите описание изображения здесь

Я знаю, что существует эта замечательная библиотека (https://github.com/futuresimple/android-floating-action-button), и с помощью этой библиотеки я могу отображать плавающее меню действий. Но моя проблема заключается в отображении белого фона (с непрозрачностью). Я не нашел решения своей проблемы ...

Спасибо заранее


person mrroboaat    schedule 16.01.2015    source источник


Ответы (4)


Поместите FloatingActionMenu внутрь FrameLayout, который будет поверх других видов и будет соответствовать родительскому по ширине и высоте. Используйте те же поля, чтобы поднять и сместить меню соответственно.

Установите OnFloatingActionsMenuUpdateListener в свое плавающее меню действий. Теперь переключите / замените цвет фона макета фрейма внутри методов:

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

  @Override
  void onMenuCollapsed(){
    mFrameLayoutWrapper.setBackgroundColor(Color.TRANSPARENT);
  }
person Nikola Despotoski    schedule 16.01.2015
comment
Я показываю FloatingActionMenu во фрагменте, и при использовании вышеуказанного решения панель действий не перекрывается. Есть идеи, как добиться наложения на весь экран? - person Pawan Kumar; 05.04.2015
comment
@PawanKumar Вы столкнетесь с проблемой во фрагменте. Либо вид наложения будет позади фрагмента, либо будет поверх всего. FAB тоже будет наложен. Лучше будет использовать FAB в Activity. - person Firoz Jaroli; 10.04.2017

Я добился упомянутого вами эффекта следующим способом. Я просто добавил представление за плавающей кнопкой и над другими макетами, и сохраняю видимость вида GONE, пока меню не будет расширено. Затем я установил видимость вида на ВИДИМОСТЬ. И да, я установил фон вида на любой непрозрачный цвет, который вы хотите.

Мой код

Мой файл 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>

And at the Activity or Fragment where the FloatingButtons are handled

@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);
        }
    });
}

Это даст желаемый эффект. Надеюсь это поможет. Это действительно помогло мне. :)

person Yogesh    schedule 05.10.2015

Возьмите один макет координатора с панелью инструментов, плавающим меню, вашим содержимым и относительным макетом. Установите цвет фона относительного макета на белый прозрачный и установите его видимость на Gone. Установите тему «NoActionBar» и используйте панель инструментов вместо панели действий в действии. Теперь всякий раз, когда вы открываете плавающее меню, установите для параметра «Видимость относительного макета» значение «Видимость», а при закрытии - «Нет».

person Atul Shinde    schedule 27.05.2016

Когда я добавил float вправо, мой компонент действительно переместился туда, где я хотел, но также получил белый фон, который не был необходим, но я мог решить эту проблему, введя overflow: hidden в родительский div. Это должно решить проблему

person Melvin Fernando    schedule 03.04.2021
comment
Вопрос в платформе Android и изрядно отличается от веб. - person jeiea; 04.04.2021