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

Question

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

我设计了一个Android应用程序,所有屏幕都是720x1280像素.我假设这是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,尤其是关于支持多个屏幕的部分
• Google的设备指标

Answer 1

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

开始:

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

和:

我设计了一个Android应用程序,所有屏幕都是720x1280像素.

我将假设你的意思是你制作了一些720x1280的数字图像/ ux文件,现在正在为你的应用程序构建代码/加载图像并遇到问题,因为不同的设备表现出意想不到的行为？如果这不准确,请纠正我.

一般来说,设计Android和移动设备至少在某种程度上要问自己想要用户体验什么,以及如何在框架的构建界面规则中实现这一目标.

谷歌表示,在处理多种设备时,您应该追求"密度独立性":

当您的应用程序在具有不同密度的屏幕上显示时,保留用户界面元素的物理大小(从用户的角度来看),可实现"密度独立性".

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

下图显示了良好的"密度无关"设计:

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

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

另外要记住的事情是:

您询问:

换句话说.如果我的@ 2x设计上的正方形是100px(50dp),那么我对Nexus截图有多大的期望？

转到Google Device Metrics页面:

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

根据这个信息,谷歌Nexus 5x是424px/in,即424dpi

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

px = 132.5

如何在使用特定设备时计算像素和dp大小的实际示例也很有价值,并希望这有助于您进入下一步并在将来回答上述问题.

假设我们有一些图像,当设备处于纵向时,我们希望在设备上"完美"地适合它们.像这样:

并且假设我们的设备是Nexus 5.正如您在上面的示例中所看到的,从屏幕的左侧到右侧并排有7个相同的图像.通过以下示例,您可能应该能够找出"对于各种情况,您应该期望[图像]有多大":

1. 我们知道Nexus 5是一款xxhdpi设备,因为我们在Google的设备指标中查找了它:

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

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

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

让我们决定在输入密度为xxdpi的情况下输入我们的图像.

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

328dp/7 = 46.9dp(约)

让我们去androidpixels,强烈推荐的转换网站,并查找像素的含义 - 在这种情况下,它等于140.7px.

4. 创建我们的图像的png版本140.7px并将其导入为xxhdpi(我们将其导入到与设备相同的dp签名中).

由于Adobe Illustrator和Adobe Photoshop不允许使用小数,因此您可以使用140,并在Android Studio中弥补间距的差异.数学表明,如果这7张图像之间有6个间隙,并且我们每张图像丢失了0.7px,那么我们可能需要考虑6*0.7px = 4.2px.

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

这应该是最终的样子:

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

这也不是唯一的方法.您可以使用布局目录来查明特定的设备尺寸并影响其中的视图.看到我对此做的另一篇文章:

使用dpi缩放图像与dp相比之间的差异