模拟使用X code 6自动版式约束方面的配合行为 [英] Emulating aspect-fit behaviour using AutoLayout constraints in Xcode 6

问题描述

我想用自动版式大小和布局的方式，让人想起的UIImageView的方面配合内容模式的看法。

I want to use AutoLayout to size and layout a view in a manner that is reminiscent of UIImageView's aspect-fit content mode.

我在界面生成器的容器视图内的子视图。该子视图有一些固有的高宽比，我想尊重。容器视图的大小是未知的，直到运行时。

I have a subview inside a container view in Interface Builder. The subview has some inherent aspect ratio which I wish to respect. The container view's size is unknown until runtime.

如果容器视图的纵横比大于子视图更宽，那么我想子视图的高度等于父视图的高度。

If the container view's aspect ratio is wider than the subview, then I want the subview's height to equal the parent view's height.

如果容器视图的纵横比大于子视图高，那么我想子视图的宽度等于父视图的宽度。

If the container view's aspect ratio is taller than the subview, then I want the subview's width to equal the parent view's width.

在祝子视图的容器视图内进行水平，垂直居中无论是哪种情况。

In either case I wish the subview to be centered horizontally and vertically within the container view.

有没有办法实现X code 6或previous版本使用自动版式限制？理想的情况下使用Interface Builder，但如果没有这也许是可以以编程定义这样的约束。

Is there a way to achieve this using AutoLayout constraints in Xcode 6 or in previous version? Ideally using Interface Builder, but if not perhaps it is possible to define such constraints programmatically.

推荐答案

您不是描述的规模到合适;你描述方面的配合。 （我已编辑在这方面你的问题。），同时保持其纵横比和完全其父内配合的子视图变得尽可能的大。

You're not describing scale-to-fit; you're describing aspect-fit. (I have edited your question in this regard.) The subview becomes as large as possible while maintaining its aspect ratio and fitting entirely inside its parent.

无论如何，你可以使用自动布局做到这一点。您可以在IB完全做到这一点为X code 5.1。让我们先从一些看法：

Anyway, you can do this with auto layout. You can do it entirely in IB as of Xcode 5.1. Let's start with some views:

的浅绿色视图具有长宽比为4：1。暗绿色视图具有1的纵横比1:4。我要建立约束使蓝色视图填满屏幕的上半部分，粉红色的看法填满屏幕的下半部分，每个绿色视图，同时保持其纵横比和配件扩展尽可能的容器。

The light green view has an aspect ratio of 4:1. The dark green view has an aspect ratio of 1:4. I'm going to set up constraints so that the blue view fills the top half of the screen, the pink view fills the bottom half of the screen, and each green view expands as much as possible while maintaining its aspect ratio and fitting in its container.

首先，我将创建蓝色观点四面约束。我将其固定在每个边的近邻，为0的距离我一定要关闭边距：

First, I'll create constraints on all four sides of the blue view. I'll pin it to its nearest neighbor on each edge, with a distance of 0. I make sure to turn off margins:

请注意，我的不尚未更新框架。我发现很容易通过手工设置约束时，离开视图间房间，刚刚成立的常量为0（或其他）。

Note that I don't update the frame yet. I find it easier to leave room between the views when setting up constraints, and just set the constants to 0 (or whatever) by hand.

接下来，我左边，底部，和粉红色视图的右边缘引脚到其最近的邻居。我并不需要设置的顶缘约束，因为它的顶部边缘已被约束到蓝色视图底部边缘

Next, I pin the left, bottom, and right edges of the pink view to its nearest neighbor. I don't need to set up a top edge constraint because its top edge is already constrained to the bottom edge of the blue view.

我还需要粉色和蓝色的看法之间的平等，高度限制。这会让他们每个填充半个屏幕：

I also need an equal-heights constraint between the pink and blue views. This will make them each fill half the screen:

如果我告诉X code现在更新所有的帧，我得到这样的：

If I tell Xcode to update all the frames now, I get this:

所以限制，我成​​立迄今是正确的。我撤消和浅绿色的观点开始工作。

So the constraints I've set up so far are correct. I undo that and start work on the light green view.

看点合身的浅绿色的观点需要五个约束：

Aspect-fitting the light green view requires five constraints:

