LinearLayout 内的 FAB 位于 Fragments 之上

Question

在我的布局文件中，我有一个 LinearLayout 作为父布局，其中我使用 appBarLayout 显示了 ImageView，并且有包含 listview 的 Tablayout。我需要在所有这些布局中显示一个 FloatingActionButton。

当我在 LinearLayout 中包含 FAB 时，它不会显示 FAB。

如果我使用 FrameLayout 而不是 LinearLayout 作为父布局，它会显示 fab，但它会扭曲 imageview 并使所有其他视图消失（请检查图像：https://drive.google.com/file/d/1OTqXIMVGh_7sRtkLYu7Snn0fTP-e4VCE/view?usp=sharing）。请帮我解决这个问题，这是我的 xml 代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    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=".MainActivity"
    android:orientation="vertical">


    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="170dp"
        android:gravity="center"
        android:elevation="0dp"
        android:id="@+id/appbarid">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:src="@drawable/imagep"
            tools:ignore="contentDescription"/>

    </android.support.design.widget.AppBarLayout>
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="scrollable"
        android:id="@+id/tablayout_id"
        app:tabTextColor="@color/tabtextcolor"
        app:tabIndicatorColor="@color/tabindicatorcolor"
        android:background="@color/colorPrimary" />
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewpager_id" >

</android.support.v4.view.ViewPager>

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu"
        android:layout_above="@id/viewpager_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        fab:menu_fab_size="normal"
        fab:menu_showShadow="true"
        fab:menu_shadowColor="#66000000"
        fab:menu_shadowRadius="4dp"
        fab:menu_shadowXOffset="1dp"
        fab:menu_shadowYOffset="3dp"
        fab:menu_colorNormal="@color/colorPrimary"
        fab:menu_colorPressed="@color/colorAccent"
        fab:menu_colorRipple="#ffffff"
        fab:menu_animationDelayPerItem="50"
        fab:menu_icon="@drawable/plus"
        fab:menu_buttonSpacing="0dp"
        fab:menu_labels_margin="0dp"
        fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
        fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
        fab:menu_labels_paddingTop="4dp"
        fab:menu_labels_paddingRight="8dp"
        fab:menu_labels_paddingBottom="4dp"
        fab:menu_labels_paddingLeft="8dp"
        fab:menu_labels_padding="8dp"
        fab:menu_labels_textColor="#FFFFFF"
        fab:menu_labels_textSize="14sp"
        fab:menu_labels_cornerRadius="3dp"
        fab:menu_labels_colorNormal="#333333"
        fab:menu_labels_colorPressed="#444444"
        fab:menu_labels_colorRipple="#66FFFFFF"
        fab:menu_labels_showShadow="true"
        fab:menu_labels_singleLine="false"
        fab:menu_labels_ellipsize="none"
        android:layout_gravity="bottom|right"
        fab:menu_labels_maxLines="-1"
        fab:menu_labels_position="left"
        fab:menu_openDirection="up"
        fab:menu_backgroundColor="@android:color/transparent"
        fab:menu_fab_label="Menu"
        fab:menu_fab_show_animation="@anim/my_show_animation"
        fab:menu_fab_hide_animation="@anim/my_hide_animation">


        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/myFAB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_colorNormal="#2196f3"
            app:fab_colorPressed="#40c4ff"
            app:fab_colorRipple="#99FFFFFF"
            android:src="@drawable/parts"
            fab:fab_size="mini"
            fab:fab_label="Share the app with your friends" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/myFAB2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_colorNormal="#7e57c2"
            app:fab_colorPressed="#9575cd"
            app:fab_colorRipple="#99ffffff"
            android:src="@drawable/post"
            fab:fab_size="mini"
            fab:fab_label="Send Suggestion/Feedback" />

    </com.github.clans.fab.FloatingActionMenu>
    </LinearLayout>

Answer 1

将顶部的 LinearLayout 更改为 CoordinatorLayout 并将 app:layout_behavior="@string/appbar_scrolling_view_behavior" 添加到 FAB。

Answer 2

您应该将浮动操作按钮与您的 LinearLayout 一起放置在 CoordinatorLayout 中。当您执行此操作时，操作按钮应始终浮动在顶部，并且您会获得一些很酷的行为，例如，如果您显示 Toast to Fab 会自动向上移动。

阅读本文以获得一些实施帮助：https://material.io/develop/android/components/floating-action-button/