我应该向 UI 开发人员询问什么尺寸的图像？答案

【问题标题】：What image size should I ask from UI developer?我应该向 UI 开发人员询问什么尺寸的图像？
【发布时间】：2018-08-01 07:19:14
【问题描述】：

我有一个具有以下属性的ImageView：

   android:layout_width="match_parent"
   android:layout_height="160dp"

UI 开发人员询问我想要的图片大小（以 px 为单位）。我应该问什么尺寸？我应该为不同的设备要求不同的尺寸吗？

注意

我没有具有特定高度和宽度的ImageView。我的 ImageView 宽度是 match_parent 不是特定宽度。

所有答案都说我应该使用转换器，如何将match_parent 转换为px？

根据答案，我应该问六张图片，不是吗？

【问题讨论】：

这取决于您的要求...
告诉你的 UI 设计师宽度取决于屏幕尺寸
检查此 URL 为您提供的基本 ICON 的多种分辨率图像。 romannurik.github.io/AndroidAssetStudio/…
根据您的问题，您必须将图像的大小提供给 UI 开发人员，对吗？您可以要求他提供 1440 x 2960 px 的图像，然后查看我的答案以获取适用于各种设备的所有图像。

标签： android android-layout android-imageview

【解决方案1】：

您应该为 UI 开发人员提供以像素为单位的最高屏幕密度，然后自行调整到较低的密度。

通常，Android 应用将支持最小屏幕密度 ldpi 和最大屏幕密度 xxxhdpi。

第 1 步：如果您希望图像尺寸为 160 x 160 dp，则为 UI 开发人员提供与最大屏幕密度相关的最大图像尺寸。

160 x 4 = 640x640 px (why multiply by 4? I will explain later)

第 2 步：根据屏幕密度将图像640x640 px 缩放到更小的尺寸

ldpi：160 x 0.75 = 120x120 像素
mdpi：160 x 1 = 160x160 像素
hdpi：160 x 1.5 = 240x240 像素
xhdpi：160 x 2 = 320x320 像素
xxhdpi：160 x 3 = 480x480 像素
xxxhdpi：160 x 4 = 640x640 像素

提示：找到您的图像尺寸对应于 mdpi 密度屏幕（称为base density 或1X 密度）然后通过以下公式缩放到其他密度

更新：从https://material.io/tools/devices/开始，基本密度屏幕的屏幕尺寸为360x640 px。所以你的ImageView 尺寸在1X 密度屏幕上将是360x160 px。

ldpi: 270x120 px 
mdpi: 360x160 px
hdpi: 540x240 px
xhdpi: 720x320 px
xxhdpi: 1280x480 px
xxxhdpi: 1440x640 px

【讨论】：

感谢您的回答，但我没有确切的宽度。我有一个 ImageView 和 match_parent 大小。
为什么需要显示一个宽度为match_parent的图像视图。你能给我一个用例吗？
我的应用中有一个滑块，它们的图像应该与其父级匹配
贵公司设计的图像显示在您的滑块中的ImageView 上。对吗？
是的，我在我的问题中描述了它。

【解决方案2】：

你为什么不使用 Vector drawable？

为什么要使用向量？

无需泛化即可以原始分辨率表示数据。
图像的图形输出比创建为光栅图像更令人愉悦
使用矢量图而不是光栅的另一个非常重要的原因是它们的大小。矢量对象比光栅图像格式小得多。如果我们要更新全尺寸图像，矢量文件在您的系统上可能只占用几千字节的空间，而中等分辨率位图格式的相同图像可能不会放在 CD ROM 上。

您应该在项目中使用 SVG 图像。

创建 SVG 而不是 PNG 文件

【讨论】：

感谢您的回答，但我从服务器获取这些横幅。
@salman 这并不妨碍服务器为.svg... @ 来自设计师 - 尽管如此，在设备上渲染 SVG 可以节省大量带宽。
@salman 商店。 svg 文件并下载此 svg 并设置为 imageview。

