如何增加应用工具栏中菜单项图标和标题之间的填充或边距？答案

【问题标题】：How to increase padding or margin between menu item icon and title in app toolbar?如何增加应用工具栏中菜单项图标和标题之间的填充或边距？
【发布时间】：2022-02-02 16:55:04
【问题描述】：

我的操作栏中的项目有问题：

刷新图标太靠近标题“REFRESH”。看起来很别扭。

我知道解决此问题的一种方法是编辑图像以强制向其添加填充，或将其包装在这样做的 XML 可绘制对象中。

看来我不应该在图像本身中添加空间来解决这个问题。我觉得应该有一种简单的方法来更改填充或边距属性来解决问题。我很惊讶他们在这里如此接近。

有什么想法吗？

【问题讨论】：

你可以通过在菜单项标签中添加 app:actionLayout="@layout/custom_layout" 来实现

标签： android android-layout

【解决方案1】：

我不敢相信我花了这么长时间才弄明白！

最终我想到了使用 Android 设备监视器。我去了工具>安卓>安卓设备监视器。启动时，我在“设备”选项卡中单击了我的应用程序的包名称，然后单击了顶部的“UI Automator 的转储视图层次结构”按钮（看起来像多部手机堆叠在一起） “设备”选项卡。这向我展示了当前屏幕的 UI。然后我可以单击“刷新”按钮并发现它不是两个相邻的视图——它是一个带有 DrawableLeft 的 TextView。我知道，我知道，这很明显，应该是我首先想到的。

我已经找到了 ActionBarSherlock - How to set the padding of each actionbar's icon? ，但这对我不起作用。但是，这给了我一个我需要的示例——更改 ActionButton 样式。

现在我知道它是一个带有 DrawableLeft 的 TextView，我知道我需要更改 DrawablePadding。这就是我需要对样式做出的改变。

要更改 ActionButton 主题，我需要将其添加到我的 styles.xml：

<style name="ActionButton" parent="@android:style/Widget.ActionButton">
    <item name="android:drawablePadding">@dimen/action_button_padding</item>
</style>

dimen.xml：

<dimen name="action_button_padding">4dp</dimen>

然后调整 style.xml 的 Theme 部分：

<style name="Theme.MyTheme"
       parent="Theme.AppCompat.Light.NoActionBar">
    <!-- other styles -->
    <item name="android:actionButtonStyle">@style/ActionButton</item>
</style>

而且它确实有效！无需设置自定义 ActionProvider、编辑图片以在图片文件中添加间距或为每个按钮使用额外的 XML 文件。

【讨论】：

是的，您可以增加项目之间的距离。但不能减少。负数 -10dp 或 -30dp 无效。你不知道我怎样才能减少它？无论如何，感谢您完成的工作！ :)

【解决方案2】：

使用在菜单项中设置的自定义布局，例如：

<item
    android:id="@+id/common_submenu_sync_contact"
    android:title="Refresh"
    app:actionLayout="@layout/custom_menu_item" />

创建布局文件并将此文件设置为app:actionLayout。

custom_menu_item.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/refresh"
    android:padding="10dp" />

编码愉快。

【讨论】：

@AhamadullahSaikat 如前所述，这只能通过添加 app:actionLayout 而不是 android:actionLayout
在我的情况下，菜单项变得不可点击。交易者对插图的回答效果很好。

【解决方案3】：

您也可以只使用一个嵌入的可绘制对象，并将填充烘焙到其中。如果您在应用程序的其他地方使用该菜单项图像，这也将防止您必须将样式应用于应用程序中的所有菜单按钮或担心奇怪的填充。

<inset
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/your_drawable"
   android:insetTop="3dp"
   android:insetRight="3dp"
   android:insetBottom="3dp"
   android:insetLeft="3dp" />

【讨论】：

【解决方案4】：

修复@Chad Schultz 的答案，他的解决方案对我不起作用。但是我改变了 ActionButton 的样式：

<style name="ActionButton" parent="@android:style/Widget.ActionButton">
    <item name="android:paddingStart">0dp</item>
    <item name="android:paddingEnd">0dp</item>
    <item name="android:minWidth">0dp</item>
</style>

【讨论】：

【解决方案5】：

这可能不是最佳做法，但您可以将“空”、不可点击的项目放在其他项目之间：

<item
    android:id="@+id/action_save_estimator"
    android:icon="@drawable/ic_action_tick_white"
    android:orderInCategory="1"
    android:title="@string/action_save_estimator"
    app:showAsAction="always"/>

<!--EMPTY ITEM-->
<item
    android:orderInCategory="2"
    android:title=""
    app:actionLayout="@layout/empty_item"
    app:showAsAction="always"/>

<item
    android:id="@+id/action_add"
    android:icon="@drawable/ic_add_white_24dp"
    android:title="@string/action_add"
    android:orderInCategory="3"
    app:showAsAction="always"/>

在布局组中创建empty_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp" 
    android:clickable="false"/>

【讨论】：