android - 如何在 Android 中验证(数字)像素完美的开发？

Question

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

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

现在在 QA 中，我发现了我的 Nexus 5x 上的一些不一致，截取了屏幕截图，并将它们拉入 Photoshop 以确认/测量错误。 Nexus 5x 为 1080x1920 像素，但为 2.6 xxhdpi，转换为 411x731 dp。

不会只是一个简单的规模失败？

这不像将 Nexus(1080 宽)屏幕截图拉入 Photoshop 并将它们缩放到 720 宽那么简单，对吧？这不考虑像素密度。

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

有用的网址

Android Docs, especially the part about Supporting Multiple Screens

Google's Device Metrics

Answer 1

您的帖子中有多个问题/想法。

开始:

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 的数字图像/UX 文档，现在正在为您的应用程序构建代码/加载图像并且遇到问题，因为不同的设备以意想不到的方式运行？如果这不准确，请纠正我。

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

谷歌 states在处理多个设备时，您应该以“密度独立”为目标:

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.

下图代表“糟糕”的设计(不考虑dp)



下图代表了良好的“密度无关”设计:



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

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

另一件要记住的事情:



你问:

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)

像素 = 132.5

还提供一个实际示例，说明在使用特定设备时如何计算像素和 dp 大小，并希望这有助于您进入下一步并在将来回答上述问题。

假设我们有一些图像，当设备处于纵向时，我们希望“完美”地适应设备。像这样:



假设我们的设备是 Nexus 5。正如你在上面的例子中看到的，有 7 个相同的图像并排，从屏幕的左侧到右侧。通过以下示例，您可能应该能够弄清楚在各种情况下“[您] 应该期望 [图像] 有多大”:

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

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

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

3. 接下来，我们知道 Nexus 5 的宽度是 360dp 或 1080px，所以让我们算出我们七个图像之一的宽度:

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

360dp (full) - 32dp (padding) = 328dp (剩余 7 张图片)

328dp/7 = 46.9dp(大约)

我们去androidpixels ，强烈推荐用于转换的网站，并以像素为单位查找这意味着什么 - 在这种情况下，它等于 140.7 像素。

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

由于 Adob​​e Illustrator 和 Adob​​e Photoshop 不允许使用十进制大小，因此您可以使用 140，并在 Android Studio 中用间距来弥补差异。数学表明，如果这 7 张图像之间有 6 个间隙，并且我们每张图像损失了 0.7px，那就是 6 * 0.7px = 4.2px，我们可能需要在某处考虑。

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

这就是它最终的样子:



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

这也不是唯一的方法。您可以使用布局目录来确定特定的设备尺寸并影响其中的 View 。请参阅我就此发表的另一篇文章:

Differences between scaling images with dpi as opposed to dp