android - 菜单图标困惑 - 它们太大了!

Question

在“正常”尺寸的屏幕 hdpi 设备上，我知道应该使用 72 x 72 像素的图形，否则它们应该遵循 the Icon Design Guidelines (有趣的是，一些平台图形没有这样做)。然而，当我尝试通过创建我自己的新图形或通过从 Android SDK 复制图形文件来执行此操作时，菜单中的图形太大，并且它强制文本标签，即标题，应该在下面它不出现。如果我“强制”使用 48 x 48 像素的图形，那么大小看起来不错并且文本标签有显示空间，但这似乎不是正确的解决方案，因为图形显示质量降低了，并且文档明确指出应使用 72 x 72 图形。

我知道应该使用 9-patch 图形来帮助确保正确的缩放比例，但是平台可绘制文件夹中的菜单图标图形似乎都不是 9-patch，因为它们没有任何 9-patch 标记。对于这些屏幕截图，我确实在 Android SDK 平台 10 72 x 72 hdpi ic_menu_share.png 图形的副本中添加了 9 个补丁标记。 (draw9patch.bat 工具意外地改变了图形的颜色。)

在以下四个屏幕截图中，我展示了九个菜单图标显示，在我的 G2 上运行，并在具有类似 G2 质量的模拟器上运行:Android 2.2 API 8 WVGA800 240dpi。 (这两种设备都有“正常”大小的 hdpi 屏幕。)由于菜单图标图形一次只显示六个，因此每个设备有两个屏幕截图:v1 和 v2。屏幕截图之后是用于生成此应用程序的代码组件，以及指向包含我使用的所有图形文件的完整项目的链接。

Emulator_2.2_API8_WVGA800-240_v1:


(注意:在上面的模拟器截图中，标记为“G2 Platform”的图标应该被标记为“Running Platform”，因为显示的图形来自当前运行的Android平台 - 而不是来自G2平台。我也是懒得改正。)

Emulator_2.2_API8_WVGA800-240_v2:


G2_v1:


G2_v2:


(请注意，我在创建和复制这些图形时仔细遵循了 the Icon Design Guidelines。)

AndroidManifest.xml :

<?xml version="1.0" encoding="utf-8"?>
<manifest
    xmlns:android="http://schemas.android.com/apk/res/android"
    package="fubar.guiexamples"
    android:versionCode="1"
    android:versionName="1.0">
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="8" />
    <supports-screens
        android:smallScreens="true"
        android:normalScreens="true"
        android:largeScreens="true"
        android:anyDensity="true" />
    <application
        android:icon="@drawable/icon"
        android:label="@string/app_name">
        <activity
            android:name=".MenuIconConfusion"
            android:label="@string/app_name">
            <intent-filter>
                <action
                    android:name="android.intent.action.MAIN" />
                <category
                    android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

MenuIconConfusion.java:

public class MenuIconConfusion extends Activity
{
  @Override
  public void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu)
  {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.main_options_menu, menu);
    return true;
  }
}

main_options_menu.xml v1:

<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/g2_platform_with_title"
        android:icon="@android:drawable/ic_menu_share"
        android:title="G2 Platform" />
    <item
        android:id="@+id/g2_platform_no_title"
        android:icon="@android:drawable/ic_menu_share" />
    <item
        android:id="@+id/platform_10_auto_selection_with_title"
        android:icon="@drawable/ic_menu_share"
        android:title="Platform 10 Auto" />
    <item
        android:id="@+id/platform_10_auto_selection_no_title"
        android:icon="@drawable/ic_menu_share" />
    <item
        android:id="@+id/pixels_auto_selection"
        android:icon="@drawable/ic_menu_pixels"
        android:title="Pixels" />
</menu>

main_options_menu.xml v2:

<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/platform_10_hdpi_72_with_title"
        android:icon="@drawable/ic_menu_share_p10_hdpi_72"
        android:title="Platform 10 72 Copy" />
    <item
        android:id="@+id/platform_10_hdpi_72_no_title"
        android:icon="@drawable/ic_menu_share_p10_hdpi_72" />
    <item
        android:id="@+id/platform_10_mdpi_48_with_title"
        android:icon="@drawable/ic_menu_share_p10_mdpi_48"
        android:title="Platform 10 48 Copy" />
    <item
        android:id="@+id/platform_10_hdpi_72_9_patch_with_title"
        android:icon="@drawable/ic_menu_share_p10_hdpi_72_nine_patch"
        android:title="Platform 10 72 9p Copy" />
    <item
        android:id="@+id/platform_10_hdpi_72_9_patch_no_title"
        android:icon="@drawable/ic_menu_share_p10_hdpi_72_nine_patch" />
    <item
        android:id="@+id/pixels_auto_selection"
        android:icon="@drawable/ic_menu_pixels"
        android:title="Pixels" />
</menu>

关于截图和代码的一些说明:

正如我在这个演示中所做的那样，我明白我们不应该使用来自 android:drawable 的图形，原因在 the menu icon design guidelines 中描述。 .

对于某些图标，我将它们各显示两次 - 一次显示标题，一次不显示标题 - 以查看标题是否会影响选择的图形以及所选图形是否已缩放。

标有“Platform 10 48 Copy”的图标是一个 48 x 48 像素的图形，从 Android SDK 平台 10 drawable-mdpi 文件夹复制。

两个较浅颜色的图标来自 9-patch 图像。请注意，它们不表现出缩放特征。

包含“72”图标是为了表明可绘制的 hdpi 资源确实由运行平台自动选择，正如预期的那样。如果使用 drawable-hdmi 资源，则显示的数字将为“48”。

可能的问题:

简而言之，我没想到这些屏幕截图中显示的结果很多。虽然我确实希望使用 drawable-hdpi 72 x 72 图形，但我也希望它们能够为相关标题提供足够的显示空间。所以...

我可能会问，“如何让菜单图标图形缩放，以便留出显示相关标题的空间？”

我可能会问，“我们真正应该为菜单图标使用多大尺寸的图形，更不用说 the official documentation 怎么说了？”

我可能会问，“这到底是怎么回事？我不明白什么？”

我使用的带有图形的Android项目文件可以从https://sites.google.com/site/androidguiexamples/home/downloads/MenuIconConfusion.zip下载。

Answer 1

您的所有图标都在 res/drawable 中目录。所以我认为操作系统正在自动缩放您的图标，以便它们显示为不正确的大小。它们应该根据图标的目标 dpi 级别分成不同的目录。 72x72 图标进入 res/drawable-hdpi , 48x48 进入 res/drawable-mdpi和 36x36 进入 res/drawable-ldpi .请注意，它们都应该具有相同的名称。

res/drawable-hdpi/ic_menu.png
res/drawable-mdpi/ic_menu.png
res/drawable-ldpi/ic_menu.png

然后在您的菜单布局中使用 @drawable/ic_menu.png 引用图像.然后操作系统将根据它运行的设备的 dpi 确定要使用哪个。

正如约瑟夫·厄尔所说，它们不应该是 9 个补丁图像。