安卓浮动操作按钮被底部导航栏遮挡了

Question

安卓浮动操作按钮被底部导航栏遮挡了

12

我刚开始学习Android编程，目前正在遇到困难。我使用的是Android Studio的默认“导航抽屉活动（Navigation Drawer Activity）”。此外，我还从https://github.com/roughike/BottomBar中添加了一个底部栏。但是，在添加它之后，我的FAB被隐藏在底部栏后面。

这是截图-

我知道这是某种样式问题。我尝试为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>

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

- Suresh

请在Xml中的android.support.design.widget.FloatingActionButton中添加以下行：android:layout_above="@+id/bottomBar" - Nithinlal

请检查我的答案，如果有任何问题，请让我知道。 - Jay Rathod

@Nithinlal 哈哈，你试过用这个代码吗？在Xml文件中给 android.support.design.widget.FloatingActionButton 添加这一行：android:layout_above="@+id/bottomBar"。试试看是否能够保持这个属性呢！！！！！ - Jay Rathod

正确答案可以在这里找到：https://dev59.com/hFgQ5IYBdhLWcg3wOBOw#43132366 - Xam

在xml中，在BottomBar代码块下面添加FloatingActionButton代码块。 - undefined

6个回答

2

这是一个适用于我们使用情况的解决方案。基本上，我们想要在用户滚动屏幕时隐藏底部导航视图和属于它的浮动操作按钮。

为此，我们决定使用“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。我希望这能有所帮助 :)

- iskae

0

提前让其他人知道，这个解决方案适合我的需求。我不需要花哨的动画（虽然可以，但不符合我的项目要求）。我所做的是将主要内容（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>

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

- AXSM

1

如果我们不使用害羞行为（即滚动时隐藏底部栏），那么这个答案才是正确的。 - Bagus Aji Santoso

0

这只是一个边距问题。只需要在您的 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的默认边距。

- Abdul Qadir

0

简单添加。

app:elevation="10dp"

它对我有效。

- Samar Yasin

-3

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

- Jay Rathod

7

设置底部边距的静态值不正确。 - Nithinlal

@Nithinlal 在 OP 中需要隐藏 FAB 旁边的 Bottom Bar，使用 margin_bottom 不会隐藏它。答案与问题相关且有意义，没有必要因为无关紧要的原因而对其进行负面评价。静态值在这里的 margins 不重要，因为 FAB 将始终保持在右下角。 - Jay Rathod

2

嘿，它起作用了。我只有一个问题，就是它有android:layout_marginBottom="70dp"。如果我们隐藏底部栏，那么它仍然在原地。我们不能做一些相对于底部栏使用边距的事情吗？这样，当底部栏被隐藏时，FAB会自动下移。 - Suresh

@jaydroider，你知道我为什么被踩了吗？如果你写得正确，它应该适用于所有情况，但现在它在另一种情况下失败了。 - Nithinlal

@mi6crazyheart 试着以编程方式来维护它，如果你在这方面遇到任何问题，请在这里发布。因为没有人会为此编写代码 :）。我已经写了一个对OP有意义的答案。 - Jay Rathod

显示剩余6条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel R · Accepted Answer

像这样添加 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-->