自动布局 - 中间有 5 个按钮
Auto layout - 5 buttons in center
我想进入 Auto Layout 行业，但我觉得有点难。
我正在尝试让 5 个图像视图在视图中心并排显示。他们也需要调整自己的大小以扩展他们的高度/宽度。
这是它在 IB 中的样子（有点像 运行安装应用程序时它需要的样子）：
所以我有以下限制：
- 添加了 1:1 的纵横比，以便它们始终是正方形的
- 第一个按钮是 "hugging" 视图的左侧，因此它将显示在侧面。
- 以下 4 个按钮与其旁边的按钮之间有水平间距
- 每个按钮都限制在屏幕的顶部和底部，因此如果您调整屏幕大小，它们会变大。
然而，当我 运行 它时，它看起来像这样：
我在这里有点难过。我做错了什么？
提前致谢，
最好的问候 - /JBJ
** 编辑 **
我在最后一个按钮上添加了尾随约束。这确保它们都在屏幕内，但是在考虑它的大小时有点问题，所以也没有解决它。
* 编辑编辑 *
尝试删除顶部和底部约束，因为它们是迫使尺寸增大的约束。为它们全部添加了垂直中心约束。这也行不通。显示它们非常小（排列得很好，但太小了）并且还带有警告：
要将它们垂直放置在屏幕中央，请使用
NSLayoutConstraint *constraintHorizontal = [NSLayoutConstraint constraintWithItem:self
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.superview
attribute:attribute
multiplier:1.0f
constant:0.0f];
水平放置
按钮宽度=（屏幕宽度）-（按钮间距尺寸）-（左距离）-（右距离）/5;
身高相同。
第一个图像视图的初始左约束将是左距离。
好的，开始...
- 向视图添加 5 个按钮...没有限制。
- 在它们之间添加水平space约束。还要将第一个和最后一个视图的约束添加到父视图。我还将最后一个约束更改为 0（注意 +306 告诉我它当前不合适）。
- Select 所有按钮和（使用添加约束按钮）
将 "Equal Widths" 添加到所有按钮。请注意橙色虚线轮廓告诉我它们现在都将具有相同的宽度。
- 现在使用此按钮将它们对齐到视图的垂直中心...
- 最后要做的是去每一个并添加 1:1 纵横比。您需要添加约束，然后将其编辑为 1 比率。
确保在完成将按钮重新定位到新约束后更新框架...
预览屏幕显示此功能适用于所有不同尺寸...
在这种情况下，我所做的只是简单地思考。
我需要多少约束才能 100% 定义设计？我应该写些什么来告诉 phone 上的人它看起来像什么？
在您的情况下，有以下限制条件（希望我不会忘记一个）
- 都是正方形（等宽高，不是一个值）
- 它们的大小相等，只需将其设置为相等即可，而不是一个值
- 元素与边的水平间距，设置为固定大小
- 垂直居中
在 UIView 中垂直和水平居中放置 5 个按钮
Select 所有这些并将它们嵌入到堆栈视图中
改变分配以平均填充。
调整属性检查器中的间距，使按钮之间 space。
添加前导和尾随 space 以及堆栈视图的高度限制。也垂直对齐它。
我想进入 Auto Layout 行业，但我觉得有点难。
我正在尝试让 5 个图像视图在视图中心并排显示。他们也需要调整自己的大小以扩展他们的高度/宽度。
这是它在 IB 中的样子（有点像 运行安装应用程序时它需要的样子）：
所以我有以下限制：
- 添加了 1:1 的纵横比，以便它们始终是正方形的
- 第一个按钮是 "hugging" 视图的左侧，因此它将显示在侧面。
- 以下 4 个按钮与其旁边的按钮之间有水平间距
- 每个按钮都限制在屏幕的顶部和底部，因此如果您调整屏幕大小，它们会变大。
然而，当我 运行 它时，它看起来像这样：
我在这里有点难过。我做错了什么？
提前致谢， 最好的问候 - /JBJ
** 编辑 **
我在最后一个按钮上添加了尾随约束。这确保它们都在屏幕内，但是在考虑它的大小时有点问题，所以也没有解决它。
* 编辑编辑 *
尝试删除顶部和底部约束，因为它们是迫使尺寸增大的约束。为它们全部添加了垂直中心约束。这也行不通。显示它们非常小（排列得很好，但太小了）并且还带有警告：
要将它们垂直放置在屏幕中央，请使用
NSLayoutConstraint *constraintHorizontal = [NSLayoutConstraint constraintWithItem:self
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.superview
attribute:attribute
multiplier:1.0f
constant:0.0f];
水平放置 按钮宽度=（屏幕宽度）-（按钮间距尺寸）-（左距离）-（右距离）/5;
身高相同。 第一个图像视图的初始左约束将是左距离。
好的，开始...
- 向视图添加 5 个按钮...没有限制。
- 在它们之间添加水平space约束。还要将第一个和最后一个视图的约束添加到父视图。我还将最后一个约束更改为 0（注意 +306 告诉我它当前不合适）。
- Select 所有按钮和（使用添加约束按钮）
- 现在使用此按钮将它们对齐到视图的垂直中心...
- 最后要做的是去每一个并添加 1:1 纵横比。您需要添加约束，然后将其编辑为 1 比率。
确保在完成将按钮重新定位到新约束后更新框架...
预览屏幕显示此功能适用于所有不同尺寸...
在这种情况下，我所做的只是简单地思考。 我需要多少约束才能 100% 定义设计？我应该写些什么来告诉 phone 上的人它看起来像什么？
在您的情况下，有以下限制条件（希望我不会忘记一个）
- 都是正方形（等宽高，不是一个值）
- 它们的大小相等，只需将其设置为相等即可，而不是一个值
- 元素与边的水平间距，设置为固定大小
- 垂直居中
在 UIView 中垂直和水平居中放置 5 个按钮
Select 所有这些并将它们嵌入到堆栈视图中
改变分配以平均填充。
调整属性检查器中的间距，使按钮之间 space。
添加前导和尾随 space 以及堆栈视图的高度限制。也垂直对齐它。