android - 一个布局中的两个 float 按钮

Question

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

我想让它们在显示 snackbar 时一起移动。

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

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

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

因此，添加虚拟 View 有助于正确锚定而不会出现问题。此外，您需要适本地设置 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" />