如何在 Android 中验证(数字)像素完美开发?

How to verify (digital) pixel-perfect development in Android?

tl;dr 如何将一台设备上的像素测量值转换为另一台设备上的像素测量值?

我设计了一个 Android 应用程序,所有屏幕尺寸均为 720x1280 像素。我假设这是 2.0 xhdpi,表示数字像素尺寸为 360x640 dp。

现在在 QA 中,我在我的 Nexus 5x 上发现了一些不一致之处,截取了屏幕截图,并将它们拉入 Photoshop 以 confirm/measure 错误。 Nexus 5x 为 1080x1920 像素,但分辨率为 2.6 xxhdpi,可转换为 411x731 dp。

一个简单的秤会不会失败?

这可不是把 Nexus(1080 宽)截图拉到 Photoshop 中然后缩放到 720 宽那么简单,对吧?这不考虑像素密度。

换个说法。如果在我的@2x 设计中一个正方形是 100px (50dp),我应该期望它在 Nexus 屏幕截图上有多大?

有用的链接

您的 post 中有多个 questions/thoughts。

开始:

How do I convert pixel measurements on one device to pixel measurements on another?

并且:

I've designed an Android app with all the screens measuring 720x1280 px.

我假设你的意思是你制作了一些 720x1280 的数字 images/ux 文档,现在正在为你的应用构建 code/loading 图片并且 运行 遇到了问题因为不同的设备以意想不到的方式运行?如果这不准确,请纠正我。

为 Android 和一般的移动设备设计,至少在某种程度上是问问自己您希望用户体验什么,以及如何在构建界面的框架规则内实现这一点。

Google states 在处理多个设备时你应该瞄准 "density independence":

Your application achieves "density independence" when it preserves the physical size (from the user's point of view) of user interface elements when displayed on screens with different densities.

下图代表"bad"设计(不考虑dp)

下图代表好的"density independent"设计:

http://developer.android.com/guide/practices/screens_support.html#density-independence

换句话说,如果在设计和构建您的应用程序时考虑到密度独立性,用户应该在不同设备上以一致的方式查看图像 and/or。在不同设备上验证图像和视图不应在 Photoshop 或类似软件中完成,它应该在 Android Studio and/or 中提供的模拟器中在具有各种 OS 版本的多个物理设备上完成 and/or 屏幕尺寸(因为它们可供您使用)。

另一件事要记住:

您问的是:

Said another way. If a square is 100px (50dp) on my @2x design, how large should I expect it to be on the Nexus screenshot?

转到 Google Device Metrics 页面:

点击 Nexus 5x,然后从滑入式面板中查看设备信息:

根据此信息,Google Nexus 5x 为 424px/in,即 424dpi

使用等式 px = 50dp * (dpi / 160)

px = 132.5

还提供了一个真实示例,说明在使用特定设备时如何计算像素和 dp 大小,这很有价值,希望这可以帮助您进行下一步 and 以后再回答上面的问题。

假设我们有一些图像想要在设备处于纵向时 "perfectly" 适合整个设备。像这样:

假设我们的设备是 Nexus 5。如您在上面的示例中所见,屏幕上从左到右并排有 7 张相同的图像。通过以下示例,您应该能够计算出各种情况下的 "how large [you] should expect [images] to be":

  1. 我们知道 Nexus 5 是 xxhdpi 设备,因为我们在 Google’s Device Metrics:
  2. 中查找过它

  1. 让我们开始计算填充。我假设你默认有填充 - 在你的 values/dimens.xml 中检查它以确保:

这是我们需要考虑的 32dp。

3。接下来,我们知道 Nexus 5 的宽度是 360dp 或 1080px,所以让我们计算出我们的七张图片之一的宽度:

让我们决定导入图像时考虑到 xxdpi 的输入密度。

360dp(完整)- 32dp(填充)= 328dp(剩余 7 张图像)

328dp / 7 = 46.9dp(大约)

让我们转到 androidpixels,这是一个强烈推荐的转换网站,查看它以像素为单位的含义 - 在本例中,它等于 140.7 像素。

  1. 为我们的图像创建一个 140.7px 的 png 版本并将其导入为 xxhdpi(我们将以与设备相同的 dp 签名导入它)。

由于 Adob​​e Illustrator 和 Adob​​e Photoshop 不允许小数尺寸,您可以使用 140,并在 Android Studio 中用间距弥补差异。数学表明,如果这 7 张图像之间有 6 个间隙,并且我们每张图像丢失 0.7px,则为 6 * 0.7px = 4.2px,我们可能需要在某处考虑。

  1. Final Android Resizer 中导入图像后,强烈建议调整图像大小 - 或者将其导入适当的可绘制文件夹 - 最后一步:使用正确的图像更新 content_main.xml,并确保对所有七个 ImageView 元素执行此操作:

最终应该是这样的:

根据相关设备的尺寸再次执行这些步骤。

这也不是唯一的方法。您可以使用布局目录来精确定位特定的设备尺寸并影响其中的视图。看另一个post我发的关于这个: