如何使用ios中的自动布局将三个按钮并排放置在中心并留有间距？

Posted 2023-03-11

技术标签:

【中文标题】如何使用ios中的自动布局将三个按钮并排放置在中心并留有间距？【英文标题】：How to place three buttons in centre side by side with spacing using autolayout in ios? 【发布时间】：2017-02-01 11:47:44 【问题描述】：

我将三个按钮并排放置，在ios 窗口的中心有间距。我正在使用auto layout，但我设置的constraints 是：

我将第一个按钮放在left with leading 中的按钮上，将top spacing with horizontal spacing 放在第二个按钮上。

我把第二个按钮和spacing horizontally从第一个按钮和top spacing放在一起

我将第三个按钮与trailing space 和top vertical space 和horizontal spacing 与第二个按钮放在一起

接下来我将equal widths分配给所有按钮

但我的按钮还是放错了位置，为什么？有什么想法吗？

【问题讨论】：

上传带有约束的屏幕截图以便更好地理解 【参考方案1】：

首先将 3 个按钮放在屏幕上并相应地放置它们。既然你想把 3 个按钮放在中间，就这样放。

1）将第一个按钮放在左侧，将第二个按钮放在中间（到达中间时可以看到蓝色的十字线），然后将第三个按钮放在它的右侧。

2) 现在选择中间按钮并选择右下角的第三个小图标（两个平行放置的矩形）并在容器中勾选水平，在容器中勾选垂直。

3) 现在选择第一个按钮，然后选择右下角的第二个小图标（2 行之间的一个方框），然后选择左侧的红线（侧边会有 4 条红线）。记住取消选中对边距的约束。之后再次选择第一个按钮，然后向中间的按钮按住cntrl，然后从下拉菜单中选择垂直居中

4) 右侧第三个按钮也一样，不同的是选择向右的红线。

希望我已经慢慢解释了。我也是初学者，所以我能理解你的感受 :) 希望它有所帮助。请询问您是否有任何疑问。干杯

【讨论】：

仍然面临问题嘿，别担心，刚刚看到你的截图。这是因为你改变了按钮的高度和宽度，所以你必须再做一些改变。我希望你已经做到了。现在选择中间按钮，然后选择右下角的第二个小图标（两行中间的正方形）并检查相等和高度框。现在你可以看到黄线。在屏幕的左侧，您可以看到一个黄色三角形警告，如 sign ，选择它会弹出一个弹出窗口，在该选择更新约束中。对剩下的 2 个按钮执行此操作。谢谢我将来可能需要你的帮助来学习自动布局勾选表示勾选方框。（打勾）:) 很高兴为您提供帮助 :)【参考方案2】：

以下是实现它的方法：

设置所有三个按钮的Width 和Height。

将中间按钮 Horizontally 和 Vertically 居中对齐到容器。

将最左侧按钮的Trailing & 'Center Vertically(Y) 设置为中间按钮。

将最右侧按钮的Leading & Center Vertically(Y) 设置为中间按钮。

或捷径：

Vertically

Horizontally

Spacing

【讨论】：

让我检查并批准你的答案。你听起来很棒！请解释第 3 点和第 4 点...。您的意思是在第 3 点领先，在第 4 点落后？ 3. 第一个按钮的trailing 空间将附加到中间按钮。并将第一个按钮垂直居中于中间按钮。 4. 第一个按钮的leading 空间将附加到中间按钮。并将第三个按钮垂直居中于中间按钮。 ouhh 但是如何设置尾随空格？你是说水平间距吗？那么第一点呢……你的意思是在右侧栏中设置宽度和高度还是设置高度和宽度约束？【参考方案3】：

设置约束如：

中间按钮：在容器中水平，等宽，等高

左键：前导，尾随，与中键等宽和高

右键：前导，尾随，与中间按钮等宽和高

【讨论】：

【参考方案4】：

在另一个父 UIView 中添加所有 3 个按钮。

然后为每个按钮添加以下约束。

左按钮：顶部、前导、底部和等宽。中间按钮：顶部、底部、等宽和水平居中。右按钮：顶部、尾随、底部和等宽。

或者如果您的部署目标是 > 9.0，请尝试使用 Horizontal UIStackView

【讨论】：

【参考方案5】：