如何使用 Xcode AutoLayout 调整图像大小?

Posted

技术标签:

【中文标题】如何使用 Xcode AutoLayout 调整图像大小?【英文标题】:How do I resize images using Xcode AutoLayout? 【发布时间】:2015-01-22 13:05:57 【问题描述】:

我正在尝试为我的应用设计一个主屏幕。我首先使用 Photoshop 设计元素并尝试将它们放在我的故事板上。不过很快我就意识到我有问题。

我从 Photoshop 剪切的图片尺寸在 Storyboard 预览中看起来很大。我应该如何从下面的图片中剪切图片,以便它在所有 iPhone 尺寸上的布局和外观都很好?我熟悉自动布局。但是我不知道我应该选择调整每个图标的大小或比例。

这是我的原型图片。对不起,我不能排队,因为我没有足够的声誉。 http://i.stack.imgur.com/4gop1.jpg

【问题讨论】:

【参考方案1】:

启用 AutoLayout 以使用 Size Classes 并充分利用其强大的功能。

iPhone 和 iPad 使用不同的尺寸等级。您将能够专门选择一个尺寸等级并对其应用更改。

例如,如果您想在 iPhone 上专门使用 UIImage,您应该使用 compactWidth/RegularHeight 类。

如果您想在每台设备上放置图像,请使用 AnyWidth/AnyHeight 类。

了解更多关于自动布局here。

【讨论】:

感谢您的回答。我已经在我的项目中选择了自动布局和使用大小类选项。我不知道应该为我发布的每张图标图片选择什么尺寸。例如,如果我选择 92x84 作为我的图标,它在 iPhone 5 上显示为 OK。但是,如果我选择 iPhone 4s 或 iPhone 6,它会搞砸。因为我将这些图像的大小设置为按钮的背景图像,所以我没有不知道如何调整这些按钮的大小。我想要实现的是,为每个 idevice 创建单独的图像并将这些图标用于按钮。 我明白你的意思。几天前我遇到了同样的问题。是的,这很令人沮丧,因为您实际上无法使用 AutoLayout 定位特定设备,但有一种解决方法。您需要放置一个不可见的视图,为其设置顶部和底部约束并将图像放置在视图内。这是我的问题:***.com/questions/27989848/…。这是解决它的答案:***.com/a/20865342/1135714. 很抱歉成为这样的新手。按钮将在自动布局和大小类的帮助下调整大小。但是,如果我调整它的大小,图像看起来会不会很糟糕?我应该有非常大的图像以便它自动调整大小吗?或者我应该为每个屏幕尺寸制作单独的图像并将其命名为 2x 3x 等。如果您可以在我的图片中创建一个具有这种按钮结构的单视图应用程序,我将非常感激。我就是搞不定。 如果您没有设置正确的缩放模式,图像通常会看起来很“丑陋”。这意味着您应该在 Attributes Inspector 中选择“Aspect Fit”而不是“Scale to fit”。那是你要找的吗?我可以为您创建一个演示应用程序。 “我应该有非常大的图像以便它自动调整大小吗?”嗯,是。不过,不是因为它会使图像自动调整大小,而是因为您需要向用户提供将使用您的应用视网膜图像的用户,以最大限度地提高您应用的用户体验。 如果您能制作一款与我发布为图片的应用类似的应用,我将不胜感激。我也想知道你创建这些图片的方法。你会为图标创建一个大图像,以便它会因为宽高比而调整大小吗?或者您将使用图像集并为每个图标创建不同的大小。再次感谢您回答我的问题。【参考方案2】:

请务必在设备上进行测试。就在昨天,我还以为我也需要调整大小,但是当我将应用程序加载到实际的 iPad 上时,图像正好在应用约束以水平和垂直居中图像之后。

在那之后,我在将另一张图片正确地与第一张图片成比例放置时遇到了一些问题。我的解决方案只是让它们成为一张图片而不是两张。通过使用 cmd + C 从 Xcode 复制第二个图像并使用 cmd + V 将其复制到预览中的第一个图像中来快速完成此操作。

对于简单的情况,这可能比尝试正确计算布局更容易。

【讨论】:

以上是关于如何使用 Xcode AutoLayout 调整图像大小?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Xcode 6.3 中使用 AutoLayout 创建 ScrollView

使用Xcode 6中的AutoLayout约束模拟方面适合行为

如何使用自动布局调整情节提要的图像大小?

如何在 Xcode 中成功使用 AutoLayout 和 Constraints?

如何使用 Autolayout 缩放 Xcode 6 上的按钮以适应不同的屏幕尺寸?

如何使用 Autolayout 调整 UITableView 的大小?