【解决方案3】：

好的，你想设置大小为 160dp 的图像高度（因为它是 dp 中的，这是 mdpi 中的大小）。因此，您必须要求 UI 开发人员为您制作 4 倍高度的图像。图像高度 = 4 * 160。之后，您可以使用 android studio 中的批量可绘制导入器，为所有不同的分辨率制作图像。希望对您有所帮助。

【讨论】：

【解决方案4】：

不同的设备有不同的尺寸

android:adjustViewBounds="true"是自动拾取的图像高度

这样你就可以了，

    <ImageView
        android:id="@+id/ivImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"/>

【讨论】：

【解决方案5】：

您应该使用1440x640 以获得最大尺寸。

如果您想支持具有多个图像的多个设备，您可以有 5 个标准图像切片。

mdpi : 360x160 hdpi : 540x240 xhdpi : 720x320 xxhdpi : 1080x480 xxxhdpi : 1440x640

我想出了这些图像尺寸，因为如果你look 最常见的显示尺寸，其中最大的是三星 Galaxy S8 的1440x2960。（我知道2160x3840，但它不是主流，我什至会说它彻底疯了）。

在您的情况下，您将宽度设置为match_parent，在每种最大（甚至自定义）DPI 的情况下，最多为1440px，因此您可以确定 99% 的时间不会超过它。（大多数当前具有 9:18 或 9:X 比率的设备在超过 1080 的情况下几乎在所有情况下都具有 1440 像素宽度。查看最新发布的设备的分辨率。）

因此您可以设置为 1440 像素的宽度。现在ImageView 的高度为 160dp。对于最大的默认 DPI xxxhdpi，它可以是（如其他人所建议的）160*4 = 640 px。您应该考虑标准 dpi 的高度的原因，因为它固定为 some dp (160dp)，并且对于自定义 dpi 设备，这可能会发生变化，因此您可以支持具有此 640 像素大小的最大设备。希望我对尺寸建议很清楚。

【讨论】：

【解决方案6】：

要在具有不同像素密度的设备上提供良好的图形质量，您应该在应用中提供每个位图的多个版本 - 每个密度桶一个版本，具有相应的分辨率。否则，Android 必须缩放您的位图，使其在每个屏幕上占据相同的可见空间，从而导致缩放伪影，例如 blurring。

图 1. 不同密度大小的位图的相对大小

您的应用中有多种密度存储桶可供使用。表 1 描述了可用的不同配置限定符以及它们适用的屏幕类型。

表 1. 不同像素密度的配置限定符。

要为不同的密度创建替代的位图可绘制对象，您应该遵循 3:4:6:8:12:16 的缩放比例 这六个主要密度。例如，如果您有一个可绘制的位图 中等密度屏幕的 48x48 像素，所有不同的尺寸应该是： em>

36x36 像素 (0.75x) 用于低密度 (ldpi)
48x48 像素（1.0x 基线），用于中等密度 (mdpi)
72x72 像素 (1.5x) 用于高密度 (hdpi)
96x96 像素 (2.0x) 用于超高密度 (xhdpi)
144x144 像素 (3.0x) 用于超高密度 (xxhdpi)
192x192 像素 (4.0x) 用于超超超高密度 (xxxhdpi)

然后，将生成的图像文件放在 res/ 下的相应子目录中，系统将根据运行您的应用的设备的像素密度自动选择正确的图像文件：

分辨率/

drawable-xxxhdpi/
```
 awesome-image.png
```
drawable-xxhdpi/
```
 awesome-image.png
```
drawable-xhdpi/
```
 awesome-image.png
```
drawable-hdpi/
```
 awesome-image.png
```
drawable-mdpi/
```
 awesome-image.png
```

然后，每当您引用 @drawable/awesomeimage 时，系统都会根据屏幕的 dpi 选择适当的位图。如果您没有为该密度提供特定于密度的资源，系统会选择下一个最佳匹配并对其进行缩放以适应屏幕。

