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

Question

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

正如您可以看到文本的大小，图像的大小和位置不相同，但它们应该在不同的屏幕尺寸上看起来相同。

以下是在不同屏幕上运行的weather app的示例：

正如您所看到的，文本和图像的大小和位置是相同的。

图像从资产目录加载：

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

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

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

如何才能在不同的屏幕尺寸上实现相同比例的文字和图像？ Weather App如何做到这一点？

Answer 1

图片

我是Swift Weather app的创建者和开发者之一。该应用程序不使用三个版本的图像，因为我没有制作这些图像，它是来自另一个开发人员的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）。希望你明白这一点。

P.S。决议的良好指南是here。

P.P.S。在你的情况下，正如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设置为所需的界面元素比率。

Answer 4

Weather App正在使用高级模式在iPhone 6+上运行。您可以通过删除6/6 +的启动屏幕来启用它。

转到资产目录，选择您的启动图像并取消设置属性检查器中的“iOS 8或更高版本”复选框。

Screenshot - your app has this set

Screenshot from WeatherApp

Answer 5

以编程方式（X和Y）我们预先定义常量值：

var imageView : UIImageView
imageView  = UIImageView(frame:CGRectMake(XScale *someValue, YScale * someValue, XScale *someValue, YScale *someValue));
imageView.image = UIImage(named:"image.jpg")
self.view.addSubview(imageView)

然后以编程方式创建UIImageView

   def pathDirectory(self):

       path= str(QFileDialog.getExistingDirectory(ui.pathTab1, 'Select Path','', QFileDialog.ShowDirsOnly))

       return pathDir

根据您的屏幕尺寸，我们需要设置常量值。我们用于iPhone5和4s屏幕。

Answer 6

您需要将布局约束设置为所有视图，以使它们在所有屏幕尺寸中查看相同的位置和大小，前提是屏幕的宽高比相同。

Answer 7

您是否尝试从视图中删除autoResizing功能？ 点击内部箭头，按照超级视图

删除autoResize视图

Answer 8

1. 首先关闭故事板中的自动布局，自动调整大小和大小类。
2. 单击Images.xcassets图标并选择所有图形。在属性检查器中将“设备”属性设置为“特定于设备”，并设置对“iPhone”和“Retina 4英寸”选中的复选框
3. 将所有图形放在2x图像集中。您可以使用iPhone 6/6 +放置更高分辨率的图像集以获得更好的效果。
4. 设计参考设备的视图，例如iPhone 5（320x568肖像）。
5. 在viewDidLoad方法中粘贴以下代码

self.view.transform=CGAffineTransformScale(CGAffineTransformIdentity,self.view.frame.size.width/320, self.view.frame.size.height/568);

你将在iPhone 5 / 5s，iPhone 6/6 +上获得相同的结果。