CoordinatorLayout 内容子项与 BottomNavigationView 重叠答案

【问题标题】：CoordinatorLayout content child overlaps BottomNavigationViewCoordinatorLayout 内容子项与 BottomNavigationView 重叠
【发布时间】：2018-06-03 16:21:53
【问题描述】：

我正在尝试将CoordinatorLayout 与BottomNavigationView、AppBarLayout 和ViewPager 一起使用。这是我的布局：

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

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        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:layout_scrollFlags="enterAlways|scroll"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <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:itemIconTint="?colorPrimaryDark"
        app:itemTextColor="?colorPrimaryDark"
        app:menu="@menu/navigation"/>
</android.support.design.widget.CoordinatorLayout>

问题是CoordinatorLayout把ViewPager放到屏幕底部，所以底部被BottomNavigationView遮住了，像这样：

即使CoordinatorLayout 本身并没有向下延伸，也会发生这种情况：

我尝试将app:layout_insetEdge="bottom" 添加到BottomNavigationView 和app:layout_dodgeInsetEdges="bottom" 到ViewPager，但这有一个不同的问题：它将ViewPager 的底部向上移动，但它保持相同的高度，所以顶部现在被切掉了：

我尝试了另外两个实验。首先，我尝试从CoordinatorLayout 中删除BottomNavigationView，并使它们成为垂直LinearLayout 下的兄弟姐妹。其次，我将ViewPager 和BottomNavigationView 放在LinearLayout 下，希望它们的布局正确。两者都没有帮助：在第一种情况下，CoordinatorLayout 仍然相对于整个屏幕调整ViewPager 的大小，要么将部分隐藏在BottomNavigationView 后面，要么切掉顶部。在第二种情况下，用户需要滚动才能看到BottomNavigationView。

如何正确布局？

附：当我尝试the layout suggested by @Anoop S S （将CoordinatorLayout 和BottomNavigationView 作为兄弟姐妹放在RelativeLayout 下）时，我得到以下信息（ViewPager 仍在BottomNavigationView 后面向下延伸）：

和以前一样，CoordinatorView 本身仅向下延伸到BottomNavigationView 的顶部。

【问题讨论】：

please check the answer here it is working fine here
我创建了一个关于这个issuetracker.google.com/issues/116541304的问题

标签： android android-layout bottomnavigationview coordinator-layout

【解决方案1】：

我想出了一个不同的方法（虽然还没有经过实战测试）：

我对@987654321@ 进行了子类化，以根据BottomNavigationView（如果存在）的高度调整内容视图的底部边距。这样，如果BottomNavigationView 的高度因任何原因发生变化，它应该是未来的证明（希望如此）。

子类（Kotlin）：

class ScrollingViewWithBottomNavigationBehavior(context: Context, attrs: AttributeSet) : AppBarLayout.ScrollingViewBehavior(context, attrs) {
    // We add a bottom margin to avoid the bottom navigation bar
    private var bottomMargin = 0

    override fun layoutDependsOn(parent: CoordinatorLayout, child: View, dependency: View): Boolean {
        return super.layoutDependsOn(parent, child, dependency) || dependency is BottomNavigationView
    }

    override fun onDependentViewChanged(parent: CoordinatorLayout, child: View, dependency: View): Boolean {
        val result = super.onDependentViewChanged(parent, child, dependency)

        if(dependency is BottomNavigationView && dependency.height != bottomMargin) {
            bottomMargin = dependency.height
            val layout = child.layoutParams as CoordinatorLayout.LayoutParams
            layout.bottomMargin = bottomMargin
            child.requestLayout()
            return true
        } else {
            return result
        }
    }
}

然后在你放置的布局 XML 中：

app:layout_behavior=".ScrollingViewWithBottomNavigationBehavior"

而不是

app:layout_behavior="@string/appbar_scrolling_view_behavior"

【讨论】：

很好的解决方案，谢谢！我发现的唯一解决方案利用了 CoordinatorLayout 强大的行为系统。注意：我的子视图是 Fragment/FrameLayout 所以我必须更新它以使用填充而不是边距，它的效果非常好。
噢，伙计。早点找到这个可以节省我几个小时的尝试时间：）谢谢！
最佳解决方案。非常感谢。

【解决方案2】：

基本上，您要做的就是创建一个 Relativelayout 作为父级，并将 BottomNavigationView 和 CoordinatorLayout 作为子级。然后在底部对齐 BottomNavigationView 并在其上方设置 CoordinatorLayout。请尝试以下代码。它可能很少有属性错误，因为我自己在这里写的。并为混乱的缩进感到抱歉。