在浅绿色视图
• 系统所需的优先级高宽比的约束。您可以5.1或更高版本创建的厦门国际银行或情节串连图板以X code此约束。


• 系统需要优先约束限制淡绿色视图的宽度小于或等于其容器的宽度。


• 高优先级的设置约束淡绿色视图的宽度等于其容器的宽度。


• 系统需要优先约束限制淡绿色视图的高度小于或等于其容器的高度。


• 高优先级的设置约束淡绿色视图的高度等于它的容器的高度。

让我们考虑两种宽度的限制。在低于或相等约束，其本身并不足以确定浅绿视图的宽度;很多的宽度适合约束。由于有歧义，自动布局将尽量选择该误差最小的其它（高优先级但不要求）约束的解决方案。最小化错误意味着使宽度尽可能接近到容器的宽度，同时不违反所需低于或相等约束

Let's consider the two width constraints. The less-than-or-equal constraint, by itself, is not sufficient to determine the width of the light green view; many widths will fit the constraint. Since there's ambiguity, autolayout will try to choose a solution that minimizes the error in the other (high-priority but not required) constraint. Minimizing the error means making the width as close as possible to the container's width, while not violating the required less-than-or-equal constraint.

同样的事情发生在高度约束。并且因为还需要的宽高比约束，它只能沿一个轴最大化子视图的大小（除非容器恰好具有相同的纵横比的子视图）。

The same thing happens with the height constraint. And since the aspect-ratio constraint is also required, it can only maximize the size of the subview along one axis (unless the container happens to have the same aspect ratio as the subview).

首先，我创建了纵横比约束：

So first I create the aspect ratio constraint:

然后，我创建与容器相同的宽度和高度的限制：

Then I create equal width and height constraints with the container:

我需要编辑这些限制是低于或相等的约束：

I need to edit these constraints to be less-than-or-equal constraints:

接下来，我需要建立另一套与容器相同的宽度和高度的限制：

Next I need to create another set of equal width and height constraints with the container:

和我需要比要求的少优先这些新的限制：

And I need to make these new constraints less than required priority:

最后，要求在其容器为中心的子视图，所以我会设置这些限制：

Finally, you asked for the subview to be centered in its container, so I'll set up those constraints:

现在，为了测试，我将选择视图控制器，并要求X code到更新所有的帧。这是我得到：

Now, to test, I'll select the view controller and ask Xcode to update all the frames. This is what I get:

哎呀！该子视图已经扩展到完全填充它的容器。如果我选择它，我可以看到，其实它保持了其长宽比，但它做的一个方面 - 填写，而不是一个方面 - 契合

Oops! The subview has expanded to completely fill its container. If I select it, I can see that in fact it's maintained its aspect ratio, but it's doing an aspect-fill instead of an aspect-fit.

的问题是，在低于或相等约束，它的问题的图，是在约束的每一端，且X code具有从我的期望设置的约束相反。我可以选择每两个限制和反向它的第一项，第二项。相反，我只会选择子视图和更改的限制要大于有或等于：

The problem is that on a less-than-or-equal constraint, it matters which view is at each end of the constraint, and Xcode has set up the constraint opposite from my expectation. I could select each of the two constraints and reverse its first and second items. Instead, I'll just select the subview and change the constraints to be greater-than-or-equal:

X $ C $ç更新的布局：

Xcode updates the layout:

现在我所有的同样的事情在底部的深绿色的视图。我需要确保其高宽比为1：4（X code调整它在一个奇怪的方式，因为它没有限制）。因为它们是相同的，我不会再次显示的步骤。这里的结果是：

Now I do all the same things to the dark green view on the bottom. I need to make sure its aspect ratio is 1:4 (Xcode resized it in a weird way since it didn't have constraints). I won't show the steps again since they're the same. Here's the result:

现在我可以在iPhone 4S的模拟器，它具有比IB使用不同的屏幕大小和测试旋转运行它：

Now I can run it in the iPhone 4S simulator, which has a different screen size than IB used, and test rotation:

我可以在iPhone模拟器6中测试：

And I can test in in the iPhone 6 simulator:

我上传我最后的情节串连图板，以为了您的方便这一主旨。

I've uploaded my final storyboard to this gist for your convenience.

这篇关于模拟使用X code 6自动版式约束方面的配合行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！