在 Android 中使用矢量图标

5

需要说明的是:

我曾考虑将这个问题发布在graphicdesign.stackexchange.com上,但我得出结论,我的Android特定问题可能不是最适合的地方。这就是为什么我选择了stackoverflow,因为它似乎更多是关于Android imageView的问题,而不是图形本身的问题。谢谢。



我需要在我的Android应用中使用一些基本图标。我有Illustrator和Photoshop(都不是很擅长,但我可以勉强做到)。我偶然发现了http://www.androidicons.com/,看到只需25美元就可以节省数小时的时间,所以觉得很划算。为了了解如何在我的应用中使用它们,我下载了免费的“BONUS ICONS 01”包。

enter image description here

我决定尝试使用钟表图标,并查看它在我的应用中如何工作。我在Illustrator中将图标放大到约800px,然后复制并粘贴到Photoshop中。我将其保存为.png格式,然后创建了一个样例应用程序来测试它。

该图像仅放置在xhdpi文件夹中,因为我可能会将此图标用于比操作栏更大的内容,但不会占据整个屏幕。我脑海中的想法是,如果您要为所有不同dpi级别创建操作栏图标,则必须确切地知道要制作它们的大小(以像素为单位),因此它们都看起来非常好(例如,如果从Google下载操作栏图标,则它们会提供几种大小,而不仅仅是一种)。但是,如果它们将用于比这更大的东西呢?我该怎么知道要制作什么样的大小。

为了真正显示我对自己无法理解这个主题的沮丧,这是我的应用程序代码和在我的Galaxy Nexus上的最终结果。较大的图标很好,而较小的图标明显不太清晰。我该如何解决这个问题?在Illustrator中制作图像、进入Photoshop并确保它们在任何尺寸下都能很好地展示的正确方法是什么?

真诚地,

一位Android开发者,他不懂图形

enter image description here

正如您所见,当图像很大时,它似乎看起来相当不错,但在较小的尺寸下使用它会导致一些问题。有任何办法解决吗?我是不是太挑剔了?即使我调整大小并将其放入mdpi中,我的布局是否也能支持呢?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center|center_horizontal" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/anti_huge"
                android:layout_weight="1" />

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/anti_huge"
                android:layout_weight="1" />
            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/anti_huge"
                android:layout_weight="1" />
            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/anti_huge"
                android:layout_weight="1" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center|center_horizontal" >

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/anti_huge" />

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

问题总结:

  1. 但如果它们将被用于比ActionBarIcons更大的事情怎么办?("that" = ActionBarIcons)
  2. 我应该如何知道要制作什么尺寸?(Google提供的ActionBarIcons具有设置的像素尺寸,他们是如何算出这些尺寸的)
  3. 我该怎么解决这个问题?(测试应用程序上的大图标看起来很好,而较小的图标看起来锯齿状)
  4. 在Illustrator中制作图像的正确方法是什么,然后进入Photoshop并确保它们在任何尺寸下都看起来很棒?
  5. 有什么方法可以修复它吗?
  6. 我太挑剔了吗?(请告诉我是的...这件事正在折磨我。)
  7. 即使我将其调整为更小的大小,并将其放入mdpi中,我的布局会选择它吗?

2
这里有太多问题了!请每次发布一个问题... - t0mm13b
问题不好,伙计。 - NSV.
2个回答

3

你做错了;)

Android会从最接近的匹配缩放图像。如果您只提供一个(非常大的)位图,则Android将将其缩放为您请求的较小尺寸。如果您以这种方式进行操作,则会失去抗锯齿效果,图标将与您的相似。

您需要做的是将png导出到实际使用时所需的(物理)大小,然后导出到所需的屏幕密度。

可点击区域建议的最小尺寸为40x40dp,相当于1/4英寸正方形。很可能,您会使用10%的边框,因此在mdpi中得到32x32像素的图标。

因此,现在您需要在mdpi(160dpi)中以32x32渲染矢量图像,在ldpi(120dpi)中以24x24渲染,在hdpi(240dpi)中以48x48渲染,在xhdpi(320dpi)中以64x64渲染。

如果您想要更大的相同图标,请将其呈现为单独的资产。例如,如果您想要一个2x2英寸的时钟水印,则需要在mdpi中以320x320px等比例呈现,以此类推。

你在布局中将图像指定为200dp x 200dp,Android会根据设备分辨率在屏幕上显示正确的图像。
对于一些重复渲染,我使用Android Asset Studio。你可以设置颜色、图标、效果等,它允许你下载所有分辨率的一组图标。

另一个问题:你看到我如何使用同一张图片5次了吗?如果我添加另一个低分辨率的时钟到(比如mdpi文件夹),那么前4个时钟会知道去那里找这张图片吗? - EGHDK
不,你真的不希望Android进行任何缩放。将PNG渲染为您想要在屏幕上显示的大小(例如mdpi),然后创建clock-small和clock-large可绘制对象。您真的希望为使用的每个图像指定dp尺寸或将它们渲染到适当的大小。如果依赖布局来缩放图像,当屏幕大小发生变化时(即正常与大型),一切都会崩溃。 - 323go
我在第一条评论中真正想问的是是否可以在一个屏幕上显示多个dpi级别。但是,我发现答案是否定的。不过,谢谢,我发现你的回答非常有帮助。 - EGHDK

2
ActionBar图标的尺寸在Android开发文档Action Bar Icons部分中指定。
您可以将以下图标放入项目的资源文件夹中:
  • 48x48像素图标放在xhdpi文件夹中
  • 36x36像素图标放在hdpi文件夹中
  • 24x24像素图标放在mdpi文件夹中
但是如果我理解您的问题正确,您想知道如何从其中一个图像创建一个大版本,例如作为活动背景:
首先,您需要一个图像的矢量版本。在Illustrator中打开它。 选择一个起点dpi,比如hdpi。从Illustrator创建一个png文件,大小看起来适合作为hdpi设备的背景。这是一个审美选择,没有对错之分。假设它的大小为300 x 300像素。 当您在hdpi设备上喜欢图像外观时,将该图像放置在项目的hdpi资源文件夹中。 为mdpi文件夹创建一个0.75倍大小的版本,即225 x 225像素。 为xhdpi文件夹创建一个1.5倍大小的版本,即450 x 450像素。
在illustrator中如何操作: 创建/打开一个矢量图像。 文件>保存为Web和设备 选择“图像大小”选项卡,输入hdpi的100%。 保存。 使用75%为mdpi重新进行,使用150%为xhpdi重新进行。

enter image description here


那么,假设我想创建一个漂亮的矢量图像,我将以四种不同的尺寸导出它们以用作背景。有没有地方说明特定dpi级别的最大宽度是多少? - EGHDK
每个级别都有最小的屏幕尺寸要求:http://developer.android.com/guide/practices/screens_support.html。如果您想让图像填充不同屏幕宽度并保持清晰,可以使用具有指定测量值的资源文件夹,例如sw720dp。有关详细信息,请参见同一链接中的“使用新的大小限定符”部分。 - Gunnar Karlsson

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接