在不同设备上校正图像和字体比例？

Question

我有一个简单的视图与文本和图像.我在iPhone6Plus和iPhone5上运行了这个应用程序.然后我制作了两者的截图并放大了iPhone5截图,使其与iPhone6Plus截图的大小相匹配.结果如下:

你可以看到文本的大小,图像的大小和位置不一样,但它们应该在不同的屏幕大小上看起来相同.

以下是在不同屏幕上运行的天气应用程序的示例:

如您所见,文本和图像的大小和位置是相同的.

图像从资产目录加载:

imageView.image = UIImage(named: "shower3")
self.view.addSubView(imageView)
imageView.center = self.view.center

我只创建了一个128x128图像并将其放入资产目录中的@ 1x版本.

让我重新说一下.我在iPhone5上运行了另一个应用程序makecreenshotshot和iPhone6截图.然后我将两个屏幕截图调整为相同的大小.然后我看到两个截图上的字体大小和图像尺寸都完全相同.这意味着在每个设备上,字体和图像必须具有不同的尺寸.我怎样才能做到这一点？

如何在不同的屏幕尺寸上实现该文本和图像具有相同的比例？天气应用程序如何做到这一点？

Answer 1

图片

我是Swift Weather应用程序的创建者和开发者之一.该应用程序不使用三个版本的图像,因为我没有制作这些图像,它是来自另一个开发人员的Pull Request.我没有原始图像.

正如@Daniil Korotin所提到的,iOS用于points计算图像和字体大小.iOS用于let screenScale = UIScreen.mainScreen().scale检索屏幕比例并选择适当大小(1x,2x或3x)的图像.如果我们没有提供适当大小的图像,例如,在SwiftWeather应用程序中,我们只有1x版本的图像(如下面的屏幕截图所示),iOS将升级图像以在视网膜设备上呈现.在iPhone 6 Plus上,它实际上对3倍资产进行了下采样.请看看iPhone 6 Screens Demystified.在某些情况下,如果您不提供2x或3x图像,在视网膜设备上,从1x升级的图像可能看起来模糊.如果可能的话,我们应该始终提供1x,2x和3x图像.

字体

iOS根据指定的内容呈现字体points.它会根据设备的屏幕比例自动将点转换为特定像素(如上所述).

如何在不同的屏幕尺寸上实现该文本和图像具有相同的比例？天气应用程序如何做到这一点？ 答案是自动布局

您可以看到我们为图像视图设置了约束(用于天气图标),如下所示. 宽度和高度总是150 points,请注意它points也不是pixels.它将为不同的设备呈现相同的大小(外观和感觉,而不是精确的像素).对于您的第一张图片(iPhone 6 Plus与iPhone 5),它看起来不同,因为您的模拟器可能具有不同的比例.检查自动布局元素在屏幕上的显示方式的更好方法是在Interface Builder中使用预览.

打开主故事板,然后单击"辅助编辑器".在右侧,选择"预览"(位于左上角).然后单击加号(左下角)以添加不同的设备.您可以看到它们在不同屏幕尺寸上的比例相同.

如果您有任何疑问,请告诉我.

有些事可能不在话题

如果我设计图像/资产,我想使用像Sketch这样的矢量基础工具来设计资产并将它们导出为三种不同的尺寸.请看看我的另一个项目iOSAnimationSample.它有一个Sketch文件用于设计.

素描设计

将资产导出为不同的大小

在这种情况下,iOS可以为不同的设备选择合适的资产.

Answer 2

您所指的应用程序不能正确支持多种屏幕尺寸.界面按比例放大以在6和6加上运行,这就是为什么所有内容都显示相同的大小.

查看应用程序的屏幕截图 - 状态栏在6加上小得多.这是因为它应占用较少的屏幕空间.它在所有设备上都高出20分.

现在查看天气应用程序的屏幕截图 - 状态栏大小相同.由于天气应用程序不支持多种屏幕尺寸,因此iOS只需使用较小的界面并将其缩放以填充屏幕.

如果要实现相同的效果(您不应该这样做),请删除该LaunchScreen.xib文件并改为使用启动图像.但人们不会购买更大的电话屏幕,因为他们希望拥有相同的内容,但更大.只需将手机靠近一个人的脸就可以更便宜地实现这一目标.

您应该通过允许在屏幕上一次显示更多内容来利用更大的显示 - 表格中的更多行数据,书籍中的更多文本,来自照片库的更多图像.

在天气应用程序的情况下,额外的空间应该用于显示更多行的每小时预报或其他东西,而不仅仅是描绘天气类型的相当无用的图标的更大版本.

我怀疑只有游戏支持意味着正确支持更大的屏幕并不是应用商店提交的必要条件.支持4英寸屏幕变得非常快,你应该期望在6和6加之前引入类似的规则.

如果您希望特定元素始终占据屏幕宽度的50%,或者标签始终与图像大小相同,则使用带有乘数的自动布局约束.自动布局约束是基本结构:

attribute of A = (attribute of B * multiplier) + constant

大部分时间乘数都是一个,所以你只是说这是左边的20点,或者其他什么,但你也可以使用乘数,并说A是B的宽度,乘以2或0.5或任何你喜欢的.

Answer 3

iOS用于points计算图像和字体大小.在非视网膜屏幕上1点等于1像素,在视网膜屏幕上 - 2像素,而对于iPhone 6 Plus,它等于3像素(虽然应用了一些缩小).如果要根据屏幕的实际像素大小缩放图像和字体,可以获得每点的像素数,如下所示:

CGFloat screenScale = [[UIScreen mainScreen] scale];

iPhone 5,6和6 Plus屏幕宽高比相同,但分辨率不同.如果你想简单地保持比例,那么你必须选择一个"基础"屏幕宽度或高度(比如,iPhone 5屏幕宽度,即320.0点),然后通过除以实际设备屏幕宽度来计算比例(例如, iPhone 6 Plus屏幕宽度,即414.0点)的'基础'宽度(414.0/320.0 = 1.29375).您可以像这样获得屏幕大小:

CGRect screenBounds = [[UIScreen mainScreen] bounds];

将screenBounds宽度除以基宽给出比例.然后你只需将所有尺寸和边距乘以该比例(对于iPhone 6 Plus,我们的情况为1.29375).希望你明白这个主意.

PS 这里有一个很好的决议指南.

PPS在你的情况下,正如下面提到的skorolkov,应用程序只是为更大的屏幕升级所有内容(添加/删除启动屏幕以启用/禁用此放大).

UPD:好的,现在我看到让你感到困惑的是什么.事情就是这样:当Apple最初发布iPhone 6和6 Plus时,很多应用程序都不支持更大的屏幕和更大的分辨率.所以他们决定,如果一个应用程序缺少专门为这些手机制作的闪屏,它应该使用iPhone 5分辨率.

这就是为什么在手动调整屏幕截图后获得完全相同的图片的原因:系统也会这样做.它只需要iPhone 5'图片'并将其拉伸以适应更大的屏幕.缺点很明显(并且可见,特别是在iPhone 6 Plus上):字体和图像模糊和放大(系统界面元素,如状态栏,也升级).因此,基本上你可以在所有大屏幕设备上获得iPhone 5图片(你可以通过在iPhone 5上截取屏幕截图,手动调整大小以适应iPhone 6/6 Plus分辨率并将实际的iPhone 6/6 Plus屏幕截图与它).

要明确:这是你目前获得的行为,但并不好.要使用设备的原始分辨率正确缩放所有内容,请使用上述方法(手动乘法)或自动布局,并为接口元素设置equal height/ width设置所需的比率.