Xcode 自动布局：保持正方形的高度和宽度之间的最小值

Xcode autolayout: keep minimum between height and width of square

提问by famer

I used fixed aspect ratio for UIView so it's square. Then I set fixed trailing and leading space to borders of the screen they are the same. And kept vertical centered position. So in result I've got square on the center of the screen with some equal space before and after, if screen is wider square is bigger. That works perfectly in portrait orientation. But when I use landscape orientation, size of the square based on leading and trailing space becomes bigger than height of the device so it's not fit. Is it a way to have square based on constrains and choosing smallest of two dimensions? Is it a way to have spacing to the screen borders different for iPhone and iPad?

我为 UIView 使用了固定的纵横比，所以它是方形的。然后我将固定的尾随和前导空间设置为屏幕边框，它们是相同的。并保持垂直居中位置。所以结果我在屏幕中央有一个正方形，前后有一些相等的空间，如果屏幕更宽，正方形就更大。这在纵向方向上非常有效。但是当我使用横向时，基于前后空间的正方形的大小变得大于设备的高度，所以它不适合。这是一种基于约束并选择二维中最小的正方形的方法吗？有没有办法让 iPhone 和 iPad 的屏幕边框间距不同？

回答by Ken Thomases

Add an inequality constraint for the Top such that the spacing is greater than or equal to your minimum.

为顶部添加不等式约束，使间距大于或等于您的最小值。

That will actually create a conflict with your other constraints. You can resolve that by lowering the priority of the Leading and Trailing constraints. Unfortunately, that leaves ambiguity. When the superview is wider than the square, should the Leading constraint or the Trailing constraint hold?

这实际上会与您的其他约束产生冲突。您可以通过降低 Lead 和 Trailing 约束的优先级来解决这个问题。不幸的是，这留下了歧义。当superview比正方形宽时，Leading约束或Trailing约束应该成立吗？

Actually, you don't want either to hold. That would put the square off to one side or the other. You want the square centered. So, remove the Trailing constraint and instead add a constraint to keep the square centered in its superview.

事实上，你也不想持有。那会使正方形偏向一侧或另一侧。你想要正方形居中。因此，移除 Trailing 约束并添加一个约束以保持正方形在其父视图中居中。

So, in summary:

所以，总结一下：

• Two constraints, vertical and horizontal, to keep the square centered.
• A Top constraint to keep the space there greater than or equal to the minimum.
• A Leading constraint to keep the space there equal to the minimum but lower its priority.

• 两个约束，垂直和水平，保持正方形居中。
• 一个顶部约束，以保持那里的空间大于或等于最小值。
• 保持空间等于最小值但降低其优先级的领先约束。

When the superview is narrower than it is tall, the Top constraint will be easily satisfied (the space will be greater than the minimum). So, the Leading constraint will govern the size of the square.

当父视图窄大于高时，顶部约束将很容易满足（空间将大于最小值）。因此，Leading 约束将控制正方形的大小。

When the superview is wider than it is tall, the Leading constraint will try to make the square so big that its top and bottom go out of its superview. However, the Top constraint will prevent that from happening. The system will allow the Leading constraint to be broken because it's lower priority, but it will still try to get as close as possible to satisfying it. That will make sure the square is as big as will fit.

当父视图的宽度大于高度时，Leading 约束将尝试使正方形变得如此之大，以至于其顶部和底部超出其父视图。但是，Top 约束将阻止这种情况发生。系统将允许打破领先约束，因为它的优先级较低，但它仍将尝试尽可能接近满足它。这将确保正方形尽可能大。

回答by jday

Check out size classes in your storyboard: https://developer.apple.com/library/ios/recipes/xcode_help-IB_adaptive_sizes/chapters/AboutAdaptiveSizeDesign.html

查看故事板中的尺寸类别：https: //developer.apple.com/library/ios/recipes/xcode_help-IB_adaptive_sizes/chapters/AboutAdaptiveSizeDesign.html

When your constraint is selected, you can click the little +next to Constantand then choose a size class to have a separate constraint. If you are working with iPhones in landscape, check out Any Width x Compact Height:

选择约束后，您可以单击+旁边的小图标Constant，然后选择一个尺寸等级以设置单独的约束。如果您在横向使用 iPhone，请查看Any Width x Compact Height：

A cool way to see these in action is to show the assistant editor (middle interlocking rings icon). From the menu at the top of the view that appears, select Preview and the name of your storyboard. Then you have the ability to add previews for different devices and see how your constraints will show up on each. You can also rotate those previews back and forth between portrait and landscape. It's a really helpful tool for knowing when your constraints are set properly.

查看这些操作的一个很酷的方法是显示助理编辑器（中间互锁环图标）。从出现的视图顶部的菜单中，选择预览和故事板的名称。然后，您可以为不同的设备添加预览，并查看您的约束将如何显示在每个设备上。您还可以在纵向和横向之间来回旋转这些预览。这是一个非常有用的工具，可用于了解何时正确设置了约束。