Android 两个相邻的浮动操作按钮

材质设计文档中有一个谷歌地图示例，显示两个相邻的浮动动作按钮（实际上，一个在另一个之上）

这是怎么做到的？我有两个晶圆厂在一个协调布局，但他们结束了一个又一个，所以你只能看到一个按钮

<?xml version="1.0" encoding="utf-8"?>
<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">

    <!-- Use ThemeOverlay to make the toolbar and tablayout text
             white -->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/abl_top"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/img_photo"
            android:layout_width="match_parent"
            android:layout_height="256dp"
            android:background="#C5C5C5"/>
        <EditText
            android:id="@+id/text_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/img_baby"
            android:layout_alignParentStart="true"
            android:layout_alignParentLeft="true"
            android:hint="Name"
            android:drawableLeft="@drawable/ic_account"
            android:drawablePadding="20dp"
            android:textAppearance="?android:attr/textAppearanceSmall" />
        <TextView
            android:id="@+id/text_dob"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/text_name"
            android:layout_alignParentStart="true"
            android:layout_alignParentLeft="true"
            android:hint="Date of birth"
            android:drawableLeft="@drawable/ic_cake"
            android:drawablePadding="20dp"
            style="@android:style/Widget.Holo.Spinner"/>

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_camera"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_camera"
        android:clickable="true"
        app:fabSize="mini"
        app:layout_anchor="@id/img_photo"
        app:layout_anchorGravity="bottom|right|end"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_gallery"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_image"
        android:clickable="true"
        app:fabSize="mini"
        app:layout_anchor="@id/img_photo"
        app:layout_anchorGravity="bottom|right|end"/>

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

---

这是布局重力和锚定重力的组合，再加上发挥（锚定项目的）边距，可以让它发挥作用，看看下面我成功使用的xml：

---

两个浮动操作按钮之间有100dp的空间，如下所示：

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_gravity="top|end"
    android:layout_marginBottom="100dp"
    android:src="@android:drawable/ic_input_add"
    app:layout_anchor="@id/fab"
    app:layout_anchorGravity="top" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_delete />

这个答案有一个大问题：我们无法在两个按钮之间设置任何边距。它们粘在一起

在设计支持库v23.3.0的当前状态下，我们似乎无法在协调器布局中拥有多个行为正确的浮动操作按钮。然而，在规范中描述了这一特性，因此我们可以在将来看到它

就我所知，我发现了一个解决方法：

当你查看谷歌地图android应用程序时，你会注意到第一个（蓝色）浮动操作按钮与底部页面一起浮动，而第二个（我的位置）按钮则不在。因此，对于第二个按钮，创建一个覆盖整个布局的环绕相对布局。将其置于底部图纸布局上方：

<RelativeLayout
    android:id="@+id/wrapper"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/secondButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"/>

</RelativeLayout>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/firstButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="15dp"
    app:layout_anchor="@id/bottomSheet"
    app:layout_anchorGravity="top|right|end"/>

这是我的解决方案，只需在两个晶圆厂之间放置一个不可见的晶圆厂，并与协调布局配合良好

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/ic_check" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_invisible"
    android:layout_width="@dimen/fab_margin"
    android:layout_height="@dimen/fab_margin"
    android:layout_gravity="top|end"
    android:layout_margin="@dimen/fab_margin"
    android:visibility="invisible"
    app:layout_anchor="@id/fab"
    app:layout_anchorGravity="top" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_follow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/ic_gps_fixed_follow"
    app:backgroundTint="@android:color/white"
    app:layout_anchor="@id/fab_invisible"
    app:layout_anchorGravity="top" />


这对我有用-晶圆厂嵌入到相对布局中：

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.github.openeet.openeet.SaleDetailActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">

        </android.support.v7.widget.Toolbar>

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

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

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

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="@dimen/fab_margin"
        android:layout_gravity="end|bottom" >


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_share"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:src="@android:drawable/ic_menu_share"
            android:layout_alignParentBottom="true"
            android:layout_alignLeft="@+id/fab_print"
            android:layout_alignStart="@+id/fab_print" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_print"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:src="@android:drawable/ic_media_next"
            android:layout_above="@+id/fab_share"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginBottom="46dp" />

    </RelativeLayout>

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

尝试使用此
应用程序：useCompatPadding=“true”


三个按钮一个接一个：

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_zoom_out"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="@dimen/fab_margin"
    app:srcCompat="@drawable/ic_fab_zoom_out"
    app:elevation="0dp"
    app:useCompatPadding="true"
    />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_zoom_in"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|top"
    app:srcCompat="@drawable/ic_fab_zoom_in"
    app:elevation="0dp"
    app:useCompatPadding="true"
    app:layout_anchor="@id/fab_zoom_out"
    app:layout_anchorGravity="start"
    />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_reset_orientation"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|top"
    android:visibility="gone"
    app:srcCompat="@drawable/ic_fab_reset_orientation"
    app:elevation="0dp"
    app:useCompatPadding="true"
    app:layout_anchor="@id/fab_zoom_in"
    app:layout_anchorGravity="start"
    />





这是我的工作。关键代码是安卓：layout_margin=“65dp”
我不敢相信没有人给出正确的答案

将按钮包装在
视图组中
并应用布局
参数，使按钮随底部板材向上移动。用于上述用途
在这种情况下，我们可以使用带有XML属性的
LinearLayout
app:layout\u dodgeinsetteges=“bottom”

