自动布局 - 的6次平均分配 [英] Autolayout - equal distribution of 6 views

问题描述

我想有6个对象一个视图里面布置（按钮）。他们应该，不过，遵循一些约束：

I want to have 6 objects (buttons) laid out inside one view. They should, however, follow some constraints:

• 两个最上面的扣子应该有来自上海华同一垂直距离（ A ）


• 两个底部 - 相同的（ C ）


• 二，中间应该有在上海华中心线其中心


• 所有的按钮之间的垂直距离（电子）应该是相同


• 和最后但并非最不重要 - 按钮应该是正方形（这样的宽度和高度应该是相同的）


• A = C


• B = D

• Two top buttons should have the same vertical distance from superview (A)
• Two bottom - the same (C)
• Two in the middle should have their centers at the superview's center line
• The vertical distances between all buttons (E) should be the same
• and last but not least - the buttons should be square (so the width and height should be the same)
• A = C
• B = D

时有可能有刚刚在IB这种效果，或者我应该使用一些额外的code的限制？

Is it possible to have this effect just in the IB, or should I use some additional code for the constraints?

推荐答案

这是一个合乎逻辑的要求，但限制使用的视图的属性进行定义的，但不能没有相对于其他约束定义。话虽如此，有许多方法：

This is a logical request, but constraints are defined using the attributes of views, but cannot not be defined in relation to other constraints. That having been said, there are a number of approaches:

1. 布局指南：不需要predetermining的任何间距是有 UILayoutGuide 对象或一种方法，如果9点前使用的是iOS版本，只需使用隐藏的看法，有明确的背景或零阿尔法即意见，按键之间。

1. Layout guides: An approach which doesn't require predetermining the any spacing is to have UILayoutGuide objects or, if using iOS versions before 9, just use hidden views, i.e. views with clear background or alpha of zero, in between the buttons.

我们的想法是用 addLayoutGuide 添加这些布局指南（如果支持的iOS版本添加具有 addSubview 看不见的意见在六个按钮之间predating的iOS 9）为隔板，并限定间隔件是大小彼此相同，并与隔离物的上海华，和按钮之间的约束，将走在隔板之间。当你躺在了这一点（表示在红蓝，那些垂直横隔板的意见，只是让你可以看到它们）：

The idea is to add these layout guides with addLayoutGuide (or add invisible views with addSubview if supporting iOS versions predating iOS 9) in between your six buttons as "spacers", and define the spacers to be the same size as each other, and with constraints between the spacers, the superview, and the buttons that will go in between the spacer. Once you lay that out (showing the horizontal spacer views in blue, vertical ones in red, just so you can see them):

等效VFL为那些红色的约束的UIView 对象，名为 vspacerX ，将是：

The equivalent VFL for the constraints for those red UIView objects, called vspacerX, would be:

H:|[vspacer1][button1(100)][vspacer2(==vspacer1)][button2(==button1)][vspacer3(==vspacer1)]|
H:|[vspacer1][button3(==button1)][vspacer2][button4(==button1)][vspacer3]|
H:|[vspacer1][button5(==button1)][vspacer2][button6(==button1)][vspacer3]|

和蓝色的约束的UIView 对象，名为 hspacerX ，如：

And constraints on the blue UIView objects, called hspacerX, like:

V:|[hspacer1][button1(100)][hspacer2(==hspacer1)][button3(==button1)][hspacer3(==hspacer1)][button5(==button1)][hspacer4(==hspacer1)]|
V:|[hspacer1][button2(==button1)][hspacer2][button4(==button1)][hspacer3][button6(==button1)][hspacer4]|

您不必使用VFL来定义这些约束，当你定义这些限制将工作的任何方式，但它只是描述我所用约束的集合简洁的格式。

You don't have to use VFL to define these constraints, as any way you define these constraints will work, but it's just a concise format for describing the collection of constraints that I employed.

总之，当视图与布局指南（或不可见的观点）提供的，它产生间隔均匀按钮，就像这样：

Anyway, when the view is rendered with those layout guides (or invisible views), it yields evenly spaced buttons like so:

另一种方法是有六个容器的观点，这将是这样的：

Another approach is to have six "container" views, that would look like:

等效VFL这六个货柜的UIView 对象可能是这样的：

