始终将浮动操作按钮放在顶部答案

【问题标题】：Put the Floating action button on Top always始终将浮动操作按钮放在顶部
【发布时间】：2018-03-21 11:18:20
【问题描述】：

我有 Mainactivity、一个 Fragment 和 BlogRecycleadapter，用博客文章填充 Fragment。

在 Mainactivity 中，我有浮动操作按钮。但是当我运行该应用程序时，它隐藏在 blogRecycleadapter 的项目下方。

如何使浮动操作按钮始终位于顶部？？

我的主要活动布局是

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".Main2Activity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/main_toolbar"
        app:titleTextAppearance="@style/Toolbar.TitleText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"></android.support.v7.widget.Toolbar>



    <android.support.design.widget.BottomNavigationView
        android:id="@+id/mainBottomNav"
        android:background="@color/colorblog"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_menu"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/add_post_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:clickable="true"
        android:layout_gravity="bottom|end"
        android:focusable="true"
        android:visibility="visible"
        app:elevation="6dp"
        app:layout_constraintBottom_toTopOf="@+id/mainBottomNav"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@mipmap/action_add" />


    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/mainBottomNav"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/main_toolbar"
        app:layout_constraintVertical_bias="1.0">

    </FrameLayout>

</android.support.constraint.ConstraintLayout>

我的片段布局是，

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeFragment">

    <!-- TODO: Update blank fragment layout -->

    <android.support.v7.widget.RecyclerView
        android:id="@+id/blog_list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

我的 blogRecycleadapter 类是

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="wrap_content">

    <android.support.v7.widget.CardView
        android:id="@+id/main_blog_post"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:padding="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/blog_like_btn"
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:layout_marginBottom="8dp"
                android:layout_marginStart="16dp"
                android:layout_marginLeft="16dp"
                android:layout_marginTop="8dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/blog_desc"
                app:srcCompat="@mipmap/action_like_gray" />

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/blog_user_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:src="@drawable/profile_placeholder"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/blog_user_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="16dp"
                android:text="Username"
                android:textStyle="bold"
                app:layout_constraintStart_toEndOf="@+id/blog_user_image"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/blog_date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:text="Blog Post Date"
                app:layout_constraintStart_toEndOf="@+id/blog_user_image"
                app:layout_constraintTop_toBottomOf="@+id/blog_user_name" />

            <ImageView
                android:id="@+id/blog_image"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:scaleType="centerCrop"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/blog_user_image"
                app:srcCompat="@drawable/image_placeholder" />

            <TextView
                android:id="@+id/blog_desc"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginEnd="16dp"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:text="Lorem ipsum dolor sit amet, soluta regione urbanitas vis in, qui elit populo ut. "
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/blog_image" />

            <TextView
                android:id="@+id/blog_like_count"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:text="0 Likes"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="@+id/blog_like_btn"
                app:layout_constraintTop_toBottomOf="@+id/blog_desc" />




        </android.support.constraint.ConstraintLayout>
    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

【问题讨论】：

标签： android android-layout android-fragments android-linearlayout floating-action-button

【解决方案1】：

为你尝试这个 mainactivity 布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/main_toolbar"
            app:titleTextAppearance="@style/TextAppearance.AppCompat.Light.SearchResult.Title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:background="@color/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Light" />

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

        </FrameLayout>

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/mainBottomNav"
            android:background="@color/list_background"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:menu="@menu/bottom_menu"
            android:layout_alignParentBottom="true"/>

    </RelativeLayout>
    
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/add_post_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="?attr/actionBarSize"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:clickable="true"
        android:layout_gravity="bottom|end"
        android:focusable="true"
        android:visibility="visible"
        app:elevation="6dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@mipmap/ic_launcher" />

</android.support.constraint.ConstraintLayout>

希望这会有所帮助。

【讨论】：

乐于助人。:)
现在操作工具栏是不可见的，我该如何找回它？
将 layout_below="@id/main_toolbar" 放入 FrameLayout 标签并使用 layout_above="+@id/mainBottomNav" 以使底部菜单不会隐藏

【解决方案2】：

这样试试（倒转FramLayout和FloatingActionButton的位置）：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".Main2Activity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/main_toolbar"
        app:titleTextAppearance="@style/Toolbar.TitleText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"></android.support.v7.widget.Toolbar>



    <android.support.design.widget.BottomNavigationView
        android:id="@+id/mainBottomNav"
        android:background="@color/colorblog"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_menu"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />


<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"></FrameLayout>
    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/mainBottomNav"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/main_toolbar"
        app:layout_constraintVertical_bias="1.0">

    </FrameLayout>


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/add_post_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:clickable="true"
        android:layout_gravity="bottom|end"
        android:focusable="true"
        android:visibility="visible"
        app:elevation="6dp"
        app:layout_constraintBottom_toTopOf="@+id/mainBottomNav"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@mipmap/action_add" />


</android.support.constraint.ConstraintLayout>

【讨论】：

【解决方案3】：

您可以增加高度，直到它在底部导航中可见。提供大于 8dp 的高度并尝试。

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

<android.support.v7.widget.Toolbar
    android:id="@+id/main_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:background="@color/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Light" />


<android.support.design.widget.BottomNavigationView
    android:id="@+id/mainBottomNav"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:menu="@menu/bottom_bar_menu" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/add_post_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/mainBottomNav"
    android:layout_alignParentRight="true"
    android:layout_marginRight="20dp"
    android:clickable="true"
    android:focusable="true"
    android:visibility="visible"
    app:elevation="10dp" />


<FrameLayout
    android:id="@+id/main_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/mainBottomNav"
    android:layout_below="@+id/main_toolbar">

</FrameLayout>

</RelativeLayout>

只需将您的片段加载到主容器中.. 希望这有效

【讨论】：

尝试添加布局