如何将浮动操作按钮锚定到App ToolBar，就像在指南图像中一样？

Posted 2021-04-14

我想在操作栏上找到一个浮动动作按钮，它固定在我的活动的上半部分。在指南中没有解释如何获得将浮动动作按钮锚定到操作栏的效果，以及当用户移动屏幕时使动作栏以平滑的自动效果移动。这就是我想要实现的目标，但我无法找到解释。我正在使用这种布局，默认情况下，它位于屏幕的右下方。

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.Activity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_favorites" />

    <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"
        app:srcCompat="@drawable/ic_add_white_48dp" />

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

在这里你可以看到一些非常可爱的浮动动作按钮示例，它们在一些屏幕截图中锚定在上方动作栏上：

https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button

例如：

获得这种定位和行为需要哪些变化？有一个如何实现这一目标的样本或指南？

谢谢。

答案

    <android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/activity_vertical_margin"
    android:src="@drawable/ic_add_shopping_cart_white_24dp"
    android:theme="@style/PrimaryActionButton"
    app:layout_anchor="@+id/bottom_sheet" //id of any view to anchor
    app:layout_anchorGravity="top|end" /> //position to anchor

另一答案

使用app:layout_anchor告诉FAB查看它应该锚定的位置。

使用app:layout_anchorGravity告诉FAB它应该定位在视图上（它固定的那个）。

来自https://material.io/components/android/catalog/coordinator-layout/：

锚

可以在CoordinatorLayout的子项上设置app：layout_anchor属性，以将它们附加到另一个视图。 app：layout_anchorGravity可用于指定将子项锚定到另一个视图的位置。一个很好的例子是浮动动作按钮，它固定在应用栏的右下角：

<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/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
​
  <android.support.design.widget.AppBarLayout
      android:id="@+id/app_bar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
​
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"/>
​
  </android.support.design.widget.AppBarLayout>
​
  <!-- Main content -->
​
  <android.support.design.widget.FloatingActionButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="16dp"
      android:contentDescription="@string/add_item"
      android:src="@drawable/ic_add_24dp"
      app:layout_anchor="@id/app_bar"
      app:layout_anchorGravity="bottom|right|end"/>
​
</android.support.design.widget.CoordinatorLayout>

用户滚动时移动appbar是通过CollapsingToolbarLayout实现的，如here所述。