如何使用 CoordinatorLayout 正确固定“浮动操作按钮”？答案

【问题标题】：How to pin "Floating Action Button" correcly using CoordinatorLayout?如何使用 CoordinatorLayout 正确固定“浮动操作按钮”？
【发布时间】：2015-11-15 07:58:02
【问题描述】：

我使用CoordinatorLayout 作为我的根视图。它包含一个RelativeLayout 和一个FloatingActionButton。当我为FloatingActionButton 设置layout_anchor 和layout_anchorGravity 时，它并没有像我预期的那样位于RelativeLayout（屏幕上的橙色区域）的边缘。

我尝试了这个问题How can I add the new "Floating Action Button" between two widgets/layouts 的解决方案，但没有成功。

这是我的布局：

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

    <RelativeLayout
        android:id="@+id/primary_area"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        android:paddingBottom="30dp">

        <com.vocabularyminer.android.android.view.view.FloatingEditText
            android:id="@+id/edittext_package_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="32dp"
            android:layout_marginLeft="14dp"
            android:layout_marginRight="14dp"
            android:layout_marginTop="16dp"
            android:hint="Test fab button"/>

    </RelativeLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_done_white_24dp"
        app:elevation="4dp"
        app:layout_anchor="@id/primary_area"
        app:layout_anchorGravity="bottom|right|end"/>

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

结果屏幕：

我的预期：

【问题讨论】：

您的问题到底是什么？你想把它放在哪里？
我认为您的代码是正确的，一旦尝试使用 EditText 而不是您的自定义编辑文本。
我已经用 EditText 试过你的代码，效果很好
我已经添加了屏幕，这正是我从上面的布局中所期望的。如果您查看此问题的答案link，您会看到晶圆厂的中心正好位于紫色区域的底部边缘。

标签： android android-layout material-design floating-action-button android-coordinatorlayout

【解决方案1】：

我习惯通过这段代码自己做锚定，在你的主视图的 addOnLayoutChangeListener 监听器中添加：

// fabGap is the right margin from the CoordinatorLayout
// container is your CoordinatorLayout  

final FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.TOP);
    layoutParams.setMargins(mAppBarLayout.getRight() - (2 * fabSize) - (2 * fabGap), mAppBarLayout.getBottom() - (fabSize / 2), 0, fabPadding);

    mFavoriteActionButton = new FloatingActionButton(getActivity());

【讨论】：

使用 CoordinatorLayout 和 app:layout_anchor 的解决方案应该可以在没有这些变通方法的情况下工作。我终于成立了，我的问题出在哪里，现在它完全按照我的预期工作。

【解决方案2】：

我发现了我的问题。此问题的解决方案：How can I add the new "Floating Action Button" between two widgets/layouts 是正确。但是我把我的fragment放到了FrameLayout，它是根据这个xml定义的：

<FrameLayout
        android:id="@+id/floating_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

因为我使用了 wrap_content，所以 FAB 按钮被放置在 RelativeLayout 内部，而不是在 RelativeLayout 边缘的位置。

当我也在 layout_heigh 参数中使用 match_parent 时，一切都按预期工作。

【讨论】：