The equivalent VFL for these six container UIView objects might look like:

H:|[container1][container2(==container1)]|
H:|[container3(==container1)][container4(==container1)]|
H:|[container5(==container1)][container6(==container1)]|

V:|[container1][container3(==container1)][container5(==container1)]|
V:|[container2(==container1)][container4(==container1)][container6(==container1)]|

您可以再加入你的按钮，即，围绕一个在每个六个小容器中，然后让你的容器明确的：

You can then add your buttons to that, centering one on each of the six little containers and then make your containers clear:

这个工作，也不过只是一个稍微不同的间隔（其中，利润率在视图之间的间距的一半，而另一方法可以使边缘一样它们之间的间距

This works, too, but just a slightly different spacing (where the margins are half of the spacing between the views, whereas the other approach keeps the margins the same as the spacing between them.

堆栈视图：在现有点的排列，在iOS中9，你也可以使用新的<一个href=\"https://developer.apple.com/library/$p$prelease/ios/documentation/UIKit/Reference/UIStackView_Class_Reference/index.html\"相对=nofollow> UIStackView ，设计precisely为均匀间距的意见。在这种情况下，把每两个集装箱观点三横叠意见，然后将垂直堆叠视图中的堆栈意见。这实现了6均匀大小的容器意见。然后，您可以添加按钮，这六个容器视图中居中。虽然这听起来比以前更点的工作，它极大地减少了，你必须做出，这实际上使得它更简单的限制数量。

Stack view: In a permutation of the prior point, in iOS 9, you can also use the new UIStackView, designed precisely for evenly spacing views. In this case, put two container views each in three horizontal stack views, and then place those stack views within a vertical stack view. This achieves six evenly sized container views. You can then add the buttons, centered within those six container views. While this sounds like more work than the prior point, it dramatically reduces the number of constraints that you have to make, which actually makes it far simpler.

请参阅2015年WWDC的视频在什么可可触摸的新增功能。

See WWDC 2015 video What's New in Cocoa Touch.

NSLayoutAttributeCenterX 与多个：另一种方法包括定义属性：NSLayoutAttributeCenterX 和属性：NSLayoutAttributeCenterY 属性的六个按钮，而不是使用恒值，可以使用乘数字段。这种技术享有有点简单，但并不总是呈现预期的效果，所以，除非它是你一定要追求的东西我就不形容了。我已经进入了TL：这里境内博士

NSLayoutAttributeCenterX with multiple: Another technique involves defining the attribute:NSLayoutAttributeCenterX and attribute:NSLayoutAttributeCenterY attributes for your six buttons, but rather than using the constant values, use the multiplier field. This technique enjoys a little simplicity, but doesn't always render the desired effect, so I won't describe it unless it's something you definitely want to pursue. I've already entered tl:dr territory here.

Col​​lection视图：另一种方法是使用<一个href=\"https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionView_class/index.html\"相对=nofollow> UICollectionView ，该会优雅的处理这种情况。它的精心设计，让你布局单元格在网格中。

Collection view: Another approach is to use a UICollectionView, which handles this scenario gracefully. It's well designed to let you layout cells in a grid.

硬编码值：为了完整起见，我会注意到，你可以简单地为A，B，C和D指定特定值（以及宽度和高度约束）。你甚至不必担心设置电子限制，而是只设置中间的两个自己的上海华的垂直中心的约束，而你有效地完成（因为用E psented的间距重新$ P $应该是一个的previous步骤自然结果，假设A = C和B = D）。如果你想器件尺寸和/或方向的基础上，调整这些值，就可以实现一个 viewWillLayoutSubviews 来调整这些限制的常量根据的大小视图。

Hardcoding values: For the sake of completeness, I'll note that you could simply specify specific values for A, B, C, and D (as well as the width and height constraints). You don't even have to worry about setting the E constraints, but rather just set the vertical center constraint of the middle two to their superview, and you're effectively done (because the spacing represented by E should be a natural result of the previous steps, assuming A=C and B=D). If you want to adjust these values on the basis of device size and/or orientation, you can then implement a viewWillLayoutSubviews to adjust the constants for these constraints according to the size of the view.

这篇关于自动布局 - 的6次平均分配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！