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

我有一个简单的看法与文字和图像。 我在iPhone6Plus和iPhone5上运行这个应用程序。 然后我做了两个屏幕截图，并放大了iPhone5屏幕截图，使其与iPhone6Plus截图的大小相匹配。 结果如下：

正如你可以select文本的大小，图像的大小和位置是不一样的，但他们应该是在不同的屏幕大小相同。

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

正如你所看到的文字和图像的大小和位置是相同的。

该图像从资产目录加载：

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

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

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

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

Answer 1

图片

我是Swift Weather应用程序的创build者和开发人员之一。 该应用程序不使用三个版本的图像，因为我没有做这些图像，这是来自另一个开发人员的合并请求。 我没有原始图像。

正如@Daniil Korotin提到的，iOS使用points来计算图像和字体大小。 iOS使用let screenScale = UIScreen.mainScreen().scale来检索屏幕比例，并选取适当的图像大小（1x，2x或3x）。 如果我们不提供适当的图像大小，例如，在SwiftWeather应用程序中，我们只有1x版本的图像（如下面的屏幕截图），iOS会提升图像在视网膜设备上渲染。 在iPhone 6 Plus上，它实际上是对3倍资产进行降采样。 请看看iPhone 6的屏幕揭秘 。 在某些情况下，如果在视网膜设备上不提供2倍或3倍的图像，则从1倍放大的图像可能看起来模糊。 如果可能，我们应该总是提供1x，2x和3x图像。

字体

iOS根据指定的points呈现字体。 它会根据设备的屏幕比例（如上所述）自动将点转换为某个像素。

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

您可以看到我们为图像视图（用于天气图标）设置约束如下。 宽度和高度总是150 points ，请注意它是points或pixels 。 它将为不同的设备渲染相同的大小（外观和感觉，而不是完全像素）。 对于你的第一个图像（iPhone 6 Plus与iPhone 5），看起来不同，因为也许你的模拟器有不同的规模。 检查自动布局元素在屏幕上的位置的更好的方法是使用Interface Builder中的预览。

打开主要故事板，然后单击助理编辑器。 在右侧，select预览（在左上angular）。 然后点击加号（在左下angular）添加不同的设备。 你可以看到他们是不同的屏幕尺寸相同的比例。

如果您有任何问题，请告诉我。

有些事情可能脱离主题

如果我devise图像/资产，我想使用一些vector基础工具（如Sketch）来devise资产并将其导出为三种不同的尺寸。 请看看我的另一个项目iOSAnimationSample 。 它有一个devise草图文件。

素描devise

将资产导出到不同的大小

在这种情况下，iOS可以为不同的设备提取适当的资源。

Answer 2

您所指的应用程序不能正确支持多种屏幕尺寸。 界面被放大到6和6加上运行，这就是为什么一切都显示相同的大小。

看看你的应用程序的屏幕截图 – 状态栏是6加上更小。 这是因为它应该占用较less的屏幕空间。 在所有设备上都是20点。

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

如果你想达到相同的效果（你不应该这样做），那么删除LaunchScreen.xib文件并改为使用启动图像。 但是人们不会购买更大的电话屏幕，因为他们希望拥有相同的内容，但是更大。 通过简单地将手机靠近脸部，这将更便宜地实现。

您应该利用更大的显示屏，允许在屏幕上一次显示更多的内容 – 表格中的更多行数据，更多的书本文本和更多的照片库图像。

在天气应用的情况下，应该使用额外的空间来显示更多的小时预报或其他内容，而不仅仅是描绘天气types的相当无用的图标的更大版本。

我怀疑这只是游戏支持，意味着支持更大的屏幕正确的是不是应用程序商店提交的要求。 支持4英寸的屏幕很快就成为了强制性的，你应该期待在6和6 plus之前引入类似的规则。

如果你想要一个特定的元素总是占用屏幕宽度的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屏幕宽高比相同，但分辨率不同。 如果你想简单地保持比例，那么你必须select一个“基本”的屏幕宽度或高度（例如，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：好的，现在我明白了你的困惑。 这是事实：当苹果公司最初发布iPhone 6和6 Plus时，许多应用程序不支持他们的大屏幕和更大的分辨率。 所以他们决定，如果一个应用程序缺乏专门为这些手机设置的启animation面，应该使用iPhone 5的分辨率。

这就是为什么在手动调整屏幕截图后获得完全相同的图片：系统也是如此。 它只需要iPhone 5的“图片”，并延伸，以适应更大的屏幕。 缺点是清晰的（尤其是在iPhone 6 Plus上）：字体和图像模糊和放大（系统界面元素，如状态栏，也被放大）。 所以基本上你可以在所有大屏幕的设备上得到iPhone 5的图片 （你可以通过在iPhone 5上截图来手动resize，以适应iPhone 6/6 Plus的分辨率，并将实际的iPhone 6/6 Plus截图它）。

要清楚：这是你目前得到的行为，但不是很好。 要使用设备的原始分辨率正确缩放所有内容，请使用上面描述的方法（手动乘法）或将equal height / width equal height布局设置为所需比例的界面元素。

Answer 4

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

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

截图 – 你的应用程序有这个集合

WeatherApp的屏幕截图

Answer 5

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

 #define XScale [[UIScreen mainScreen] bounds].size.width / 320.0f #define YScale [[UIScreen mainScreen] bounds].size.height / 568.0f 

然后以编程方式创buildUIImageView

 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) 

基于你的屏幕大小，我们需要设置常量值。 我们使用iPhone5和4s屏幕。

Answer 6

您需要将布局约束设置为所有视图，以使它们在所有屏幕尺寸中查看相同的位置和尺寸，只要屏幕的纵横比相同即可。

Answer 7

你有没有试图从视图中删除autoResizingfunction？ 点击内部箭头按照autoResize视图移除autoResize视图

Answer 8

1. 首先closures故事板中的自动布局，自动resize和大小类别。
2. 单击Images.xcassets图标并select所有graphics。 在属性检查器中将Devices属性设置为“Device Specific”，并将checkbox设置为“iPhone”和“Retina 4-inch”
3. 将所有graphics放在2x图像集中。 您可以在iPhone 6/6 +上放置更高分辨率的图像以获得更好的效果。
4. devise您的视图为参考设备说iPhone 5（320×568肖像）。
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 +的效果也一样。