提示：如果您有一些系统不应该缩放的可绘制资源（可能是因为您在运行时自己对图像进行了一些调整），您应该将它们放在具有 nodpi 配置限定符。具有此限定符的资源被视为与密度无关，系统不会对其进行扩展。

官方来源：Screen Densities

【讨论】：

感谢您的回答，但我没有确切的宽度。我有一个 ImageView 和 match_parent 大小。
既然您有一个具有 match_parent 大小的 ImageView，那么其中的图像也必须针对每个密度进行缩放（因为您的代码可能在不同的设备上运行或间接在不同的屏幕尺寸上运行），因此您可以使用具有不同屏幕密度的资源图像的逻辑（如上所述）。

【解决方案7】：

这是Material Design 提供的官方尺寸表，或者您可以要求 xxxhpdi，它是基于 1440 x 2960 像素的图像，并使用this site 获取所有不同密度的图像。当您获得不同密度的图像时，无需在 px 布局中指定高度和宽度。保留相同名称的图像并使用 match_parent。 Android会根据设备自动选择图片。

【讨论】：

【解决方案8】：

试试这个源代码

Display display = getWindowManager().getDefaultDisplay();
String displayName = display.getName();  // minSdkVersion=17+
Log.i(TAG, "Pantalla          = " + displayName);

// Tamaño en píxeles
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
Log.i(TAG, "Ancho             = " + width);
Log.i(TAG, "Alto              = " + height);

// dpi
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int heightPixels = metrics.heightPixels;
int widthPixels = metrics.widthPixels;
int densityDpi = metrics.densityDpi;
float xdpi = metrics.xdpi;
float ydpi = metrics.ydpi;
Log.i(TAG, "Ancho en píxeles  = " + widthPixels);
Log.i(TAG, "Alto en píxeles   = " + heightPixels);
Log.i(TAG, "Densidad dpi      = " + densityDpi);
Log.i(TAG, "x dpi             = " + xdpi);
Log.i(TAG, "y dpi             = " + ydpi);

// Deprecated
int screenHeight = display.getHeight();
int screenWidth = display.getWidth();
Log.i(TAG, "Alto de pantalla  = " + screenHeight);
Log.i(TAG, "Ancho de pantalla = " + screenWidth);

// Orientación 
int orientation = getResources().getConfiguration().orientation;
Log.i(TAG, "Orientación       = " + orientation);

【讨论】：

【解决方案9】：

是的，如果您不想使用矢量并希望使用图像（png 等）来代替，您需要为不同的屏幕尺寸拍摄多张图像。

由于您的宽度为match_parent，在这种情况下，为不同密度的桶获取具有最大屏幕宽度的图像：-

MDPI -> 320 px
HDPI -> 480 px
XHDPI -> 640 px
XXHDPI -> 1080 px

一个 dp 是一个虚拟像素单位，大致等于中等密度屏幕（160dpi；“基线”密度）上的一个像素。

根据上面的说法，你可以找到图像的高度：-

MDPI -> 160 px
HDPI -> 240 px
XHDPI -> 320 px
XXHDPI -> 480 px

How to calculate:-

考虑一下，160 dp 在 mdpi(1x) 中将是 160 像素。

160 dp   would be 240 px in hdpi (1.5x).

等等..

或使用函数px = dp * (dpi / 160)

对于 HDPI ，dpi 为 240

px = 160 * 240/160
px = 240

dpi 列表请参考this

This helped me to figure it out, and make things clear

【讨论】：

【解决方案10】：

你可以参考一下

 ldpi: 270x120 px 
mdpi: 360x160 px
hdpi: 540x240 px
 xhdpi: 720x320 px
xxhdpi: 1280x480 px
 xxxhdpi: 1440x640 px

【讨论】：

来源？属性你使用什么
它不是一个属性。它的布局不同