Две плавающие кнопки в одном макете

Я создаю простое приложение, используя дизайн материалов. Я хочу получить две плавающие кнопки внутри одного макета.

Пример документов по дизайну материалов

И я хочу, чтобы они двигались вместе, когда отображается закусочная.

Но я не могу сделать это правильно, потому что layout_margin не работает.

Это скриншоты приложения и разметки. Можете вы помочь мне?

Перед показом закусочнойПосле показа закусочной

<android.support.design.widget.CoordinatorLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/addProductsContainer"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">

  <android.support.design.widget.AppBarLayout
    android:id="@+id/addProductsAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.TabLayout
      android:id="@+id/addProductsTabs"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" />

  </android.support.design.widget.AppBarLayout>

  <android.support.v4.view.ViewPager
    android:id="@+id/addProductsViewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

  <android.support.design.widget.FloatingActionButton
    android:id="@+id/searchFab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/addProductFab"
    app:layout_anchorGravity="top|right|end"
    android:layout_marginBottom="80dp"
    android:layout_marginRight="16dp"
    android:src="@drawable/ic_search_white_36dp" />

</android.support.design.widget.CoordinatorLayout>

android material-design floating-action-button
person Egorikas    schedule 20.07.2015    source источник
comment
Можете ли вы создать новый относительный макет, поместить обе кнопки внутри этого нового макета и установить тег так, чтобы одна кнопка располагалась под другой?   -  person TooManyEduardos    schedule 20.07.2015

Ответы (4)


arrow_upward
34
arrow_downward

Я попробовал некоторые настройки вашего кода, чтобы заставить его работать, и в процессе я получил некоторое представление о работе якорей.

Первое, на что следует обратить внимание, это то, что CoordinatorLayout выравнивает свои дочерние представления на основе границ представления. Таким образом, добавление отступа между элементами совсем не поможет в движении. Он будет хорошо смотреться в макете, но сдастся в движении.

Таким образом, добавление фиктивного представления помогает правильно привязать без проблем. Кроме того, вам необходимо правильно установить атрибуты layout_gravity.

Просто замените код двух кнопок FloatingActionButton в макете следующим фрагментом:

<android.support.design.widget.FloatingActionButton
  android:id="@+id/addProductFab"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="end|bottom"
  android:layout_margin="16dp"
  android:src="@drawable/ic_add_white_36dp" />
<View
  android:id="@+id/dummy"
  android:layout_width="1dp"
  android:layout_height="16dp"
  app:layout_anchor="@id/addProductFab"
  app:layout_anchorGravity="top|right|end" />
<android.support.design.widget.FloatingActionButton
  android:id="@+id/searchFab"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="end|top"
  android:layout_margin="16dp"
  android:src="@drawable/ic_search_white_36dp"
  app:layout_anchor="@id/dummy"
  app:layout_anchorGravity="top|right|end" />
person Awanish Raj    schedule 20.07.2015
comment
Спасибо, как привязать эти две фабрики, чтобы они реагировали на такие виды, как закусочная и нижний лист? - person ReZa; 21.04.2016
comment
Большое спасибо! Я боролся часами, пока не нашел ваш ответ. Это делает трюк! - person Mavamaarten; 07.05.2016
comment
Хорошо работает на Lollipop, но не на Kit-Kat, кнопки слишком далеко, а верхняя не выровнена по правому краю. Любые идеи? - person Nicolás Arias; 05.09.2016

arrow_upward
9
arrow_downward

В библиотеке поддержки версии 24.2.0 CoordinatorLayout имеет новый атрибут layout_dodgeInsetEdges, который вы можете добавить в LinearLayout (или любое другое представление, если на то пошло), содержащее ваши два FAB, и Snackbar переместит все это представление в сторону!

Так, например:

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:fitsSystemWindows="true"
        tools:context=".Activities.MainActivity">

    <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_gravity="bottom|right"
            android:layout_marginRight="@dimen/fab_margin"
            android:layout_marginBottom="@dimen/fab_margin"
            app:layout_dodgeInsetEdges="bottom"> //THIS IS THE LINE THAT MATTERS

        <android.support.design.widget.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/fab_margin"
                android:src="@drawable/icon"
                android:tint="@color/colorTextAndIcons"
                app:backgroundTint="@color/colorPrimary"/>

        <android.support.design.widget.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/fab_margin"
                android:src="@drawable/icon"
                android:tint="@color/colorTextAndIcons"
                app:backgroundTint="@color/colorPrimary"/>
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>
person vanshg    schedule 26.08.2016
comment
это должен быть правильный ответ, это самое простое решение. - person Amos; 14.11.2018
comment
Пожалуйста, взгляните на новые пространства имен, так как они изменились на androidx.coordinatorlayout.widget.CoordinatorLayout и com.google.android.material.floatingactionbutton.FloatingActionButton. - person russellhoff; 26.05.2020

arrow_upward
1
arrow_downward

Мне не понравилось добавлять представление только для того, чтобы добавить отступы, вместо этого я обернул Fab в FrameLayout:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_directions"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/fab_margin"
        android:src="@android:drawable/ic_menu_directions"
        android:visibility="gone"/>

    <!-- We need the frame layout to set the margin between FABs-->
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|end"
        app:layout_anchor="@id/fab_directions"
        app:layout_anchorGravity="top|end">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/fab_margin"
            android:layout_marginEnd="@dimen/fab_margin"
            android:src="@android:drawable/ic_menu_search"
            app:elevation="@dimen/fab_elevation"/>
    </FrameLayout>

</android.support.design.widget.CoordinatorLayout>
person JavierSP1209    schedule 16.08.2016

arrow_upward
0
arrow_downward

При правильном коде ответа не будет работать на андроиде ниже 5.0, так как сдвинется верхний ФАБ. Прежде всего, в вашем коде много дополнительных атрибутов, ниже я напишу ответ, основанный на вашем, который будет работать правильно на всех устройствах и будет легче для понимания.

<android.support.design.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"
android:padding="10dp"
android:background="#e2022068">

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_down"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:src="@android:drawable/arrow_down_float" />

<ImageView
    android:id="@+id/divider"
    android:layout_width="1dp"
    android:layout_height="40dp"
    app:layout_anchor="@id/fab_down"
    app:layout_anchorGravity="end" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_up"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end"
    android:src="@android:drawable/arrow_up_float"
    app:layout_anchor="@id/divider"
    app:layout_anchorGravity="right|end" />

 </android.support.design.widget.CoordinatorLayout>
person Shwarz Andrei    schedule 01.03.2016
comment
Почему вы использовали ImageView? - person Dawid Hyży; 28.09.2016