浮动操作按钮停留在显示片段的工具栏和框架之间

时间:2016-03-06 09:24:16

标签: android android-fragments drawerlayout android-coordinatorlayout floating-action-button

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

下面是我的activity_main.xml,它是用DrawerLayout设计的。我已经尝试过使用CoordinatorLayout,但是如果在布局中使用我当前的框架,我无法按照此链接显示FAB按钮

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按钮。

我已经查看了其他stackoverflow帖子  How can I add the new "Floating Action Button" between two widgets/layouts

但是我无法弄清楚应该在哪里放置显示片段数据的FrameLayout。

感谢Danail提供了一些帮助的教程参考。

现在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并显示在图像链接中。

1 个答案:

答案 0 :(得分:1)

this指南中提供了有用的信息。仔细查看“在头文件中嵌入FloatingActionButton”部分。

总结: 您应该使用FAB的layout_anchorlayout_anchor_gravity属性。在您的情况下,工具栏将是“锚”,您应该使用layout_anchor_gravity="bottom|right|end"

相关问题