隐藏在底部导航栏后面的Android浮动操作按钮答案

【问题标题】：Android floating action button hidden behind of bottom navigation bar隐藏在底部导航栏后面的Android浮动操作按钮
【发布时间】：2020-05-04 09:51:30
【问题描述】：

Android 编程新手，目前正在苦苦挣扎。我正在使用 android studio 的默认“导航抽屉活动”。最重要的是，我从https://github.com/roughike/BottomBar 添加了一个底部栏。但是，在添加了我的 FAB 隐藏在底部栏之后。

这里是 Scrrenshot -

我知道这是某种风格问题。我试图为 FAB 提供 bottomMargin。但是，它不起作用。

这是我的代码 -

app_bar_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.bhramaan.android.bhramaan.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/BhramaanTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/BhramaanTheme.PopupOverlay" />

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

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

    <com.roughike.bottombar.BottomBar
        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_gravity="bottom|end"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        app:bb_behavior="shy"
        android:background="@color/bottomBar"
        app:bb_activeTabColor="@color/white"
        app:bb_tabXmlResource="@xml/bottombar_tabs" />

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

需要一些指导来解决这个问题。

【问题讨论】：

将此行添加到 Xml android:layout_above="@+id/bottomBar" 中的 android.support.design.widget.FloatingActionButton
在下面查看我的答案，如果您遇到任何问题，请告诉我。
@Nithinlal LOLZ 你试过给这个add this line to the android.support.design.widget.FloatingActionButton in Xml android:layout_above="@+id/bottomBar" 试试上面的布局。是不是持有这个属性！！！！！！！！！.
正确答案可以在这里找到：stackoverflow.com/a/43132366/8781554

标签： android android-layout

【解决方案1】：

像这样添加 app:elevation="@dimen/text_margin"：

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email"
    app:elevation="@dimen/text_margin" /><!--adding this line should resolve your problem-->

【讨论】：

【解决方案2】：

这是一个适用于我们用例的解决方案。基本上我们想在用户滚动屏幕时隐藏底部导航视图和属于它的 fab。

为此，我们决定将开箱即用的app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior" 用于BottomNavigationView。剩下的就是将晶圆厂锚定到BottomNavigationView 并在晶圆厂上使用相同的layout_behavior。

这是一个例子：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
        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=".MainActivity">

    <include layout="@layout/inc_app_bar"/>

    <fragment
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:id="@+id/main_nav_host_fragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:defaultNavHost="true"
            android:name="androidx.navigation.fragment.NavHostFragment"
            app:navGraph="@navigation/bottom_nav_graph"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/main_bottom_nav_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            style="@style/Theme.BottomNavigationView"
            app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
            app:labelVisibilityMode="labeled"
            android:background="?android:attr/windowBackground"
            app:menu="@menu/bottom_nav_menu"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/main_fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_anchor="@id/main_bottom_nav_view"
            app:layout_anchorGravity="top|end"
            android:layout_marginBottom="@dimen/fab_margin_bottom"
            android:layout_marginEnd="@dimen/fab_margin_end"
            app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
            app:srcCompat="@drawable/ic_add_24px"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

除此之外，您还可以为 fab 定义自己的 layout_behavior，如 GitHub: BlogPosts / android-coordinatorlayout-scrolling-hide-fab-behavior.md 中所述。

希望对你有帮助:)

【讨论】：

【解决方案3】：

我提前让其他人知道这个解决方案适合我的需求。我不需要花哨的动画（这没关系，但不符合我的项目要求）。我所做的是将主要内容（FrameLayout）、FAB 和 BottomNavigationView 包装在 RelativeLayout 中。同样，我认为这可以以更好的方式完成，所以我愿意接受建议。

<android.support.design.widget.CoordinatorLayout
    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.design.widget.AppBarLayout
        android:id="@+id/admin_appbar_layout"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_width="fill_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentTop="true"
        tools:elevation="4dp">

        <!-- The toolbar -->
        <android.support.v7.widget.Toolbar
            android:id="@+id/admin_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/customActionBar"
            app:theme="@style/customActionBar"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:gravity="center_horizontal">

                <TextView
                    android:id="@+id/tv_toolbar_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    style="@style/H2_bold"
                    android:text="@string/activity_admin_name"/>

            </LinearLayout>

            </android.support.v7.widget.Toolbar>

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize">

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/bottom_navigation_bar"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_add_new_item"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@drawable/ic_action_new"
            android:layout_alignParentEnd="true"
            android:layout_above="@+id/bottom_navigation_bar"
            android:layout_margin="@dimen/fab_dimen"
            tools:elevation="2dp"/>

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            app:itemBackground="@color/black"
            app:itemIconTint="@color/white"
            app:itemTextColor="@color/white"
            app:menu="@menu/admin_bottom_navigation_items"
            tools:elevation="2dp"/>

    </RelativeLayout>

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

我知道这个问题可能看起来很老，但希望这对其他人有所帮助。

【讨论】：

这个答案只有在我们不使用害羞行为（滚动时底栏隐藏）时才是正确的。

【解决方案4】：

这只是保证金问题。只需尝试在您的coordinatorLayout 中实现此代码

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="?attr/actionBarSize">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            style="@style/floating_action_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/fab_margin"
            android:src="@drawable/ic_add_plus" />
</FrameLayout>

并在您的 style.xml 文件中使用此样式。

<style name="floating_action_button">
        <item name="android:layout_marginBottom">16dp</item>

</style>

我们只是将利润翻倍。第一个是BottomNavigationView，第二个是FAB的默认边距。

【讨论】：

【解决方案5】：

将您的xml 更改为这样。向您的Floating Action Button 添加更多属性。

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_gravity="bottom|end"
    android:layout_marginBottom="70dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="10dp"
    android:src="@android:drawable/ic_dialog_email" />

【讨论】：

从底部开始设置边距的静态值不正确
@Nithinlal 他在 OP 中需要的是将 FAB 隐藏在 Bottom Bar 旁边，使用此 margin_bottom 不会隐藏此。答案与问题有关。无需无缘无故地对此投反对票。对于margins，静态值在这里并不重要，因为FAB 将始终保留在右下角。
嘿，它成功了。我只有一个担心，因为它有 android:layout_marginBottom="70dp" 如果我们隐藏底部栏，那么它仍然在它的位置。我们不能做一些相对使用底部栏边距的事情。因此，当底栏隐藏时，FAB 会自动下降。
我投了反对票，因为你没有使用 android 适当的约束方法
@Nithinlal 我说你只是无缘无故投了反对票。