Android 底栏重叠工具栏答案

【问题标题】：Android Bottom Bars overlapping ToolbarAndroid 底栏重叠工具栏
【发布时间】：2016-04-20 03:10:09
【问题描述】：

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

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

【问题讨论】：

如果我的意思是我需要它的外观需要任何参考，请参阅 Material Design Spec 并查看 Google+ 应用程序（对于横条上的 FAB）
可以分享截图吗
好的，请稍等。我将发布我的问题和我需要的屏幕截图。
@PhanVănLinh 我发布了截图。左边那个是我的问题，右边的bars/FAB是我需要的。
试着把这个部分放在 AppBarLayout 的顶部 ...

标签： android android-coordinatorlayout

【解决方案1】：

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

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

android:layout_marginBottom="@dimen/bottom_navigation_height"

)。

2 - 在 CoordinatorLayout 中保留 BottomNaviationView，但使用 FrameLayout 的参数（CoordinatorLayout 是 FrameLayout）

android:layout_gravity

而不是

android:layout_alignParentBottom

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

3 - 如果可行则更好：将 BottomNavigationView 保留在 CoordinatorLayout 内，删除 android:layout_alignParentBottom 并尝试按照设计库的指示为其赋予 BottomSheetBehavior

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

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

【讨论】：

对我来说是第一个简单易行的修复方法。谢谢
使用了第三种解决方案。谢谢。

【解决方案2】：

一种解决方案是您应该在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>

【讨论】：