请注意，我们可以将此应用于
坐标布局中的任何视图

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" ... >

    <!-- We can use any ViewGroup here. LinearLayout is the
         obvious choice for the questioner's use case. -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:orientation="vertical"
        app:layout_dodgeInsetEdges="bottom">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/upperFab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/fab_margin"
            android:src="@drawable/upper_fab_icon" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/lowerFab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/lower_fab_icon" />

    </LinearLayout>

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


当按钮粘在一起时，接受的答案（在撰写本文时）只能部分起作用

我也无法使用其他提供的答案。所以我找到了一个解决办法

在两个晶圆厂之间添加一个视图-

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab2"
    android:src="@drawable/ic_delete_white_24dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top|end"
    app:layout_anchor="@id/view"/>

<View
    android:id="@+id/view"
    android:layout_width="10dp"
    android:layout_height="10dp"
    android:layout_gravity="top|end"
    app:layout_anchor="@id/fab"
    />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:src="@drawable/ic_done_white_24dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/colorPrimary"
    app:layout_anchor="@id/bar2" />


一个非常简单的方法（对我来说很管用！）就是将两个浮动按钮放在父按钮底部/末端的垂直线性布局中

    <LinearLayout
    android:layout_gravity="bottom|end"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_menu_send" />
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_menu_send" />
</LinearLayout>



只需调整浮动按钮的布局_边距属性即可获得所需的间距

另一个建议

您还可以创建垂直或水平线性布局，其中可能包含多个浮动操作按钮s，并将线性布局锚定到您的协调布局中的特定目标视图
您能给出您已有的代码吗？这使我们可以更容易地帮助您。发布您测试的代码我还没有玩过
CoordinatorLayout
，但您有什么理由不将两个晶圆厂包装在
LinearLayout
，你用自己的
LinearLayout
？@commonware包装其他东西的方式我第一次尝试时根本看不到晶圆厂。此后，我发现了高程属性，并将其应用于布局似乎很有效。我把它和PageNotFound的答案混合在一起，以获得按钮之间的正确间距。谢谢。这两个按钮之间没有空位。他们被卡住了together@JyotmanSingh尝试设置底部边距-例如
android:layout_marginBottom=“85dp”
Awesome！谢谢，我无法在两个fab按钮之间添加适当的填充，但我可以通过使用：
android:translationY=“-16dp”
对它进行一点“破解”。。在设置锚定时，仅添加边距和所有边距都不起作用..对我也很有效。我使用一个视图来分隔晶圆厂，因此从我的角度来看，它不再是一个奇怪的解决方案。应该是公认的答案，因为它正确地使用了锚的概念，而没有使用边距欺骗布局。不适用于设备方向的改变（第二个晶圆厂消失）。这应该是正确的答案，即使没有相对布局和动画，它也能完美地工作。谢谢JuanWhat's
bottomSheet
和
fabSearch
在这里？@XtremeBiker这篇文章刚刚谈到了两个为我工作的fab按钮。因为我在我的主要活动中使用了抽屉式布局，所以我必须将CoordinatorLayout作为抽屉式布局的子项。浮动按钮将是CoordinatorLayout的子项。此解决方案有效（即保留间距），即使由于打开输入面板而调整窗口的大小。使用其他解决方案时，间距丢失。它部分起作用。当我将这两行插入到封装线性布局中时，效果非常好
android:layout\u alignParentEnd=“true”android:layout\u alignParentBottom=“true”
我更喜欢这个答案，它不需要引入另一层布局
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_zoom_out"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="@dimen/fab_margin"
    app:srcCompat="@drawable/ic_fab_zoom_out"
    app:elevation="0dp"
    app:useCompatPadding="true"
    />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_zoom_in"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|top"
    app:srcCompat="@drawable/ic_fab_zoom_in"
    app:elevation="0dp"
    app:useCompatPadding="true"
    app:layout_anchor="@id/fab_zoom_out"
    app:layout_anchorGravity="start"
    />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_reset_orientation"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|top"
    android:visibility="gone"
    app:srcCompat="@drawable/ic_fab_reset_orientation"
    app:elevation="0dp"
    app:useCompatPadding="true"
    app:layout_anchor="@id/fab_zoom_in"
    app:layout_anchorGravity="start"
    />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_scrolling"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/big_activity_fab_margin"
    android:src="@drawable/ic_share_white_24dp"
    app:layout_anchor="@id/app_bar_scrolling"
    app:layout_anchorGravity="bottom|end" />
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_scrolling2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="65dp"
    android:src="@drawable/ic_share_white_24dp"
    app:layout_anchor="@id/app_bar_scrolling"
    app:layout_anchorGravity="bottom|end" />

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" ... >

    <!-- We can use any ViewGroup here. LinearLayout is the
         obvious choice for the questioner's use case. -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:orientation="vertical"
        app:layout_dodgeInsetEdges="bottom">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/upperFab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/fab_margin"
            android:src="@drawable/upper_fab_icon" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/lowerFab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/lower_fab_icon" />

    </LinearLayout>

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

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab2"
    android:src="@drawable/ic_delete_white_24dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top|end"
    app:layout_anchor="@id/view"/>

<View
    android:id="@+id/view"
    android:layout_width="10dp"
    android:layout_height="10dp"
    android:layout_gravity="top|end"
    app:layout_anchor="@id/fab"
    />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:src="@drawable/ic_done_white_24dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/colorPrimary"
    app:layout_anchor="@id/bar2" />

    <LinearLayout
    android:layout_gravity="bottom|end"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_menu_send" />
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_menu_send" />
</LinearLayout>