【问题标题】:Menu Icon Confusion - They're too big!菜单图标混乱 - 它们太大了!
【发布时间】:2011-04-03 05:32:35
【问题描述】:

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

我知道应该使用 9-patch 图形来帮助确保正确缩放,但是平台可绘制文件夹中的菜单图标图形实际上都不是 9-patch,因为它们没有任何 9-补丁标记。对于这些屏幕截图,我确实在 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;
  }
}

ma​​in_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>

ma​​in_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 文件夹中复制而来。

两个浅色图标来自九个补丁图像。请注意,它们没有显示缩放特征。

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

可能的问题:

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

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

我可能会问,“我们真正应该使用什么尺寸的图形来制作菜单图标,不管the official documentation 说什么?”

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

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

【问题讨论】:

    标签: android graphics icons


    【解决方案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 来确定使用哪一个。

    正如 Joseph Earl 所说,它们不应该是 9-patch 图像。

    【讨论】:

    • 在项目中,我当然有一个drawable-hdpi,但在那里我只有一个对drawable文件的XML引用。我会看看你建议的改变是否会有所作为......
    • 宾果游戏!这就是我试图变得聪明所得到的。经验教训:当文档说将图像放在正确的文件夹中时,他们不仅仅意味着将对图像的引用放在正确的文件夹中。
    【解决方案2】:
    1. Android 系统将为您指定的目标选择 HDPI 图标
    2. 这将为图标上的文字留出足够的空间

    所以你可能想知道为什么你得到的东西看起来不对 - 只是图标不应该是九个补丁,这就是为什么现有的没有九个补丁标记。

    九个补丁用于需要以无法通过简单缩放/拉伸图像的方式调整大小的图形(例如,扩展以填充内容但角半径保持不变的按钮背景,或窗口标题背景)。所以一般情况下,九个补丁用于某种类型的背景图像。

    【讨论】:

    • 感谢您抽出宝贵时间回复。我知道我问的问题有很多要读的。关于您的第二个陈述,“这将为图标上的文本留出足够的空间”,请注意,这也是我所期望的,但显然不会。
    • 这不是因为您为图标使用了九个补丁,并且 Android 不希望图标是九个补丁 - 它们应该只是普通图像。删除九个补丁标记并将扩展名更改为普通的.png,你应该没问题。
    • 我没有使用九个补丁,除了一个示例,但这不是我唯一遇到的问题 - 我也遇到了非九个补丁图形的问题:同样的问题。我知道在帖子中阅读了很多内容。再次感谢您抽出宝贵时间回复。
    • 抱歉,我会仔细阅读您的帖子,看看是否还有其他建议。啊,我看到 dave.c 已经给出了我将要建议的有关文件夹的答案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-07-30
    • 1970-01-01
    • 1970-01-01
    • 2013-10-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多