如何在 Xcode 中使元素具有百分比宽度

Posted 2023-02-23

【中文标题】如何在 Xcode 中使元素具有百分比宽度

【英文标题】：How do I make elements a percentage width in Xcode

【发布时间】：2017-12-15 12:18:31

【问题描述】：

我是 Xcode 的新手，以前开发过混合应用，所以决定学习 swift。语言本身很容易学习，我用多种语言编写代码。但我不明白为什么Xcode 不允许我在事物上使用百分比宽度！

第一个屏幕截图显示 iPhone 8 plus 上的 4 个按钮彼此相邻，但第二个屏幕截图是当我更改为 iPad 时，您可以看到这些框没有调整大小以适应。

它不允许我输入视图的百分比 (25%) 那么我应该如何让它们都适合不同的设备？我知道约束，但我不知道它需要什么约束 a) 让它们都保持在视图的 25% b) 所以它们彼此相邻并调整大小。

在尝试接受的答案后它起作用了，但是当我尝试添加第二行做同样的事情时，会发生以下情况：

为第一行设置约束：

为第二行设置约束：

结果：

为什么它适用于第一行而不是第二行？

【问题讨论】：

您可以在视图宽度和第一个按钮宽度之间设置 4:1 的纵横比约束。然后创建约束，使其他每个按钮都等于第一个。

这可以使用带有自动布局的 UIStackView 来实现。阅读有关 AutoLayout 和 StackView 的信息，您将了解如何正确设置 UI。

删除标记Contraint to margins并重置所有约束

好的，谢谢

【参考方案1】：

在单个容器视图中添加所有按钮。为所有按钮分配相等的宽度约束，彼此之间没有间距（相邻视图/按钮）和父视图。

试试这个看看：

这是 iPhone 4s 和 8+ 预览的结果：

iPad 的结果：

【讨论】：

唯一的问题是，如果我尝试再次做完全相同的事情，但在底部有一行它不起作用

你能分享你的代码/接口文件吗，所以我可以看到，你到底在做什么，哪里还有问题？我一定会解决你关于这个界面设计的所有问题。

按照您的指示，我用屏幕截图编辑了我上面的问题。第一行它起作用了，但是当试图在第二行按钮上做同样的事情时，它会左右留下一个白色的间隙。然后，如果我尝试将它们全部拖到底部然后更改设备，缩放将停止工作并且它们不会粘在底部。也许我应该阅读更多关于约束的内容！

检查 iPad 中的 smae 并告诉我，结果如何？

所有设备上的结果相同

【参考方案2】：

您必须将每个按钮的宽度设置为超级视图的宽度，并将约束的乘数设置为 0.25