在 CoordinatorLayout 中，BottomNavigationView 重叠 FrameLayout答案

【问题标题】：BottomNavigationView overlapping FrameLayout in CoordinatorLayout在 CoordinatorLayout 中，BottomNavigationView 重叠 FrameLayout
【发布时间】：2018-02-17 10:11:21
【问题描述】：

以下是我的布局 xml。现在的问题是 BottomNavigationView 与 FrameLayout 重叠。我希望 FrameLayout 伸展到 BottomNavigationView 的顶部。

我尝试了一些技巧，例如在 FrameLayout 中添加 paddingBottom，但我想知道是否还有其他更好的解决方案。谢谢。

<?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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <include layout="@layout/user_app_bar"/>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation"
        app:itemTextColor="@color/colorPrimaryDark"
        app:itemIconTint="@color/colorPrimaryDark"
        />

    <FrameLayout
        android:id="@+id/fragment_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="58dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

   <android.support.design.widget.FloatingActionButton
       android:id="@+id/fab"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_margin="@dimen/fab_margin"
       app:layout_anchorGravity="bottom|end"
       app:layout_anchor="@id/app_bar"
       app:srcCompat="@drawable/ic_edit_white_24px" />

</android.support.design.widget.CoordinatorLayout>

更新：有关 user_app_bar.xml 的更多信息。它包含一个 CollapsingToolbarLayout。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout 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:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    app:layout_behavior="co.domain.DisableAppBarLayoutBehaviour"
    >

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:titleEnabled="false"
        app:contentScrim="?attr/colorPrimary">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_collapseMode="parallax">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:layout_marginBottom="0dp"
                android:layout_marginLeft="0dp"
                android:layout_marginRight="0dp"
                android:layout_marginTop="0dp"
                android:contentDescription=""
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.0"
                tools:ignore="ContentDescription"
                android:background="@color/gray"/>

            <TextView
                android:id="@+id/profileName"
                style="@style/textShadow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="0dp"
                android:text="user name"
                android:textAlignment="center"
                android:textSize="18sp"
                android:textColor="#fff"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintLeft_toLeftOf="@+id/profileImage"
                app:layout_constraintRight_toRightOf="@+id/profileImage"
                app:layout_constraintTop_toBottomOf="@+id/profileImage" />

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/profileImage"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="32dp"
                android:layout_marginStart="32dp"
                android:layout_marginTop="8dp"
                android:alpha="0.5"
                android:src="@drawable/ic_account_circle_black_24dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </android.support.constraint.ConstraintLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

【问题讨论】：

您必须提供固定高度（您可以通过计算屏幕高度并扣除底部栏高度来动态完成）始终位于底部视图布局的顶部，或者您可以使用相对布局并分配底部属性
你能写一些xml吗？
我想知道相对布局是否适合你？？
我需要使用 CoordinatorLayout，因为我在 user_app_bar 布局文件中有 AppBarLayout。
问题解决了吗？

标签： android bottomnavigationview coordinator-layout

【解决方案1】：

/Try to replace your code with this/

<?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:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<include layout="@layout/user_app_bar"/>

<FrameLayout
    android:id="@+id/fragment_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="58dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

 <android.support.design.widget.FloatingActionButton
   android:id="@+id/fab"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_margin="@dimen/fab_margin"
   app:layout_anchorGravity="bottom|end"
   app:layout_anchor="@id/app_bar"
   app:srcCompat="@drawable/ic_edit_white_24px" />


 <android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="?android:attr/windowBackground"
    app:menu="@menu/navigation"
    app:itemTextColor="@color/colorPrimaryDark"
    app:itemIconTint="@color/colorPrimaryDark"
    />

</android.support.design.widget.CoordinatorLayout>

【讨论】：

只是重新排列元素？我假设也删除了 paddingBottom。我试过了，还是不行。

【解决方案2】：

您的问题有一个简单的解决方案。即根据BottomNavigationView 的文档height 将marginBottom 放入FrameLayout 上的FrameLayout。我不确定它是否可以根据移动屏幕进行更改。甚至文档也没有提到改变高度。我在我的一些应用程序中使用了它，我没有发现BottomNavigationView 的高度在变化。但以防万一检查。希望这会有所帮助。

【讨论】：

我需要使用 CoordinatorLayout 作为根布局，因为我在 user_app_bar 布局文件中有 AppBarLayout。
如果您的 app_bar_layout.xml 中没有 TabLayout，那么只需使用 topmargin 查看我的编辑答案
我在上面添加了 app_bar 布局文件。我不能使用固定高度，因为 AppBarLayout 中有一个 CollapsingToolbarLayout。
然后有一个简单的解决方案，使用您以前的 xml 布局，只需将底部边距放在 FrameLayout 56dp 中，即底部导航视图的高度。不知道能不能变在不同的屏幕上查看，但我认为高度将保持不变56dp
其实我正在使用这种方法，但使用了 paddingBottom。我在想是否有比这更好的方法。感谢您的意见。

