Android NavigationView：减少图标和文本之间的 space 以及 `itemBackground` 不起作用

Question

在使用菜单 xml 构建 NavigationView 时，有没有办法减少图标和文本之间的 space？

我尝试使用 app:itemTextAppearance 属性向 android:drawablePadding 发送文本，但它不起作用，我尝试设置填充和边距，但没有任何效果。

另外，当我设置app:itemBackground并设置选中状态时，整个菜单项没有高亮显示，如下图所示。

用于创建 itemBackground 的 xml 是：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@color/white_alpha_10" />
    <item android:state_checked="true" android:drawable="@color/white_alpha_10" />
    <item android:state_focused="true" android:drawable="@color/white_alpha_10" />
    <item android:state_activated="true" android:drawable="@color/white_alpha_10" />
    <item android:drawable="@android:color/transparent" />
</selector>

知道会发生什么吗？很明显菜单项上有背景色，但是菜单 xml 是非常标准的。

NavigationView背景上的紫色背景设置自主题：

<!--Activity xml -->
<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:layout_gravity="start"
    app:theme="@style/AppTheme.NavigationView"
    app:menu="@menu/menu_nav_drawer"
    app:itemBackground="@drawable/nav_drawer_item"
    app:headerLayout="@layout/nav_header"/>

<!-- styles.xml -->
<style name="AppTheme.NavigationView" parent="Widget.Design.NavigationView">
    <item name="android:background">@color/charcoal_new</item>
    <item name="itemIconTint">@color/nav_drawer_icon</item>
    <item name="android:listDivider">@color/dusk_alpha_50</item>
    <item name="itemTextAppearance">@style/NavigationViewTextAppearance</item>
</style>

<style name="NavigationViewTextAppearance" parent="TextAppearance.Body.Regular">
    <item name="android:textColor">@color/white</item>
    <item name="android:padding">0dp</item>
    <item name="android:layout_margin">0dp</item>
</style>

我正在使用 Android support/design 库 23.2.1.

Answer 1

挖掘源代码后。我发现您可以覆盖维度资源来解决此问题。

<dimen tools:override="true" name="design_navigation_icon_padding">16dp</dimen>

请注意，这会改变所有地方的维度资源！您也可以复制布局文件并覆盖它 design_navigation_menu.xml

至于不同颜色的边缘，我设置了app:itemBackground="@android:color/transparent"然后在主题中为NavigationView设置：

<item name="selectableItemBackground">@drawable/nav_drawer_item_selector</item>

您可以在 NavigationView 的主题中按如下方式处理这两个问题：

    <item name="selectableItemBackground">@drawable/nav_drawer_item_selector</item>
    <item name="itemBackground">@color/transparent</item>

nav_drawer_item_selector.xml 看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@color/white_alpha_10" />
    <item android:state_checked="true" android:drawable="@color/white_alpha_10" />
    <item android:state_focused="true" android:drawable="@color/white_alpha_10" />
    <item android:state_activated="true" android:drawable="@color/white_alpha_10" />
    <item android:drawable="@color/transparent" />
</selector>

Answer 2

只需在 dimens.xml 文件中添加这一行

<dimen tools:override="true" name="design_navigation_icon_padding">10dp</dimen>

这将覆盖 NavigationView 的填充

Answer 3

在新的material中使用app:itemIconPaddingNavigationView

<com.google.android.material.navigation.NavigationView
                        ...
                        app:itemIconPadding="10dp"/>

Answer 4

以防万一有人不了解工具，请按照以下说明操作在res->Values->dimens.xml

中打开dimens.xml

<resources xmlns:tools="http://schemas.android.com/tools"> <dimen tools:override="true" name="design_navigation_icon_padding">10dp</dimen> </resources>

Answer 5

使用 Material 组件库中定义的 NavigationView 使用 app:itemIconPadding 属性。

<com.google.android.material.navigation.NavigationView
    app:itemIconPadding="4dp"
    ../>

您还可以定义自定义样式，例如：

  <style name="CustomNavigationView" parent="Widget.MaterialComponents.NavigationView">
    <item name="itemIconPadding">@dimen/....</item>
  </style>

默认值由@dimen/mtrl_navigation_item_icon_padding定义，即14dp。

Answer 6

如果您没有使用 Material 设计，请在包含 NavigationView 的 .xml 文件中插入此代码：

app:itemIconPadding="14dp"

14dp为示例，请选择适合自己的值。

示例：

<com.google.android.material.navigation.NavigationView
    android:layout_width="175dp"
    android:layout_height="match_parent" 
    android:id="@+id/navigation_view"
    app:menu="@menu/drawer_menu"
    app:itemIconPadding="14dp"    <------
    app:headerLayout="@layout/drawer_header"
    android:layout_gravity="start"
    android:fitsSystemWindows="true">
</com.google.android.material.navigation.NavigationView>

Android NavigationView：减少图标和文本之间的 space 以及 `itemBackground` 不起作用

Android NavigationView: reduce space between icon and text and `itemBackground` not working

android

android-navigationview