浮动操作按钮位于工具栏和显示片段的框架之间

floating action button stay between toolbar and frame that shows fragments

我可以将 FAB 按钮完美地放置在布局的右下角。但我希望将 FAB 按钮放置在工具栏和框架布局的交叉点,我将其用于片段。

下面是我的activity_main.xml,是用DrawerLayout设计的。我已经尝试过使用 CoordinatorLayout,但是我的当前框架在布局中有些问题,我无法放置 FAB 按钮,如此 link

所示

http://i.stack.imgur.com/6RjOq.jpg

http://i.stack.imgur.com/xCxE0.png

我的activity_main.xml

    <android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/viewA">
    <LinearLayout
        android:id="@+id/container_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar" />
    </LinearLayout>

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <FrameLayout
            android:id="@+id/container_body"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_marginRight="10dp"
            android:layout_marginBottom="16dp"
            app:fabSize="normal"
            android:src="@mipmap/ic_action_stop"
            app:backgroundTint="@color/colorPrimaryDark"
            app:rippleColor="#F06292"
            app:elevation="6dp"
            app:pressedTranslationZ="12dp"/>

    </FrameLayout>

</LinearLayout>
<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/drawer_header"
    app:menu="@menu/drawer"
    />

我不想在 container_body 中显示的片段中滚动内容,但只希望 fab 按钮显示在工具栏和框架的右中部。

我查看了其他 Whosebug post How can I add the new "Floating Action Button" between two widgets/layouts

但我不知道应该把显示片段数据的 FrameLayout 放在哪里。

感谢大牛参考教程,给了一些帮助。

现在 FAB 显示在工具栏和片段之间,如我所愿。

已更新activity_main.xml低于

解决方案

    <android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<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="150dp">

    <LinearLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewA"
        android:orientation="vertical">

        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar" />

        <LinearLayout
            android:id="@+id/viewB"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="horizontal">

            <FrameLayout
                android:id="@+id/container_body"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                />
            </LinearLayout>

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="12dp"
        android:clickable="true"
        android:src="@mipmap/ic_action_play"
        app:layout_anchor="@id/toolbar"
        app:layout_anchorGravity="bottom|right|end"
        app:fabSize="normal"
        app:backgroundTint="@color/colorPrimaryDark"
        app:rippleColor="#F06292"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"/>

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

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/drawer_header"
    app:menu="@menu/drawer"
    />

这是根据需要显示 FAB,如图 links.

this 指南中有有用的信息。仔细查看 "Embedding FloatingActionButton in Header" 部分。

总结一下: 您应该使用 FAB 的 layout_anchorlayout_anchorGravity 属性。在您的情况下,工具栏将是 "anchor" 并且您应该使用 layout_anchorGravity="bottom|right|end".