将 NavigationView 与 SlidingPaneLayout 一起使用答案

【问题标题】：Using NavigationView with SlidingPaneLayout将 NavigationView 与 SlidingPaneLayout 一起使用
【发布时间】：2021-09-11 09:24:01
【问题描述】：

根据 Google 的导航抽屉Material Design guideline，要在平板电脑或桌面设备上实现Standard drawer，我会在平板设备上使用 NavigationView 和 SlidingPaneLayout，而不是在手机设备上使用 DrawerLayout，即实现Modal drawer。

我将 NavigationView 作为 SlidingPaneLayout 的第一个子视图。出现问题。

如您所知如果SlidingPaneLayout 的子视图的组合宽度超过SlidingPaneLayout 中的可用宽度，则它们会重叠。在这种情况下，子视图会展开以填充 SlidingPaneLayout 中的可用宽度。用户可以通过从屏幕边缘向后拖动来将最顶部的视图滑开。

但我的 NavigationView 的窗格不会滑动。它只是以最大宽度出现或消失，没有滑动动画。

我该如何解决这个问题？

<androidx.slidingpanelayout.widget.SlidingPaneLayout
    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">

    <!-- The first child view becomes the left pane. When the combined
         desired width (expressed using android:layout_width) would
         not fit on-screen at once, the right pane is permitted to
         overlap the left. -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_view_header"
        app:menu="@menu/navigation_view" />

    <!-- The second child becomes the right (content) pane. In this
         example, android:layout_weight is used to expand this detail pane
         to consume leftover available space when the
         the entire window is wide enough to fit both the left and right pane.-->
    <fragment
        android:id="@+id/navigationHost"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="320dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        app:navGraph="@navigation/main" />

</androidx.slidingpanelayout.widget.SlidingPaneLayout>

【问题讨论】：

标签： android android-layout material-design navigation-drawer

【解决方案1】：

将app:elevation="0dp" 添加到 NavigationView。

<com.google.android.material.navigation.NavigationView
    android:id="@+id/navigationView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:elevation="0dp"
    app:headerLayout="@layout/navigation_view_header"
    app:menu="@menu/navigation_view" />

如果您检查布局，您会注意到 NavigationView 默认的高度为 16dp。这会导致问题。可能是 SlidingPaneLayout 在两个子视图具有相同高度的情况下处理它们（0dp）。

所以一个解决方案是用0dp 覆盖 NavigationView 的默认高度 (16dp)。

另一种解决方案是用 FrameLayout 或一些 ViewGroup 包装 NavigationView。

<FrameLayout
    android:layout_width="280dp"
    android:layout_height="match_parent">
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_view_header"
        app:menu="@menu/navigation_view" />
</FrameLayout>

然后，您应该使用 FrameLayout 和 NavigationView 的 layout_width 指定 layout_width 到 match_parent。

尽管 NavigationView 的默认高度为 16dp，但其父 ViewGroup 的高度为 0dp，SlidingPaneLayout 可以正常处理。

【讨论】：