Android NavigationRailView在小视口下导航条目被截断问题求助

针对小视口手机上最后一个导航条目被截断的问题，给你几个可行的解决思路：

1. 让导航栏支持滚动 #

如果5个带副标题的条目总高度超过屏幕可用高度，让NavigationRailView支持垂直滚动，用户就能滑动查看完整内容：

直接给导航栏添加滚动属性：

<com.google.android.material.navigationrail.NavigationRailView
    android:id="@+id/rail_navigation"
    style="@style/MyApp.Widget.RailNavigationView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:fitsSystemWindows="false"
    android:visibility="visible"
    android:scrollbars="vertical"
    app:menuGravity="top"
    tools:menu="@menu/menu_fragment_top_app_bar" />

如果上述方法无效，将导航栏嵌套进NestedScrollView：

<androidx.core.widget.NestedScrollView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:scrollbars="none">

    <com.google.android.material.navigationrail.NavigationRailView
        android:id="@+id/rail_navigation"
        style="@style/MyApp.Widget.RailNavigationView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="false"
        android:visibility="visible"
        app:menuGravity="top"
        tools:menu="@menu/menu_fragment_top_app_bar" />
</androidx.core.widget.NestedScrollView>

2. 缩小导航项的元素尺寸 #

通过调整图标大小、文字字号压缩每个条目的高度，让5个条目能适配小屏幕：

修改你的导航栏样式，添加以下属性：

<style name="MyApp.Widget.RailNavigationView" parent="Widget.Material3.NavigationRailView">
    <!-- 缩小图标尺寸 -->
    <item name="itemIconSize">24dp</item>
    <!-- 调整主标题字号 -->
    <item name="itemTextAppearance">@style/MyRailItemText</item>
    <!-- 调整副标题字号 -->
    <item name="itemSubTextAppearance">@style/MyRailItemSubText</item>
    <!-- 收紧垂直内边距 -->
    <item name="itemVerticalPadding">4dp</item>
</style>

<style name="MyRailItemText" parent="TextAppearance.Material3.LabelSmall">
    <item name="android:textSize">12sp</item>
</style>

<style name="MyRailItemSubText" parent="TextAppearance.Material3.BodySmall">
    <item name="android:textSize">10sp</item>
</style>

3. 调整导航栏的布局位置 #

把menu重力从top改为center，或者给导航栏加底部边距，避免条目被屏幕底部截断：

<com.google.android.material.navigationrail.NavigationRailView
    android:id="@+id/rail_navigation"
    style="@style/MyApp.Widget.RailNavigationView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:fitsSystemWindows="false"
    android:visibility="visible"
    android:layout_marginBottom="8dp"
    app:menuGravity="center"
    tools:menu="@menu/menu_fragment_top_app_bar" />

额外排查点 #

• 检查menu文件，若条目title/subtitle过长会拉高条目高度，适当精简文字
• 确保Material组件库是最新版本，旧版本可能存在小屏幕适配bug，建议更新到com.google.android.material:material:1.11.0及以上

内容的提问来源于stack exchange，提问作者Franklin84