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

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

Пример документации материалов

И я хочу, чтобы они двигались, когда показывали снек-бар. Но я не могу сделать это неправильно, правильно, потому что layout_margin не работает. Это скриншот приложения и разметки. Не могли бы вы помочь мне?

Перед тем, как показать закусочнуюПосле показа закуски

<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> 

Solutions Collecting From Web of "Две плавающие кнопки в одном макете"

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

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

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

Просто замените код для 2 FAB в вашем макете с помощью этого фрагмента:

 <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" /> 1 <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" /> 

Надеюсь это поможет! Примите этот ответ, если он работает. 🙂

Мне не понравилось добавлять представление только для добавления дополнения, вместо этого я завернул 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> 

В библиотеке поддержки версии 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> 

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

 <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> 1 <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> 

Решение, помеченное как правое, – это настройка, которая будет выдаваться для разных устройств с разным разрешением экрана, поэтому правильным решением будет https://stackoverflow.com/a/33900363/5740236