Android 底部栏与工具栏重叠

Question

我正在为新的 Material Design Bottom Bars 使用一个库，但我遇到了一个非常奇怪的问题。每当我将它放入我的 Coordinator Layout 时，它都会显示在工具栏的顶部。为什么会发生这种情况，我该如何解决？另外，我怎样才能让浮动操作按钮位于这些栏的上方，而不是重叠呢？

    <?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.marlonjones.kansei.MainActivity">
<android.support.design.widget.AppBarLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    app:elevation="0dp"
    android:theme="@style/AppTheme.AppBarOverlay">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:elevation="4dp"
        android:background="?attr/colorPrimary"/>
</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="@drawable/ic_write" />
<com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationView
    android:id="@+id/bottomNavigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:bnv_colored_background="true"
    app:bnv_with_text="false"
    app:bnv_shadow="true"
    app:bnv_tablet="false"
    app:bnv_viewpager_slide="true"
    app:bnv_active_color="@color/colorPrimary"
    app:bnv_active_text_size="@dimen/bottom_navigation_text_size_active"
        app:bnv_inactive_text_size="@dimen/bottom_navigation_text_size_inactive"/>
</android.support.design.widget.CoordinatorLayout>

Answer 1

一个解决方案是您应该在 CoordinatorLayout

中添加 LinearLayout（或不同的 Layout Managers）

<?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.marlonjones.kansei.MainActivity">

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

        <android.support.design.widget.AppBarLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            app:elevation="0dp"
            android:theme="@style/AppTheme.AppBarOverlay">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:elevation="4dp"
                android:background="?attr/colorPrimary"/>
        </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="@drawable/ic_write" />
        <com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationView
            android:id="@+id/bottomNavigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            app:bnv_colored_background="true"
            app:bnv_with_text="false"
            app:bnv_shadow="true"
            app:bnv_tablet="false"
            app:bnv_viewpager_slide="true"
            app:bnv_active_color="@color/colorPrimary"
            app:bnv_active_text_size="@dimen/bottom_navigation_text_size_active"
                app:bnv_inactive_text_size="@dimen/bottom_navigation_text_size_inactive"/>
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Answer 2

三种替代方法尝试，我不知道它们是否有效：

1 - 将 BottomNavigationView 放在 CoordinatorLayout 之外，将所有这些嵌套在 RelativeLayout 中并为 CoordinatorLayout 设置 marginBottom（如该库的示例：

android:layout_marginBottom="@dimen/bottom_navigation_height

).

2 - 保留 CoordinatorLayout 中的 BottomNavigationView，但使用 FrameLayout 的参数（CoordinatorLayout 是一个 FrameLayout）

android:layout_gravity

而不是

android:layout_alignParentBottom

（这是一个 RelativeLayout 的参数）。您也必须将 marginBottom 添加到主要内容中。

3 - 如果可行则更好：将 BottomNavigationView 保留在 CoordinatorLayout 中，删除 android:layout_alignParentBottom 并尝试按照 Design Library 告诉的那样给它 BottomSheetBehavior

app:behavior_peekHeight="XXdp" app:layout_behavior="android.support.design.widget.BottomSheetBehavior"

PeekHeight XX 应该是 BottomNavigationView 的高度，你也必须将 marginBottom 添加到主要内容。

Android 底部栏与工具栏重叠

Android Bottom Bars overlapping Toolbar

android

android-coordinatorlayout