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

Question

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>

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

Answer 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-->

Answer 2

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

为此目的，我们决定使用app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"自带的开箱BottomNavigationView 。 剩下的就是将 fab 锚定到BottomNavigationView并在 fab 上使用相同的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>

除此之外，您也可以按照GitHub 中的说明为 fab 定义自己的 layout_behavior ：BlogPosts / android-coordinatorlayout-scrolling-hide-fab-behavior.md 。

我希望它有帮助:)

Answer 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>

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

Answer 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的默认边距。

Answer 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" />