在矢量图标上使用正确的 dpi

Question

我是 android 工作室的新手，打算为平板电脑和手机设计一个应用程序。因此，我的应用将主要用于普通屏幕和大屏幕。

哪个 dpi 最适合我的矢量图标？
我应该为同一个图标制作不同 dpi 版本以支持多屏幕吗？
为什么只制作图标 wrap_content 不支持多屏幕尺寸。我认为矢量图像在扭曲时不会变得模糊。

Answer 1

矢量绘图

顾名思义，矢量绘图基于矢量图形，与光栅图形相反，矢量图形是一种使用几何形状描述图形元素的方式。它类似于 SVG 文件。在 Android 中，Vector Drawable 被创建为 XML 文件。现在不需要为 mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi 等创建不同大小的图像。我们只需要一个矢量文件来处理多个屏幕大小的设备。此外，对于不支持矢量可绘制对象的旧版本 Android，Vector Asset Studio 可以在运行时将您的矢量可绘制对象转换为针对每种屏幕密度的不同位图大小。

越小越好

对于Android，将VectorDrawable 转换为位图的光栅化过程发生在CPU 上。因此，创建图像所需的处理时间与图像本身的分辨率/尺寸之间大多存在线性关系。将三角形光栅化为 16x16 像素纹理可能只需要计算总共 8-12 像素的颜色片段。对 1024x1024 纹理执行相同操作将触及超过十万个像素，这显然需要更多时间。因此，随着您创建的纹理尺寸变大，加载时间会变得很重要，这将成为一个收支平衡点，使用 Vector Drawable 不再有意义。

Answer 2

矢量图标的 "dpi" 没有意义。矢量图标与 DPI 无关。这就是他们的重点。您将它们设计成多大并不重要。它只会影响您在运行时绘制（渲染）它们的大小。显示的尺寸越大，需要计算和绘制的像素就越多。

这就是@muhammad-younas 回答（来自this Colt McAnlis blog）中的第二段想要表达的意思。

Answer 3

我使用 InkScape 编辑并保存我的 SVG 文件（矢量图像）。从理论上讲，它可以很好地适应任何规模。理论上...

在 Android Studio 中，我使用 New、Vector Asset，并且 select SVG 文件它会在 drawables 文件夹下的 res 文件夹下生成一个 XML 文件。但有时，在没有任何解释的情况下，图像在我的 phone 中变得模糊（在 Android Studio 预览中不模糊）。太疯狂了。

我什么都试过了，一个动作就解决了我的问题：

我决定直接在 Android Studio 中更改 XML 文件。我阅读了一些关于 width 和 height 规格（图像大小）与 viewportWidth 和 viewportHeight（单元格中的图像实际大小 phone）

所以我决定扩大第一对 width 和 height

例如，一张模糊图像有：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="6.415605dp"
    android:height="5.33568dp"
    android:viewportWidth="6.415605"
    android:viewportHeight="5.33568">
 ....
</vector>

我脑子里设定了width = 25dp，所以我做了25 / 6.415605 = 3.89675。所以我将第一对中的两个数字都乘以 3.89675。所以我得到了 width 和 height.

的新值

这只是一个随机猜测。重要的是使 width 和 height 比 viewport width 和 viewport height 大得多，并保持比例。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="25dp"
    android:height="20.7915dp"
    android:viewportWidth="6.415605"
    android:viewportHeight="5.33568">
 ....
</vector>

它就像一个魅力......

在矢量图标上使用正确的 dpi

Using the right dpi on vector icons

icons

svg

android

android-vectordrawable