【解决方案3】：

无需对底部视图进行硬编码即可获得更好的解决方案

您可以将它放在 ConstraintLayout 中，并将内容的高度设置为 0dp，并将其设置为 bottomToTop="@id/bottomViewId" 或您放入 bottomViewNavigator 的任何 Id。

这是一个例子。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".StartActivity">

    <fragment
        android:id="@+id/nav_controller"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:background="@color/colorPrimary"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/white"
        app:menu="@menu/bottom_navigation_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

能否提供完整的user_app_bar.xml 解决方案？我需要 CoordinatorLayout 因为我在 user_app_bar.xml 中有 CollapsingToolbarLayout。我确实认为 ConstraintLayout 听起来很有希望解决这个问题。
滚动行为怎么样？就像在滚动时隐藏 appbar。

【解决方案4】：

将 CoordinatorLayout 和 BottomNavigationView 放在 RelativeLayout 中

BottomNavigation android:layout_alignParentBottom="true" 和 CoordinatorLayout 布局与 android:layout_above="@+id/{BottomNavigationView-ID}"

请检查下面的布局

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto">
<data>

</data>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.design.widget.CoordinatorLayout
            android:id="@+id/homeCoordinator"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/bnHome" //above bottom navigation
            >

            <android.support.design.widget.AppBarLayout
                android:id="@+id/homeAppbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:elevation="0dp"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

                <RelativeLayout
                    android:id="@+id/rlTopLayout"
                    android:layout_width="match_parent"
                    android:layout_height="?android:actionBarSize"
                    android:layout_alignParentTop="true"
                    android:background="@color/white"
                    android:orientation="horizontal"
                    app:layout_scrollFlags="scroll|enterAlways">

                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/ivHomeLogo"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentStart="true"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="@dimen/_minus15sdp"
                        android:src="@mipmap/launcher_logo" />

                    <android.support.v7.widget.AppCompatTextView
                        android:id="@+id/tvHomeTitle"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:layout_gravity="center_vertical"
                        android:layout_toEndOf="@+id/ivHomeLogo"
                        android:layout_toRightOf="@+id/ivHomeLogo"
                        android:text="@string/app_name"
                        android:textColor="@color/colorPrimary"
                        android:textSize="@dimen/_16ssp"
                        android:textStyle="bold" />

                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/ivHomeSurprise"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toLeftOf="@id/ivHomeSearch"
                        android:layout_toStartOf="@id/ivHomeSearch"
                        android:paddingBottom="@dimen/_13sdp"
                        android:paddingTop="@dimen/_13sdp"
                        android:src="@mipmap/surprise_icon_blue" />

                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/ivHomeSearch"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:padding="@dimen/_10sdp"
                        app:srcCompat="@drawable/ic_search_grey" />

                </RelativeLayout>

            </android.support.design.widget.AppBarLayout>

            <FrameLayout
                android:id="@+id/flHomeContainer"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        </android.support.design.widget.CoordinatorLayout>

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bnHome"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true" // align parent bottom true
            app:itemBackground="@color/white_smoke"
            app:itemIconTint="@color/bnv_color_state"
            app:itemTextColor="@color/bnv_color_state"
            app:menu="@menu/bottom_navigation_main"
            app:onNavigationItemSelected="@{(item)->vm.onNavigationItemSelected(item)}" />

    </RelativeLayout>

    <android.support.v4.widget.ContentLoadingProgressBar
        android:id="@+id/clpb_progress"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:visibility="@{vm.isLoading}" />
</FrameLayout>

【讨论】：

这是完美的答案+1
layout_above 对我有用。 layout_below 不知何故不起作用
这种方法的问题是，如果您需要任何具有 CoordinatorLayout 之外行为的视图。那是行不通的，因为它们必须是 CoordinatorLayout 的直接子级。您可能很想添加第二个 CoordinatorLayout，但这并不是一个很好的解决方案。在任何情况下，来自某个 CL 的视图无法通过行为与来自另一个 CL 的视图进行交流。所以这个解决方案很好，但前提是你的情况足够简单并且允许。

【解决方案5】：

在您的 BottomNavigationView 中添加这一行 android:background="?android:attr/windowBackground"

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/app_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:labelVisibilityMode="labeled"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/app_navigation" />

【讨论】：