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

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

И я хочу, чтобы они двигались к ним, когда показывали закусочную. Но я не могу сделать это неправильно, правильно, потому что 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>

Ответы

Ответ 1

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

Прежде всего следует отметить, что 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" />

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

Ответ 2

В библиотеке поддержки 24.2.0 у координатораLayout есть новый атрибут 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>

Ответ 3

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

Ответ 4

Если правильный код ответа не будет работать в 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>

Ответ 5

решение, помеченное как правое, - это сделанная настройка, которая будет выдаваться для разных устройств с разным разрешением экрана, поэтому правильное решение будет fooobar.com/info/176892/...