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

Question

Android编程和新功能现在正在努力。我正在使用android studio的默认“导航抽屉活动”。最重要的是，我从https://github.com/roughike/BottomBar添加了一个底栏。但是，在添加之后我的FAB隐藏在Bottom Bar后面。

这是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: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: BlogPosts / android-coordinatorlayout-scrolling-hide-fab-behavior.md中的说明为fab定义自己的layout_behavior。

我希望它会有所帮助:)

Answer 2

更改您的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" />

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