<?xml version="1.0" encoding="utf-8"?>

    <RelativeLayout
        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">

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

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            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:layout_scrollFlags="enterAlways|scroll"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            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/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?android:attr/windowBackground"
            app:itemIconTint="?colorPrimaryDark"
            app:itemTextColor="?colorPrimaryDark"
            app:menu="@menu/navigation"/>

    </RelativeLayout>

【讨论】：

我不得不将BottomNavigationView 移动为CoordinatorLayout 的兄弟而不是孩子。这仍然没有解决问题，尽管它稍微改善了它们。 ViewPager 仍然在BottomNavigationView 后面延伸，尽管它现在不在系统导航栏后面。（CoordinatorLayout 本身并没有延伸到BottomNavigationView 的顶部以下，但和以前一样，它会将ViewPager 布置得比它本身大。）
“我不得不将 BottomNavigationView 移动为 CoordinatorLayout 的兄弟而不是孩子。” - 是的，对不起，这是我的本意，但放错了。更新了答案。您现在面临的问题是什么，我没有正确理解。如果可能，请发布您的布局设计的屏幕截图并更新问题的布局代码
我用结果的屏幕截图更新了我的答案。
你在 CoordinatorLayout 中添加了 android:layout_above="@+id/navigation" 吗？你能检查一下吗。然后寻呼机应该只到达底部导航视图的顶部
是的，这是布局的一部分。 CoordinatorLayout 本身具有正确的尺寸。它只是把它的孩子放在自己的界限之外。

【解决方案3】：

这是由 ViewPager 中的app:layout_behavior="@string/appbar_scrolling_view_behavior" 引起的。如果删除此行，您现在会看到它适合 CoordinatorLayout 容器（不幸的是，这包括现在位于工具栏下方）。

我发现将 CoordinatorLayout 视为一个 FrameLayout 会有所帮助，但需要一些额外的技巧。上面的 app:layout_behavior 属性是允许工具栏出现滚动进出所必需的......实际上，布局是通过将视图链接到折叠工具栏（在您的情况下，您的 ViewPager）来做到这一点的工具栏的高度大于边界。向上滚动将视图带到边界内的底部，并将工具栏向上推到边界之外。向下滚动，反之亦然。

现在，进入 BottomNavigationView！如果像我一样，您希望BottomNavigationView 始终可见，然后将其移到CoordinatorLayout 之外，正如Anoop 所说。仅将 CoordinatorLayout 用于需要协调的事物，其他一切都在外面。我碰巧为我的父视图使用了一个 ConstraintLayout（你可以使用 RelativeLayout 或任何对你有用的东西）。使用 ConstraintLayout，对您而言，它看起来像这样：

 <android.support.constraint.ConstraintLayout
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">


<android.support.design.widget.CoordinatorLayout
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@id/navigation"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        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:layout_scrollFlags="enterAlways|scroll"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        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/navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="?android:attr/windowBackground"
    app:itemIconTint="?colorPrimaryDark"
    app:itemTextColor="?colorPrimaryDark"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/navigation" />

 </android.support.constraint.ConstraintLayout>

在 Android Studio 设计视图中，您仍会看到 ViewPager 看起来比容器大（可能看起来仍然位于底部导航的后面）。但这没关系，当您到达 ViewPager 内容的底部时，它会显示（即不会在底部导航后面）。如前所述，设计视图中的这个怪癖正是 CoordinatorLayout 使工具栏显示/隐藏的方式。

【讨论】：

问题是我需要 ViewPager 的内容在不滚动的情况下完全可见，所以这不起作用。我希望找到一种方法让 CoordinatorLayout 在缩小工具栏时动态更改 ViewPager 的大小。我看着开发自己的行为，但我没有看到一种方法来使用它来获得我想要的东西。
协调器并没有缩小工具栏，而是将其移出视图（超出范围）。您需要将 viewpager 上的垂直滚动转换为使 viewPager 变大的动作，以具有将工具栏推到视野之外的相同效果......不确定它是如何工作的。出于兴趣，无论工具栏是否显示，您的 ViewPager 页面/片段中的内容是否大部分都完全可见？我很好奇为什么您需要折叠工具栏的行为以及所有可见的内容。
ViewPager 的内容大部分是可见的。然而，一些片段（不是全部）需要一个浮动操作按钮或其他小部件，锚定在底部附近，必须始终可见。我不认为我可以只创建一个顶级 fab 并在片段之间共享它，因为 fabs 需要锚定到不同的视图，并且具有不同的外观，具体取决于 ViewPager 中当前显示的片段。
这是有道理的，我也遇到了浮动操作按钮的问题，正如您提到的，我的解决方案是顶级工厂（例如，在您的情况下，ViewPager 的同级，在协调器布局中)。我做了你提到的，与孩子碎片分享了这个工厂。我可以使用 fab.setImageResource(R.drawable.my_drawable) 更改工厂、不同图标等的外观，但可能会因为锚定到视图寻呼机中的视图而陷入困境！
我唯一能想到的另一件事，我还没有测试过一个可行的解决方案，那就是把 'app:layout_behavior="@string/appbar_scrolling_view_behavior" 放在不同的视图中在寻呼机片段中，并将其从 viewPager 中取出。我认为您会遇到出现在工具栏下的 ViewPager 的问题，不确定设置边距是否可以解决该问题，以及当工具栏折叠时它是否会很好...

