CoordinatorLayout内容子项重叠BottomNavigationView

Question

我试图用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,但它保持相同的高度,使顶部现在剁掉:

我尝试了另外两个实验.首先,我尝试将它们BottomNavigationView从 CoordinatorLayout垂直方向移除并使它们成为兄弟姐妹LinearLayout.其次,我把ViewPager和BottomNavigationView一起下LinearLayout,希望他们能正确地布局了.两者都没有帮助:在第一种情况下,相对于整个屏幕CoordinatorLayout仍然保持尺寸ViewPager,或者将其中的一部分隐藏BottomNavigationView在顶部或者切掉顶部.在第二种情况下,用户需要滚动才能看到BottomNavigationView.

如何正确布局？

PS当我尝试@Anoop SS建议的布局时(把它CoordinatorLayout和BottomNavigationView兄弟姐妹放在一起RelativeLayout),我得到以下内容(ViewPager仍然向后延伸BottomNavigationView):

和以前一样,它CoordinatorView本身只延伸到顶部BottomNavigationView.

Answer 1

我想出了一种不同的方法（虽然尚未经过实战测试）：

我子类化AppBarLayout.ScrollingViewBehavior以根据BottomNavigationView（如果存在）的高度调整内容视图的底部边距。这样，如果由于BottomNavigationView任何原因更改高度，它应该是未来的证明（希望如此）。

子类（科特林）：

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"

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