一个布局中的两个浮动按钮

Question

我正在使用材料设计创建一个简单的应用程序。我想在一个布局中获得两个浮动按钮。

我想让它们在显示小吃店时一起移动。

但我无法正确执行此操作，因为 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> 

Answer 1

我尝试对您的代码进行一些调整以使其正常工作，在此过程中我对锚的工作有了一些了解。

首先要注意的是 CoordinatorLayout 根据视图的边框对齐其子视图。因此，在元素之间添加边距根本无济于事。它在布局中看起来不错，但在运动中会放弃。

因此，添加虚拟视图有助于正确锚定而不会出现问题。此外，您需要适当地设置layout_gravity 属性。

只需用这个 sn-p 替换布局中两个 FloatingActionButtons 的代码：

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

Answer 2

在支持库版本 24.2.0 中，CoordinatorLayout 有一个新属性 layout_dodgeInsetEdges，您可以将其添加到包含两个 FAB 的 LinearLayout（或任何其他视图）中，并且 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> 

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

Answer 4

使用正确的响应代码将无法在 5.0 以下的 android 上运行，因为上层 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>