【解决方案4】：

我遇到了类似的问题，布局非常接近 OP，ViewPager 有 3 页，但只有第 2 页和第 3 页应该受 appbar_scrolling_view_behavior 影响。

经过数小时探索可能的死胡同解决方案（layout_dodgeInsetEdges、Window insets、尝试修改 ViewPager 的页面测量大小、android:clipChildren、fitSystemWindows 等）后，我终于找到了一个简单的解决方案，详述如下。

正如 Vin Norman 所解释的，ViewPager 与 BottomNavigation 重叠完全是由 ViewPager 上设置的 appbar_scrolling_view_behavior 引起的。 AppBarLayout 只会使具有 appbar_scrolling_view_behavior 的兄弟姐妹全屏。这就是它的工作原理。

如果您只需要在某些 ViewPager 页面上使用此行为，则有一个简单的修复方法，您可以将其应用于 ViewPager 的 OnPageChangeListener 以动态更改行为并添加/删除所需的填充：

public class MyOnPageChangeListener extends  ViewPager.SimpleOnPageChangeListener {

        @Override
        public void onPageSelected(int position) {

           ...

           CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) _viewPager.getLayoutParams();

        if(position == 0) {
            params.setBehavior(null);
            params.setMargins(params.leftMargin, _appBarLayoutViewPagerMarginTopPx, 
                    params.rightMargin, _appBarLayoutViewPagerMarginBottomPx);
        } else {
            params.setBehavior(_appBarLayoutViewPagerBehavior);
            params.setMargins(params.leftMargin, 0, params.rightMargin, 0);
        }

        _viewPager.requestLayout();

        }

}

对于位置 0 的页面（我们希望 ViewPager 正好延伸到 Toolbar 下方和 BottomNavigationView 上方的页面），它会移除行为并添加顶部和底部填充，分别为 _appBarLayoutViewPagerMarginTopPx 和 _appBarLayoutViewPagerMarginBottomPx 常量，易于预先计算（分别是 R.attr.actionbarSize 的像素值和 NavigationBottomView 的高度。通常都是 56dp)

对于需要 appbar_scrolling_view_behavior 的所有其他页面，我们恢复相关的滚动行为（预先存储在 _appBarLayoutViewPagerBehavior 中）并移除顶部和底部填充。

我测试了这个解决方案，它运行良好，没有任何警告。

【讨论】：

【解决方案5】：

如果有人仍在寻找此问题的解决方案：

问题的原因是 CoordinatorLayout 没有正确计算 AppBarLayout 的大小，因为它有带有 app:layout_scrollFlags="enterAlways|scroll" 设置的工具栏。它认为工具栏在滚动时会隐藏，因此它将所有可用空间留给 ViewPager，但实际上发生的是工具栏显示，因此 ViewPager 向下移动，位于 NavigationBar 后面。

解决此问题的最简单方法是将android:minHeight="?attr/actionBarSize"（或您正在使用的任何工具栏高度）添加到 AppBarLayout。这样 CoordinatorLayout 将正确地知道它需要为 ViewPager 留下多少空间。

【讨论】：

【解决方案6】：

如果它对某人仍然很重要：

在上面 Anoop SS 的回答中，尝试用 LinearLayout 替换 RelativeLayout。还将layout_height 的CoordinatorLayout 设置为0dp，并将layout_weight 设置为1。

我遇到了几乎相同的问题....只是我想在底部有一个静态的AdView 而不是BottomNavigationView。尝试 Anoop SS 建议，起初，我得到了与 OP 相同的行为：ViewPager 扩展在AdView 后面。但后来我按照我的建议做了，一切正常。

Android 布局的行为怪异，或者可能是缺乏良好的文档或我们缺乏知识......但大多数时候制作布局太烦人了。

【讨论】：

【解决方案7】：

如果你使用的是 Androidx，试试这个

<RelativeLayout 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=".MainActivity">

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:layout_above="@+id/bottomNavView">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </com.google.android.material.appbar.AppBarLayout>

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

        <fragment
            android:id="@+id/nav_host_fragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:defaultNavHost="true"
            app:navGraph="@navigation/mobile_navigation" />
    </FrameLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="?android:attr/windowBackground"
    app:menu="@menu/bottom_nav" />

【讨论】：