FrameLayout与嵌入在CoordinatorLayout内部的BottomAppBar重叠

Question

以下是我的XML代码段，我所面临的问题是FrameLayout本身，尽管设置了约束，因此底部边界位于选项卡栏的上方，但似乎并没有这样做。更重要的是，当将片段加载到FrameLayout中时，整个底部导航/底部应用程序栏都被遮盖了。

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

    <FrameLayout
        android:id="@id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/main_tab_bar_layout"
        android:background="@android:color/holo_green_dark" />

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_tab_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/mainFloatingActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/settingsicon"
            android:backgroundTint="@android:color/holo_orange_dark"
            android:tint="@android:color/white"
            app:layout_anchor="@id/bottom_app_bar" />

        <android.support.design.bottomappbar.BottomAppBar
            android:id="@+id/bottom_app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:backgroundTint="@android:color/white"
            app:fabAlignmentMode="center"
            app:fabCradleMargin="9dp"
            app:fabCradleRoundedCornerRadius="10dp"
            app:fabCradleVerticalOffset="5dp"
            app:contentInsetStartWithNavigation="0dp"
            app:contentInsetStart="0dp"
            android:outlineAmbientShadowColor="@android:color/black"
            android:outlineSpotShadowColor="@android:color/black">

            <android.support.design.widget.BottomNavigationView
                android:background="@android:color/transparent"
                android:id="@+id/bottom_navigation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:menu="@menu/main_tab_navigation"
                android:outlineAmbientShadowColor="@android:color/transparent"
                android:outlineSpotShadowColor="@android:color/transparent"
                                />

        </android.support.design.bottomappbar.BottomAppBar>


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

</android.support.constraint.ConstraintLayout>

我想要实现的全部是：

• 底部导航视图/底部的选项卡
• 带有固定在其中心的浮动动作按钮。
• 然后是一个我加载片段的FrameLayout。

我做错什么了吗？

Answer 1

您的framelayout是重叠的协调器布局，因为您已将其高度设置为与父级匹配，因此，它没有遵循底部约束。将其高度更改为0dp，它将遵循约束并相应地调整高度。

接下来，您的协调器布局的高度为match_parent，因此它不仅在屏幕的整个屏幕上。

您的第二个符号对我来说还不清楚，因此我无法正确回答您的问题。是将其锚定到协调器布局的中心还是父布局的中心？

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"  <!-- changed from match parent to 0 dp--->
        android:background="@android:color/holo_green_dark"
        app:layout_constraintBottom_toTopOf="@+id/main_tab_bar_layout"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/main_tab_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" <!-- chnaged from match_parent to wrap_content--->
        app:layout_constraintBottom_toBottomOf="parent">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/mainFloatingActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@android:color/holo_orange_dark"
            android:src="@drawable/settingsicon"
            android:tint="@android:color/white"
            app:layout_anchor="@id/bottom_app_bar" />

        <android.support.design.bottomappbar.BottomAppBar
            android:id="@+id/bottom_app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:outlineAmbientShadowColor="@android:color/black"
            android:outlineSpotShadowColor="@android:color/black"
            app:backgroundTint="@android:color/white"
            app:contentInsetStart="0dp"
            app:contentInsetStartWithNavigation="0dp"
            app:fabAlignmentMode="center"
            app:fabCradleMargin="9dp"
            app:fabCradleRoundedCornerRadius="10dp"
            app:fabCradleVerticalOffset="5dp">

            <android.support.design.widget.BottomNavigationView
                android:id="@+id/bottom_navigation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:outlineAmbientShadowColor="@android:color/transparent"
                android:outlineSpotShadowColor="@android:color/transparent"
                app:menu="@menu/main_tab_navigation" />

        </android.support.design.bottomappbar.BottomAppBar>


    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

要停止重叠，请在Coordinator布局中包括一个布局，您可以在该布局中使用其他视图，在您的情况下为FrameLayout。在协调器布局中，您可以使用底部的栏。

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <!-- Bottom bar -->
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        style="@style/Widget.MaterialComponents.BottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorPrimary"
        app:fabAlignmentMode="center"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="10dp"
        app:fabCradleVerticalOffset="5dp"
        app:hideOnScroll="true"
        app:navigationIcon="@drawable/ic_menu_white_24dp" />

    <!-- Floating Action button -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:tint="@android:color/white"
        app:fabSize="normal"
        app:layout_anchor="@id/bar"
        app:srcCompat="@drawable/ic_add_black_24dp" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 2

您的Nuget版本是什么，我使用所有nugets版本v28.0.0.1测试您的代码，它都很好。也许您应该尝试清理解决方案并重新启动或更新nuget。

效果如下：